🥇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

Додати коментар або відгук Скасувати відповідь