🥇Sentry выдалены маніторынг багаў у фронтэнд прыкладаннях 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);
    }
  }
}

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 (бясплатна). Крокі для выкарыстання звычайна наступныя:

Скапіюйце змесціва тэчкі будаваць у тэчку Дакументы у каранёвым каталогу рэпазітара.
уключыце Старонкі GitHub у рэпазітары (з GitHub), каб выкарыстоўваць тэчку docs у майстар галіны
Перанясіце змены на GitHub

Заўвага: пасля таго, як я зразумеў, што мне трэба выкарыстоўваць create-create-app функцыя хатняй старонкі для запуску прыкладання. Зводзілася да дадання наступнага да package.json:

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

Канчатковая версія запушчанага дадатку даступна па адрасе:

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

Ілюстрацыя Злоўленых Памылак

Давайце пройдзем праз націск кнопкі Hello.

З памылкай, якая з'яўляецца наступным чынам:

Назіранні:

Гэтая справаздача пра памылку не можа быць больш зразумелай, BRAVO.

Ілюстрацыя Няўлічаных Памылак

Аналагічна, давайце пройдзем праз націск кнопкі памылка.

З памылкай, якая з'яўляецца наступным чынам:

Лепшая апрацоўка няўлічаных памылак (рэндэрынг)

Увядзенне Меж Памылак

Памылка JavaScript у частцы карыстацкага інтэрфейсу не павінна парушаць працу ўсяго прыкладання. Каб вырашыць гэтую праблему для карыстачоў React, React 16 уводзіць новае паняцце "мяжы памылак".

Межы памылак – гэта кампаненты React, якія ловяць памылкі JavaScript у любым месцы свайго даччынага дрэва кампанентаў, рэгіструюць гэтыя памылкі і адлюстроўваюць рэзервовы карыстацкі інтэрфейс замест дрэва кампанентаў, якое разбілася. Межы памылак улоўліваюць памылкі падчас рэндэрынгу, у метадах жыццёвага цыклу і ў канструктарах усяго дрэва пад імі.

...

Новыя паводзіны для нявыяўленых памылак

Гэтая змена мае важнае значэнне. Пачынаючы з React 16, памылкі, якія не былі злоўлены якой-небудзь мяжой памылак, прывядуць да размантавання ўсяго дрэва кампанентаў React.

- Dan Abramov Error Handling in 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,
    });
  }
}

назіранне:

Пры націску кнопкі, Рэагаваць будзе адлюстроўвацца flag.busted.bogus, якая спараджае памылку
Без мяжы памылкі ўсё дрэва кампанентаў будзе размантавана

Затым мы пішам наш код мяжы памылкі (выкарыстоўвае новы метад жыццёвага цыклу 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.

Завяршэнне

Спадзяюся, вам было гэта карысна.

PS Спасылка на арыгінал

PS Тэлеграм чат па Sentry https://t.me/sentry_ru

Крыніца: habr.com

Sentry выдалены маніторынг багаў у фронтэнд прыкладаннях React

Дадаць каментар Адмяніць адказ