🥇Sentry kaugmonitorimine vigu Reacti esifronti rakendustes

Uurime Sentry kasutamist Reactiga.

See artikkel on osa seeriast, mis algab Sentry veateatest näite kaudu: Osa 1.

Reacti rakendamine

Esmalt peame looma uue Sentry projekti selle rakenduse jaoks Sentry veebisaidilt. Sel juhul valime Reacti.

Taaskäivitame meie kaks nuppu, Hello ja Error, Reacti rakenduses. Alustame oma algse rakenduse loomisega:

npx create-react-app react-app

Seejärel impordime Sentry paketi:

yarn add @sentry/browser

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

Märkmed:

Arenduse käigus on meil probleeme jälgimiseks teisi mehhanisme, näiteks konsool, seega aktiveerime Sentry ainult tootmisversioonide jaoks.

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

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

  handleClick = () =&gt; {
    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 = () =&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 (Alguskaardid)

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 minifitseeritud paketi ridadele; see pole kuigi kasulik.

Sentry teenus selgitab seda, tõmmates minifitseeritud paketi algse kaardi pärast vea saamist. Sel juhul jookseme localhostilt (Sentry teenusele kättesaamatu).

Lahendused (Algse Kaardi)

Selle probleemi lahendamine seisneb rakenduse käivitamises avalikul veebiserveril. Üks lihtne nõuanne selle kohta on kasutada GitHub Pagesi teenust (tasuta). Sammud kasutamiseks on tavaliselt järgmised:

Kopeerige kausta sisu build kausta docs repositooriumi juurkausta.
Lülitage GitHub Pages repositoorias (GitHubist), et kasutada docs kausta master haru
Tõstke muudatused GitHubi

Märkus: pärast seda, kui sain aru, et pean kasutama create-create-app avaliku lehe funktsiooni, et käivitada rakendus. See hõlmas järgmist lisamist package.json faili:

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

Käivitatud rakenduse lõplik versioon on saadaval aadressil:

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

Püütud Vigade Illustratsioon

Lähme läbi nuppu Hello vajutades.

Viga ilmneb järgmiselt:

Märkmed:

See aruanne ei saa olla selgem BRAVO.

Unustatud vigade illustreerimine

Sarnasel moel, laseme nuppu vajutada Error.

Viga ilmneb järgmiselt:

Parim unustatud vigade käsitlemine (renderimine)

Vigade piiride tutvustus
JavaScripti viga kasutajaliidese osas ei tohiks kogu rakenduse tööd katkestada. Selle probleemiga tegelemiseks Reactis tutvustatakse React 16-s uut mõistet "vigade piirid".
Vigade piirid on Reacti komponendid, mis püüavad JavaScripti vigu kinni igas oma alussüsteemi komponentide puus, registreerivad need vead ja kuvavad varu kasutajaliidese asemel purunenud komponentide puu. Vigade piirid püüavad vigu kinni renderdamise, elu tsüklite meetodite ja kogu puu all olevate konstruktorite käigus.
…
Uus käitumine tuvastamata vigade jaoks
See muudatus on oluline. Alates React 16-st põhjustavad vead, mida ei püüdnud kinni ükski vigade piir, kogu Reacti komponentide puu eemaldamist.
— Dan Abramov — Vigade käsitlemine React 16-s

Oluline täpsustus, mille mõistmine võttis mul veidi aega, on see, et ülevalmainitud käitumine kehtib ainult renderdamise meetodis genereeritud vigade puhul (või, mis on tõenäolisem, mõnes eluiga meetodis). Näiteks ei tooks vigade piiride kasutamine meie nupu puhul mingit kasu Error; see viga oli klikihandleris.

Loo me renderdamise vea näide ja seejärel kasuta vigade piire elegantsema veakäsitluse jaoks.

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

Märkus:

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

Seejärel kirjutame oma vigade piiride koodi (kasutab uut eluiga meetodit componentDidCatch); see on põhimõtteliselt Dan Abramovi artiklis esitatud näide:

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

Sel juhul nupu Render Error vajutamine kuvab varupoliitika kasutajaliidese ja teatab veast Sentry.