🥇Sentry kaugmonitorimine vigadest Reacti frontendi rakendustes

Uurime Sentry kasutamist Reactiga.

See artikkel on osa sarjast, mis algab Sentry veateatest näidisena: Osa 1.

Reacti rakendamine

Esmalt peame lisama uue Sentry projekti selle rakenduse jaoks; Sentry saidilt. Me valime Reacti.

Rakendame uuesti meie kaks nuppu, Hello ja Error, Reactis. Alustame meie käivitusrakenduse loomisega:

npx create-react-app react-app

Siis impordime Sentry paketi:

yarn add @sentry/browser

ja initsialiseerime selle:

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

Seire:

Arendamise ajal on meil teisi mehhanisme probleemide jälgimiseks, näiteks konsool, seega aktiveerime Sentry vaid tootmisversioonide jaoks.

Seejärel rakendame meie nupud Hello ja Error ning lisame need rakendusse:

react-app / src / Hello.js

import React, { Komponent } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Komponent {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Tere
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Tere maailm',
    });
    try {
      throw new Error('Püütud');
    } 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 = () =&gt; {
    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;

Probleem (Allikakaardid)

Saame testida Sentry tootmisversiooniga, sisestades:

yarn build

ja kaustast build sisestage:

npx http-server -c-1

Probleem, millega me kohe silmitsi seisame, on see, et Sentry veateated viitavad ridade arvule vähendatud paketis; see ei ole väga kasulik.

Sentry teenus selgitab seda, tõmmates vähendatud paketi allikakaardid pärast vea saamist. Sel juhul jookseme localhost'ist (mis ei ole Sentry teenuse kätte saadav).

Lahendused (Allikakaardid)

Selle probleemi lahendamine seisneb rakenduse käitamisel avalikust veebiserverist. Üks lihtne vastus sellele on kasutada GitHub Pages teenust (tasuta). Tüüpilised sammud selle kasutamiseks on järgmised:

Kopeerige kausta sisu build kausta docs hoidla juurkausta.
Aktiveerige GitHub Pages hoidlas (GitHubist), et kasutada docs kausta master filiaal
Tooge muudatused GitHubi

Märkus: pärast seda, kui aru sain, et pean kasutama create-create-app kodu funktsiooni rakenduse käitamiseks. See tähendas, et pidin package.json-sse juurde lisama järgmise:

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

Lõplik versioon töötavast rakendusest on kättesaadav aadressil:

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

Illustratsioon Püütud Vigadest

Hakkame läbi käima nuppu Hello vajutades.

Viga ilmub järgmiselt:

Seire:

See veateade ei saa olla selgem. BRAVO.

Illustratsioon Tuvastamata Vigadest

Samamoodi, hakkame läbi käima nuppu vajutades. Error.

Viga ilmub järgmiselt:

Parim mittetäielike vigade töötlemine (renderimine)

Vigade Piiride Tutvustus
JavaScripti viga kasutajaliidese osas ei tohi rikku kogu rakenduse tööd. Selle probleemi lahendamiseks Reacti kasutajatele tutvustab React 16 uut mõistet "vigade piirded".
Vigade piirded on Reacti komponendid, mis püüavad kinni JavaScripti vigu oma komponentide lastes, registreerivad need vead ja kuvavad varu kasutajaliidese selle puu asemel, mis purunes. Vigade piirded püüavad vigu kinni renderdamise ajal, elutsükli meetodites ja konstruktorites, mis asuvad nende all.
…
Uus käitumine tuvastamata vigade jaoks
See muudatus on oluline. Alates React 16-st viivad vead, mida ei ole kinni püüdnud ükski vigade piir, kogu Reacti komponente puudutava puu mahavõtmiseni.
— Dan Abramov — Vigade Käsitlemine React 16-s

Oluline täpsustus, mille mõistmiseks kulus mul aega, on see, et eelpoolmainitud käitumine kehtib ainult vigade kohta, mis on genereeritud renderdamise meetodis (või, mis on tõenäolisem, mõnes elutsükli meetodis). Näiteks ei tooks vigade piiride kasutamine mingit kasu meie nupu Error; see viga oli klõpsamisprotsessoris.

Loome visualiseerimise veao näite ja seejärel kasutame vigade piire, et vea töötlemine oleks elegantsem.

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 &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Tähelepanek:

Nupu vajutamisel, React kuvatakse flag.busted.bogus, mis tekitab vea
Ilma vigade piirdeta eemaldatakse kogu komponentide puu

Seejärel kirjutame oma vigade piiri koodi (kasutab uut elutsükli meetodit componentDidCatch); see on põhimõtteliselt näide Dan Abramovi artiklist:

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>Midagi läks valesti.</h1>;
    }
    return this.props.children;
  }
}

Lõpuks kasutame seda komponenti:

react-app / src / App.js

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

Sellega, kui vajutate nuppu Render Error, kuvatakse varu kasutajaliides ja teavitatakse veast Sentry.