🥇Далечинско следење на грешки во 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://303c04eac89844b5bfc908ceffc6757c@sentry.io/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);
    }
  }
}

react-app/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

react-app/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

Проблем (Изворни карти)

Можеме да го тестираме Sentry со производствена верзија со внесување:

yarn build

и од папката build внесете:

npx http-server -c-1

Проблемот на кој веднаш наидуваме е дека записите за грешки на Sentry се однесуваат на броеви на линии во минификуваната серија; не многу корисно.

Услугата Sentry го објаснува ова со повлекување на изворните мапи за намалениот пакет по добивањето грешка. Во овој случај работиме од localhost (не е достапен од услугата Sentry).

Решенија (изворни карти)

Решението за овој проблем е да ја стартувате апликацијата од јавен веб-сервер. Едно едноставно копче за одговор за користење на услугата GitHub Pages (бесплатно). Чекорите за користење обично се како што следува:

Копирајте ја содржината на папката се изгради да папка docs во root директориумот на складиштето.
Вклучи ја, уклучи ја, ме пали Страници на GitHub во складиштето (од GitHub) за да ја користите папката со документи во господар гранки
Притиснете ги промените на GitHub

Имајте на ум: откако сфатив што треба да користам креирај-создавај-апликација Функција на почетната страница за стартување на апликацијата. Следи до додавање на следново на package.json:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

Конечната верзија на апликацијата која работи е достапна на:

https://larkintuckerllc.github.io/hello-sentry/

Илустрација на фатени бубачки

Ајде да поминеме со кликнување на копчето Здраво.

Со грешка која се појавува вака:

Набљудувања:

Овој извештај за грешки не може да биде појасен, БРАВО.

Илустрација на неоткриени грешки

Исто така, да поминеме низ кликнувањето на копчето грешка.

Со грешка која се појавува вака:

Подобро справување со неоткриени грешки (рендерирање)

Воведување на ограничувања на грешки

Грешка во JavaScript во дел од корисничкиот интерфејс не треба да ја скрши целата апликација. За да се реши овој проблем за корисниците на React, React 16 воведува нов концепт наречен „граници на грешки“.

Границите за грешки се компоненти на React кои ги фаќаат грешките на JavaScript насекаде во дрвото на нивното дете компонента, ги евидентираат тие грешки и прикажуваат резервен интерфејс наместо дрвото на компонентата што се урна. Границите на грешки ги фаќаат грешките при рендерирање, во методите на животниот циклус и во конструкторите на целото дрво под нив.

...

Ново однесување за неоткриени грешки

Оваа промена е значајна. Почнувајќи од React 16, грешките што не беа фатени со граница на грешка ќе резултираат со демонтирање на целото стебло на компонентата React.

- Ден Абрамов - Ракување со грешки во React 16

Важно појаснување на кое ми требаше малку време пред да го сфатам ова е тоа горенаведеното однесување работи само со грешки фрлени во методот на рендерирање (или поверојатно во кој било од методите на животниот циклус). На пример, користењето на границите за грешки нема да донесе ништо добро со нашето копче грешка; оваа грешка беше во управувачот со кликнување.

Ајде да создадеме пример за грешка при рендерирање, а потоа да користиме граници за грешка за да се справиме со грешката попривлечно.

react-app/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

Набудување:

Кога ќе го притиснете копчето, Реагираат ќе бидат прикажани знаме.разбиен.лажен, што генерира грешка
Без граница на грешка, целото стебло на компонентите ќе се демонтира

Потоа го пишуваме нашиот граничен код за грешка (го користи новиот метод на животен циклус 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;
  }
}

Конечно ја користиме оваа компонента:

react-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

Меѓутоа, со кликнување на копчето Render Error се прикажува резервниот интерфејс и известува за грешка до Sentry.