🥇Сентри даљинско праћење грешака у Реацт фронтенд апликацијама

Истражујемо користећи Сентри са Реацт-ом.

Овај чланак је део серије која почиње извештавањем о грешкама Сентри користећи пример: Часть КСНУМКС.

Имплементација Реацт-а

Прво морамо да додамо нови Сентри пројекат за ову апликацију; са сајта Сентри. У овом случају бирамо Реацт.

Поново ћемо имплементирати наша два дугмета, Хелло и Еррор, у апликацију са Реацт-ом. Почињемо креирањем наше почетне апликације:

npx create-react-app react-app

Затим увозимо Сентри пакет:

yarn add @sentry/browser

и иницијализујте га:

реацт-апп/срц/индек.јс

...
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,
  });
}
...

Запажања:

Током развоја, имамо друге механизме за праћење проблема, као што је конзола, тако да омогућавамо Сентри само за производне верзије

Затим имплементирамо наша дугмад Здраво и Грешка и додајемо их у апликацију:

реацт-апп/срц/Хелло.јс

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);
    }
  }
}

реацт-апп/срц/МиЕррор.јс

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');
  }
}

реацт-апп/срц/Апп.јс

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

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

export default App;

Проблем (Мапе извора)

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

yarn build

и из фасцикле за изградњу унесите:

npx http-server -c-1

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

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

Решења (Мапе извора)

Решење овог проблема је покретање апликације са јавног веб сервера. Једно једноставно дугме за одговор за коришћење услуге ГитХуб Пагес (бесплатно). Кораци за коришћење су обично следећи:

Копирајте садржај фасцикле градити у фасциклу доцс у основном директоријуму спремишта.
Укључити ГитХуб странице у спремишту (са ГитХуб-а) да бисте користили фасциклу докумената у њој мајстор гране
Убаците промене на ГитХуб

Приметити: након што сам схватио шта треба да користим креирај-креирај-апликацију функцију почетне странице за покретање апликације. Дошао је до додавања следећег у пацкаге.јсон:

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

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

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

Илустрација ухваћених буба

Хајде да прођемо кроз клик на дугме Здраво.

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

Запажања:

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

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

Исто тако, идемо кроз клик на дугме Грешка.

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

Боље руковање грешкама које нису урачунате (приказивање)

Увођење ограничења грешке
ЈаваСцрипт грешка у делу корисничког интерфејса не би требало да прекине целу апликацију. Да би решио овај проблем за Реацт кориснике, Реацт 16 уводи нови концепт под називом „границе грешке“.
Границе грешке су Реацт компоненте које хватају ЈаваСцрипт грешке било где у свом стаблу подређених компоненти, евидентирају те грешке и приказују резервни кориснички интерфејс уместо стабла компоненти које се срушило. Границе грешке хватају грешке током рендеровања, у методама животног циклуса и у конструкторима целог стабла испод њих.
...
Ново понашање за неоткривене грешке
Ова промена је значајна. Од Реацт-а 16, грешке које нису биле ухваћене ниједном границом грешке ће резултирати демонтажом целог Реацт стабла компоненти.
- Дан Абрамов - Руковање грешкама у Реацт 16

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

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

реацт-апп/срц/МиРендерЕррор

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,
    });
  }
}

Посматрање:

Када притиснете дугме, Реаговати биће приказано флаг.бустед.богус, што генерише грешку
Без границе грешке, цело стабло компоненти ће бити искључено

Затим пишемо наш гранични код грешке (користи нову методу животног циклуса цомпонентДидЦатцх); ово је у суштини пример дат у чланку Дана Абрамова:

реацт-апп/срц/ЕррорБоундари.јс

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;
  }
}

На крају користимо ову компоненту:

реацт-апп/срц/Апп.јс

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

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

Међутим, кликом на дугме Рендер Еррор приказује се резервни кориснички интерфејс и јавља грешка Сентри-у.