Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

ΠœΡ‹ ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ использованиС 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 ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Π‘Π»ΡƒΠΆΠ±Π° Sentry ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ это, вытягивая исходныС ΠΊΠ°Ρ€Ρ‚Ρ‹ для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚Π° послС получСния ошибки. Π’ этом случаС ΠΌΡ‹ Π±Π΅ΠΆΠΈΠΌ ΠΎΡ‚ localhost (нСдоступного слуТбой Sentry).

РСшСния (Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ ΠšΠ°Ρ€Ρ‚Ρ‹)

РСшСниС этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ сводится ΠΊ запуску прилоТСния с общСдоступного Π²Π΅Π±-сСрвСра. Одна простая ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚Π²Π΅Ρ‚Π° Π½Π° Π½Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСрвис GitHub Pages (бСсплатно). Π¨Π°Π³ΠΈ для использования ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅:

  1. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ содСрТимоС ΠΏΠ°ΠΏΠΊΠΈ build Π² ΠΏΠ°ΠΏΠΊΡƒ docs Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ рСпозитория.

  2. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ GitHub Pages Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ (ΠΈΠ· GitHub), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ docs Π² master Π²Π΅Ρ‚Π²ΠΈ

  3. ΠŸΠ΅Ρ€Π΅Π½Π΅ΡΠΈΡ‚Π΅ измСнСния Π½Π° GitHub

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я понял, Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ create-create-app функция домашнСй страницы для запуска прилоТСния. Бводилось ΠΊ добавлСнию ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊ package.json:

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

ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия Π·Π°ΠΏΡƒΡ‰Π΅Π½Π½ΠΎΠ³ΠΎ прилоТСния доступна ΠΏΠΎ адрСсу:

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

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ ΠŸΠΎΠΉΠΌΠ°Π½Π½Ρ‹Ρ… Ошибок

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΉΠ΄Π΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Hello.

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Π‘ ошибкой, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰Π΅ΠΉΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

НаблюдСния:

  • Π­Ρ‚ΠΎΡ‚ ΠΎΡ‚Ρ‡Π΅Ρ‚ ΠΎΠ± ошибкС Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ясным, BRAVO.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ НСучтСнных Ошибок

Аналогично, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠΉΠ΄Π΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Error.

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Π‘ ошибкой, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰Π΅ΠΉΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Π›ΡƒΡ‡ΡˆΠ°Ρ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½Π΅ΡƒΡ‡Ρ‚Π΅Π½Π½Ρ‹Ρ… ошибок (Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³)

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π“Ρ€Π°Π½ΠΈΡ† Ошибок

Ошибка JavaScript Π² части ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ всСго прилоТСния. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ React, React 16 Π²Π²ΠΎΠ΄ΠΈΡ‚ Π½ΠΎΠ²ΠΎΠ΅ понятиС "Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ошибок".

Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ошибок – это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ React, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ловят ошибки JavaScript Π² любом мСстС своСго Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ Π΄Π΅Ρ€Π΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ эти ошибки ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс вмСсто Π΄Π΅Ρ€Π΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π·Π±ΠΈΠ»ΠΎΡΡŒ. Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ошибок ΡƒΠ»Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ ошибки Π²ΠΎ врСмя Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° ΠΈ Π² конструкторах всСго Π΄Π΅Ρ€Π΅Π²Π° ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ.

…

НовоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ для Π½Π΅ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Ρ… ошибок

Π­Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π°ΠΆΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Начиная с React 16, ошибки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠΉΠΌΠ°Π½Ρ‹ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ ошибок, ΠΏΡ€ΠΈΠ²Π΅Π΄ΡƒΡ‚ ΠΊ Ρ€Π°Π·ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ всСго Π΄Π΅Ρ€Π΅Π²Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² React.

β€” Dan Abramov β€” Error Handling in React 16

Π’Π°ΠΆΠ½ΠΎΠ΅ ΡƒΡ‚ΠΎΡ‡Π½Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ заняло Ρƒ мСня Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ я понял это, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΡˆΠ΅ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ошибками, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° (ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ вСроятно, Π² любом ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°). НапримСр, использованиС Π³Ρ€Π°Π½ΠΈΡ† ошибок Π½Π΅ принСсло Π±Ρ‹ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·Ρ‹ с нашСй ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Error; эта ошибка Π±Ρ‹Π»Π° Π² ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ΅ Ρ‰Π΅Π»Ρ‡ΠΊΠ°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ создадим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ошибки Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ошибок для Π±ΠΎΠ»Π΅Π΅ изящной ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ошибки.

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

НаблюдСниС:

  • ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, React Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ 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.

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Sentry ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΈΠ½Π³ Π±Π°Π³ΠΎΠ² Π² Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ прилоТСниях React

Π—Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅

НадСюсь, Π²Π°ΠΌ Π±Ρ‹Π»ΠΎ это ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.

P.S. Бсылка Π½Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»

P.S. Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ Ρ‡Π°Ρ‚ ΠΏΠΎ Sentry https://t.me/sentry_ru

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: habr.com