Далечинско следење на бубачки во React апликациите на предниот дел
Истражуваме користејќи го Sentry со React.
Оваа статија е дел од серијата која започнува со известување за грешки во Sentry користејќи пример: Часть 1.
Имплементација на React
Прво треба да додадеме нов Sentry проект за оваа апликација; од веб-страницата на Sentry. Во овој случај избираме React.
Повторно ќе ги имплементираме нашите две копчиња, Hello и Error, во апликација со React. Започнуваме со креирање на нашата стартна апликација:
npx create-react-app react-app
Потоа го увезуваме пакетот Sentry:
yarn add @sentry/browser
и иницијализирај го:
react-app/src/index.js
...
import * as Sentry from '@sentry/browser';
const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
Sentry.init({
dsn: 'https://[email protected]/1289887',
release: RELEASE,
});
}
...
Набљудувања:
За време на развојот, имаме и други механизми за следење на проблемите, како што е конзолата, така што го овозможуваме Sentry само за производствени изданија
Следно, ги имплементираме нашите копчиња Hello и Error и ги додаваме во апликацијата:
react-app/src/Hello.js
import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';
export default class Hello extends Component {
state = {
text: '',
};
render() {
const { text } = this.state;
return (
<div>
<button
onClick={this.handleClick}
>
Hello
</button>
<div>{text}</div>
</div>
)
}
handleClick = () => {
this.setState({
text: 'Hello World',
});
try {
throw new Error('Caught');
} catch (err) {
if (process.env.NODE_ENV !== 'production') {
return;
}
Sentry.captureException(err);
}
}
}
Можеме да го тестираме Sentry со производствена верзија со внесување:
yarn build
и од папката build внесете:
npx http-server -c-1
Проблемот на кој веднаш наидуваме е дека записите за грешки на Sentry се однесуваат на броеви на линии во минификуваната серија; не многу корисно.
Услугата Sentry го објаснува ова со повлекување на изворните мапи за намалениот пакет по добивањето грешка. Во овој случај работиме од localhost (не е достапен од услугата Sentry).
Решенија (изворни карти)
Решението за овој проблем е да ја стартувате апликацијата од јавен веб-сервер. Едно едноставно копче за одговор за користење на услугата GitHub Pages (бесплатно). Чекорите за користење обично се како што следува:
Копирајте ја содржината на папката се изгради да папка docs во root директориумот на складиштето.
Вклучи ја, уклучи ја, ме пали Страници на GitHub во складиштето (од GitHub) за да ја користите папката со документи во господар гранки
Притиснете ги промените на GitHub
Имајте на ум: откако сфатив што треба да користам креирај-создавај-апликација Функција на почетната страница за стартување на апликацијата. Следи до додавање на следново на package.json:
Овој извештај за грешки не може да биде појасен, БРАВО.
Илустрација на неоткриени грешки
Исто така, да поминеме низ кликнувањето на копчето грешка.
Со грешка која се појавува вака:
Подобро справување со неоткриени грешки (рендерирање)
Воведување на ограничувања на грешки
Грешка во JavaScript во дел од корисничкиот интерфејс не треба да ја скрши целата апликација. За да се реши овој проблем за корисниците на React, React 16 воведува нов концепт наречен „граници на грешки“.
Границите за грешки се компоненти на React кои ги фаќаат грешките на JavaScript насекаде во дрвото на нивното дете компонента, ги евидентираат тие грешки и прикажуваат резервен интерфејс наместо дрвото на компонентата што се урна. Границите на грешки ги фаќаат грешките при рендерирање, во методите на животниот циклус и во конструкторите на целото дрво под нив.
...
Ново однесување за неоткриени грешки
Оваа промена е значајна. Почнувајќи од React 16, грешките што не беа фатени со граница на грешка ќе резултираат со демонтирање на целото стебло на компонентата React.
Важно појаснување на кое ми требаше малку време пред да го сфатам ова е тоа горенаведеното однесување работи само со грешки фрлени во методот на рендерирање (или поверојатно во кој било од методите на животниот циклус). На пример, користењето на границите за грешки нема да донесе ништо добро со нашето копче грешка; оваа грешка беше во управувачот со кликнување.
Ајде да создадеме пример за грешка при рендерирање, а потоа да користиме граници за грешка за да се справиме со грешката попривлечно.
Кога ќе го притиснете копчето, Реагираат ќе бидат прикажани знаме.разбиен.лажен, што генерира грешка
Без граница на грешка, целото стебло на компонентите ќе се демонтира
Потоа го пишуваме нашиот граничен код за грешка (го користи новиот метод на животен циклус componentDidCatch); ова е во суштина примерот даден во написот на Ден Абрамов:
react-app/src/ErrorBoundary.js
import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(err, info) {
this.setState({ hasError: true });
Sentry.captureException(err);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}