🥇Sentry vzdialené monitorovanie chýb vo frontend aplikáciách React

Skúmame používanie Sentry s Reactom.

Tento článok je súčasťou série, ktorá začína hlásením chýb Sentry pomocou príkladu: Часть 1.

Implementácia React

Najprv musíme pridať nový projekt Sentry pre túto aplikáciu; z webovej stránky Sentry. V tomto prípade zvolíme React.

Znovu implementujeme naše dve tlačidlá, Hello a Error, v aplikácii s React. Začneme vytvorením našej štartovacej aplikácie:

npx create-react-app react-app

Potom importujeme balík Sentry:

yarn add @sentry/browser

a inicializujte ho:

reakčná aplikácia/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,
  });
}
...

Pozorovania:

Počas vývoja máme ďalšie mechanizmy na monitorovanie problémov, ako je napríklad konzola, takže Sentry povoľujeme len pre produkčné zostavy

Ďalej implementujeme naše tlačidlá Hello a Error a pridáme ich do aplikácie:

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

respond-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 otestovať s produkčnou zostavou zadaním:

yarn build

a z priečinka build zadajte:

npx http-server -c-1

Problém, na ktorý okamžite narazíme, je ten, že záznamy chýb Sentry odkazujú na čísla riadkov v minifikovanej dávke; nie veľmi užitočné.

Služba Sentry to vysvetľuje tým, že po prijatí chyby stiahne zdrojové mapy pre zmenšený paket. V tomto prípade bežíme z localhost (nie je prístupný službou Sentry).

Riešenia (zdrojové mapy)

Riešením tohto problému je spustenie aplikácie z verejného webového servera. Jedno jednoduché tlačidlo odpovede na používanie služby GitHub Pages (zadarmo). Kroky na použitie sú zvyčajne nasledovné:

Skopírujte obsah priečinka vybudovať do priečinka dokumenty v koreňovom adresári úložiska.
Zapnite Stránky GitHub v úložisku (z GitHubu), aby ste mohli použiť priečinok docs majster pobočky
Preneste zmeny na GitHub

Poznámka: potom, čo som zistil, čo potrebujem použiť vytvoriť-vytvoriť-aplikáciu funkciu domovskej stránky na spustenie aplikácie. Do súboru package.json sme pridali nasledujúce položky:

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

Finálna verzia spustenej aplikácie je dostupná na:

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

Ilustrácia chytených chýb

Poďme si prejsť kliknutím na tlačidlo Ahoj.

S chybou, ktorá sa zobrazuje takto:

Pozorovania:

Toto hlásenie o chybe nemôže byť jasnejšie, BRAVO.

Ilustrácia Unaccounted for Errors

Podobne prejdeme kliknutím na tlačidlo Chyba.

S chybou, ktorá sa zobrazuje takto:

Lepšie spracovanie nezapočítaných chýb (vykresľovanie)

Zavedenie limitov chýb

Chyba JavaScript v časti používateľského rozhrania by nemala poškodiť celú aplikáciu. Na vyriešenie tohto problému pre používateľov Reactu, React 16 predstavuje nový koncept s názvom „chybové hranice“.

Hranice chýb sú komponenty React, ktoré zachytávajú chyby JavaScriptu kdekoľvek v strome svojich podriadených komponentov, zaznamenávajú tieto chyby a vykresľujú záložné používateľské rozhranie namiesto stromu komponentov, ktorý zlyhal. Hranice chýb zachytávajú chyby počas vykresľovania, v metódach životného cyklu a v konštruktoroch celého stromu pod nimi.

...

Nové správanie pre nezistené chyby

Táto zmena je významná. Od React 16 budú mať chyby, ktoré neboli zachytené žiadnou chybovou hranicou, za následok odpojenie celého stromu komponentov React.

- Dan Abramov - Riešenie chýb v React 16

Dôležité objasnenie, ktoré mi chvíľu trvalo, kým som si to uvedomil, je to Vyššie uvedené správanie funguje iba s chybami vyvolanými v metóde vykresľovania (alebo pravdepodobnejšie v ktorejkoľvek z metód životného cyklu). Napríklad použitie hraníc chýb by s naším tlačidlom neprinieslo nič dobré Chyba; táto chyba bola v obslužnom programe kliknutia.

Vytvorme príklad chyby vykresľovania a potom použite hranice chýb na elegantnejšie spracovanie chyby.

reakčná aplikácia/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,
    });
  }
}

Pozorovanie:

Keď stlačíte tlačidlo, Reagovať sa zobrazí vlajka.prepadnutá.falošná, čo generuje chybu
Bez hranice chyby sa odpojí celý strom komponentov

Potom napíšeme náš kód hranice chýb (používa novú metódu životného cyklu komponentDidCatch); toto je v podstate príklad uvedený v článku Dana Abramova:

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

Nakoniec použijeme tento komponent:

reagovat-app/src/App.js

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

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

Kliknutím na tlačidlo Chyba vykreslenia sa však zobrazí záložné používateľské rozhranie a chyba sa nahlási Sentry.

Завершение

Dúfam, že vám to pomohlo.

PS Odkaz na originál

PS Telegram chat cez Sentry https://t.me/sentry_ru

Zdroj: hab.com

Sentry vzdialené monitorovanie chýb vo frontend aplikáciách React

Pridať komentár Zrušiť odpoveď na komentár