🥇Sentry nuotolinis klaidų stebėjimas React frontend programose

Mes tiriame naudoti Sentry su React.

Šis straipsnis yra serijos dalis, prasidedanti pranešimu apie Sentry klaidas naudojant pavyzdį: Часть 1.

React įgyvendinimas

Pirmiausia turime pridėti naują „Sentry“ projektą šiai programai; iš Sentry svetainės. Tokiu atveju pasirenkame React.

Mes iš naujo įdiegsime du mygtukus „Hello“ ir „Error“ programoje su „React“. Pradedame kurdami savo starterio programą:

npx create-react-app react-app

Tada importuojame Sentry paketą:

yarn add @sentry/browser

ir inicijuokite:

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

Pastabos:

Kurdami turime kitus problemų stebėjimo mechanizmus, pvz., konsolę, todėl įgaliname tik „Sentry“ gamybinėms versijoms.

Tada įdiegiame mygtukus Hello ir Error ir pridedame juos prie programos:

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;

Problema (šaltinio žemėlapiai)

Galime išbandyti „Sentry“ su gamybos versija įvesdami:

yarn build

ir iš kūrimo aplanko įveskite:

npx http-server -c-1

Problema, su kuria iš karto susiduriame, yra ta, kad „Sentry“ klaidų įrašai nurodo eilučių numerius sumažintoje partijoje; nelabai naudinga.

„Sentry“ paslauga tai paaiškina ištraukdama sumažinto paketo šaltinio žemėlapius, gavusi klaidą. Šiuo atveju mes veikiame iš localhost (nepasiekiama Sentry paslaugai).

Sprendimai (šaltinio žemėlapiai)

Šios problemos sprendimas yra paleisti programą iš viešojo žiniatinklio serverio. Vienas paprastas atsakymo mygtukas, skirtas naudoti „GitHub Pages“ paslaugą (nemokama). Paprastai naudojami šie veiksmai:

Nukopijuokite aplanko turinį statyti į aplanką docs saugyklos šakniniame kataloge.
Įjungti „GitHub“ puslapiai saugykloje (iš „GitHub“), kad galėtumėte naudoti dokumentų aplanką meistras šakos
Perkelkite pakeitimus į „GitHub“.

Atkreipti dėmesį: po to, kai supratau, ką man reikia naudoti kurti-kurti-programėlę pagrindinio puslapio funkciją, kad paleistumėte programą. Prie package.json buvo pridėta:

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

Galutinę veikiančios programos versiją galite rasti adresu:

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

Sugautų klaidų iliustracija

Peržiūrėkime spustelėdami mygtuką Sveiki.

Su tokia klaida:

Pastabos:

Šis pranešimas apie riktą negali būti aiškesnis, BRAVO.

Nepastebėtų klaidų iliustracija

Panašiai pereikime prie mygtuko paspaudimo klaida.

Su tokia klaida:

Geresnis neapskaitytų klaidų tvarkymas (perteikimas)

Klaidų ribų įvedimas

„JavaScript“ klaida dalyje vartotojo sąsajos neturėtų pažeisti visos programos. Norėdami išspręsti šią „React“ vartotojų problemą, „React 16“ pristato naują koncepciją, vadinamą „klaidų ribomis“.

Klaidų ribos yra „React“ komponentai, kurie užfiksuoja „JavaScript“ klaidas bet kurioje antrinio komponento medžio vietoje, užregistruoja tas klaidas ir pateikia atsarginę vartotojo sąsają, o ne komponentų medį, kuris užstrigo. Klaidų ribos užfiksuoja klaidas atvaizdavimo metu, gyvavimo ciklo metoduose ir viso po jomis esančio medžio konstruktoriuose.

...

Nauja elgsena neaptiktoms klaidoms

Šis pokytis yra reikšmingas. Nuo React 16 klaidų, kurių nepagavo jokia klaidų riba, visas React komponentų medis bus atjungtas.

- Danas Abramovas - Klaidų apdorojimas „React“ 16

Svarbus paaiškinimas, kuris užtruko, kol tai supratau pirmiau nurodytas veiksmas veikia tik su klaidomis, įvestomis pateikimo metodu (arba labiau tikėtina bet kuriame gyvavimo ciklo metodu). Pavyzdžiui, naudojant klaidų ribas mūsų mygtukas nepadės nieko gero klaida; ši klaida buvo paspaudimų tvarkyklėje.

Sukurkime atvaizdavimo klaidos pavyzdį ir tada naudokite klaidų ribas, kad klaidą ištaisytume grakščiau.

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

Stebėjimas:

Kai paspausite mygtuką, Reaguoti будет отображаться vėliava.nulaužta.netikras, kuris sukuria klaidą
Be klaidos ribos bus atjungtas visas komponentų medis

Tada parašome savo klaidos ribos kodą (naudojame naują gyvavimo ciklo metodą komponentasDidCatch); iš esmės tai yra Dano Abramovo straipsnyje pateiktas pavyzdys:

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

Galiausiai naudojame šį komponentą:

react-app/src/App.js

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

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

Tačiau spustelėjus mygtuką Render Error rodoma atsarginė vartotojo sąsaja ir „Sentry“ pranešama apie klaidą.

Užbaigimas

Tikiuosi, kad tai buvo naudinga.

PS Nuoroda į originalą

PS Telegram pokalbis per Sentry https://t.me/sentry_ru

Šaltinis: www.habr.com

Nuotolinis „React“ sąsajos programų klaidų stebėjimas

Добавить комментарий Atšaukti atsakymą