🥇Sentry vzdálené monitorování chyb v frontendových aplikacích React

Studujeme použití Sentry s React.

Tento článek je součástí série, která začíná zprávou o chybách Sentry na příkladu: Část 1.

Implementace React

Nejprve musíme přidat nový projekt Sentry pro tuto aplikaci; na webové stránce Sentry. V tomto případě vybíráme React.

Znovu implementujeme naše dvě tlačítka, Hello a Error, aplikaci s React. Začínáme vytvořením naší startovací aplikace:

npx create-react-app react-app

Poté importujeme balíček Sentry:

yarn add @sentry/browser

a inicializujeme ho:

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

Pozorování:

Během vývoje máme jiné mechanismy pro sledování problémů, například konzoli, takže Sentry zapínáme pouze pro produkční sestavení.

Poté implementujeme naše tlačítka Hello a Error a přidáme je do aplikace:

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}"
        >
          Ahoj
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Ahoj světe',
    });
    try {
      throw new Error('Chyceno');
    } 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}"
        >
          Chyba
        </button>
      </div>
    )
  }

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

react-app / src / App.js

...\nimport Hello from './Hello';\nimport MyError from './MyError';\n\nclass App extends Component {\n  render() {\n    return (
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );\n  }\n}\n\nexport default App;

Problém (Zdrojové mapy)

Můžeme otestovat Sentry s produkčním sestavením tímto způsobem:

yarn build

a z build složky zadejte:

npx http-server -c-1

Problém, se kterým se okamžitě setkáme, spočívá v tom, že záznamy o chybách Sentry odkazují na čísla řádků ve zmenšeném balíčku; není to příliš užitečné.

Služba Sentry to vysvětluje tím, že po obdržení chyby vytáhne zdrojové mapy pro zmenšený balíček. V tom případě běžíme z localhost (který není Sentry dostupný).

Řešení (Zdrojové mapy)

Řešení tohoto problému spočívá v provozování aplikace z veřejného webového serveru. Jednoduchá odpověď na to je použít službu GitHub Pages (zdarma). Obvyklé kroky jsou následující:

Zkopírujte obsah složky build do složky docs v kořenovém adresáři repozitáře.
Povolit GitHub Pages v repozitáři (z GitHubu), aby používal složku docs v master větvi
Přenést změny na GitHub

Poznámka: poté, co jsem pochopil, že musím použít create-create-app funkci homepage pro spuštění aplikace. Spočívalo to v přidání následujícího do package.json:

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

Konečná verze spuštěné aplikace je dostupná na adrese:

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

Ilustrace zachycených chyb

Pojďme projít stisknutím tlačítka Hello.

S chybou, která se objeví následujícím způsobem:

Pozorování:

Tato zpráva o chybě nemůže být jasnější, BRAVO.

Ilustrace nezohledněných chyb

Podobně, pojďme projít stisknutím tlačítka Chyba.

S chybou, která se objeví následujícím způsobem:

Nejlepší zpracování nezachycených chyb (renderování)

Úvod do hranic chyb
Chyba JavaScriptu v části uživatelského rozhraní by neměla narušovat funkčnost celé aplikace. Aby se tento problém vyřešil pro uživatele Reactu, React 16 zavádí nový pojem "hranice chyb".
Hranice chyb jsou komponenty Reactu, které zachycují chyby JavaScriptu kdekoli ve svém podstromu komponent, registrují tyto chyby a zobrazují záložní uživatelské rozhraní namísto rozpadlého stromu komponent. Hranice chyb zachycují chyby během renderování, v metodách životního cyklu a v konstruktoru celého stromu pod nimi.
…
Nové chování pro nezachycené chyby
Tato změna je důležitá. Od Reactu 16 chyby, které nebyly zachyceny žádnou hranicí chyb, povedou k odmontování celého stromu komponent Reactu.
— Dan Abramov — Zpracování chyb v Reactu 16

Důležité upřesnění, které mi nějakou dobu trvalo, než jsem to pochopil, je, že výše uvedené chování funguje pouze s chybami generovanými v metodě renderování (nebo, co je pravděpodobnější, v jakékoli z metod životního cyklu). Například použití hranic chyb by nebylo užitečné s naším tlačítkem Chyba; tato chyba byla v obslužné rutinně kliknutí.

Vytvořme příklad chyby při renderování a poté použijeme hranice chyb pro elegantnější zpracování chyby.

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}"
        >
          Chyba renderování
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Pozorování:

Při stisknutí tlačítka, React se zobrazí flag.busted.bogus, která generuje chybu
Bez hranice chyb se celý strom komponent odmontuje

Pak napíšeme náš kód hranice chyb (používá novou metodu životního cyklu componentDidCatch); to je vlastně příklad uvedený v článku Dana Abramova:

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>Něco se pokazilo.</h1>;
    }
    return this.props.children;
  }
}

Nakonec použijeme tuto komponentu:

react-app / src / App.js

... import MyRenderError from './MyRenderError'; class App extends Component { render() { return (
      <errorboundary>
        <div classname="App">
          ...
        </div>
      </errorboundary>
    );
  }
}
...

Při tom stisknutí tlačítka Render Error zobrazí záložní uživatelské rozhraní a hlásí chybu Sentry.