🥇Sentry vzdálené sledování chyb ve frontend aplikacích React

Zkoumáme používání Sentry s Reactem.

Tento článek je součástí série začínající hlášením chyb Sentry pomocí příkladu: část 1.

Implementace React

Nejprve musíme přidat nový projekt Sentry pro tuto aplikaci; z webu Sentry. V tomto případě zvolíme React.

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

npx create-react-app react-app

Poté importujeme balíček Sentry:

yarn add @sentry/browser

a inicializujte jej:

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

Postřehy:

Během vývoje máme další mechanismy pro sledování problémů, jako je konzole, takže Sentry povolujeme pouze pro produkční sestavení

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

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

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

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

Problém (zdrojové mapy)

Sentry můžeme otestovat s produkčním sestavením zadáním:

yarn build

a ze složky sestavení zadejte:

npx http-server -c-1

Problém, na který jsme okamžitě narazili, je ten, že záznamy chyb Sentry odkazují na čísla řádků v minifikované dávce; nepříliš užitečné.

Služba Sentry to vysvětluje tím, že po obdržení chyby stáhne zdrojové mapy pro zmenšený paket. V tomto případě běžíme z localhost (není přístupný službou Sentry).

Řešení (zdrojové mapy)

Řešením tohoto problému je spuštění aplikace z veřejného webového serveru. Jedno jednoduché tlačítko pro odpověď k použití služby GitHub Pages (zdarma). Kroky k použití jsou obvykle následující:

Zkopírujte obsah složky stavět do složky dokumenty v kořenovém adresáři úložiště.
Zapnout Stránky GitHub v úložišti (z GitHubu), abyste mohli použít složku docs mistr větví
Odeslat změny na GitHub

Poznámka: poté, co jsem zjistil, co potřebuji použít vytvořit-vytvořit-aplikaci funkci domovské stránky pro spuštění aplikace. Došlo k přidání následujícího do package.json:

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

Finální verze běžící aplikace je k dispozici na:

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

Ilustrace chycených chyb

Pojďme si projít kliknutím na tlačítko Hello.

S chybou, která se zobrazuje takto:

Postřehy:

Toto hlášení o chybě nemůže být jasnější, BRAVO.

Ilustrace Unaccounted for Errors

Stejně tak projdeme kliknutím na tlačítko Chyba.

S chybou, která se zobrazuje takto:

Lepší zpracování nezapočítaných chyb (vykreslování)

Zavedení limitů chyb

Chyba JavaScriptu v části uživatelského rozhraní by neměla narušit celou aplikaci. K vyřešení tohoto problému pro uživatele Reactu zavádí React 16 nový koncept nazvaný „chybové hranice“.

Hranice chyb jsou komponenty React, které zachycují chyby JavaScriptu kdekoli ve stromu jejich podřízených komponent, protokolují tyto chyby a vykreslují záložní uživatelské rozhraní namísto stromu komponent, který se zhroutil. Hranice chyb zachycují chyby během vykreslování, v metodách životního cyklu a v konstruktorech celého stromu pod nimi.

...

Nové chování pro neodhalené chyby

Tato změna je významná. Od React 16 budou mít chyby, které nebyly zachyceny žádnou chybovou hranicí, k odpojení celého stromu komponenty React.

- Dan Abramov - Zpracování chyb v React 16

Důležité vysvětlení, které mi chvíli trvalo, než jsem si to uvědomil výše uvedené chování funguje pouze s chybami vyvolanými v metodě renderování (nebo pravděpodobněji v kterékoli z metod životního cyklu). Například použití hranic chyb by s naším tlačítkem nepomohlo Chyba; tato chyba byla v obslužné rutině kliknutí.

Vytvořme příklad chyby vykreslování a poté použijte hranice chyb, abychom chybu zvládli elegantněji.

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

Pozorování:

Když stisknete tlačítko, REACT se zobrazí vlajka.prošlá.falešná, což generuje chybu
Bez hranice chyby bude odpojen celý strom komponenty

Poté napíšeme náš kód chybové hranice (používá novou metodu životního cyklu komponentDidCatch); toto je v podstatě příklad uvedený v článku Dana Abramova:

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

Nakonec použijeme tuto komponentu:

reagovat-app/src/App.js

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

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

Klepnutím na tlačítko Chyba vykreslení však zobrazíte záložní uživatelské rozhraní a nahlásíte chybu Sentry.

Dokončení

Doufám, že vám to pomohlo.

PS Odkaz na originál

PS Telegram chat přes Sentry https://t.me/sentry_ru

Zdroj: www.habr.com

Vzdálené monitorování chyb v aplikacích React frontend Sentry

Přidat komentář Zrušit odpověď na komentář