🥇Sentry kaugseire Vigade Reacti esirakendustes

Uurime Sentry kasutamist koos Reactiga.

See artikkel on osa sarjast, mis algab Sentry vigadest teatamisega, kasutades näidet: Часть 1.

Reacti rakendamine

Kõigepealt peame selle rakenduse jaoks lisama uue Sentry projekti; Sentry veebisaidilt. Sel juhul valime React.

Rakendame oma kaks nuppu Tere ja Error uuesti rakenduses Reactiga. Alustame oma stardirakenduse loomisega:

npx create-react-app react-app

Seejärel impordime Sentry paketi:

yarn add @sentry/browser

ja initsialiseerige see:

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

Tähelepanekud:

Arenduse ajal on meil probleemide jälgimiseks muid mehhanisme, näiteks konsool, seega lubame Sentry ainult tootmisversioonide jaoks

Järgmisena rakendame oma Hello ja Error nupud 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}
        >
          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;

Probleem (allikakaardid)

Saame Sentryt testida tootmisjärguga, sisestades:

yarn build

ja sisestage ehituskausta:

npx http-server -c-1

Probleem, millega me kohe kokku puutume, on see, et Sentry veakirjed viitavad reanumbritele minimeeritud partiis; mitte eriti kasulik.

Sentry teenus selgitab seda sellega, et tõmbab pärast vea saamist vähendatud paketi lähtekaardid. Sel juhul töötame kohalikust hostist (pole Sentry teenusega juurdepääsetav).

Lahendused (allikakaardid)

Selle probleemi lahendus on käivitada rakendus avalikust veebiserverist. Üks lihtne vastamisnupp teenuse GitHub Pages kasutamiseks (tasuta). Kasutatavad sammud on tavaliselt järgmised:

Kopeerige kausta sisu ehitama kausta docs hoidla juurkataloogis.
Lülitage sisse GitHubi lehed hoidlas (GitHubist), et kasutada dokumentide kausta meister oksad
Lükake muudatused GitHubi

Märkus: pärast seda, kui sain aru, mida ma kasutama pean loo-loo-rakendus avalehe funktsioon rakenduse käivitamiseks. Jõudis faili package.json lisamiseni:

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

Töötava rakenduse lõplik versioon on saadaval aadressil:

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

Illustratsioon tabatud vigadest

Vaatame läbi, klõpsates nuppu Tere.

Sellise veaga:

Tähelepanekud:

See veaaruanne ei saaks olla selgem, BRAVO.

Joonis nägemata vigadest

Samamoodi läbime nupuklõpsu viga.

Sellise veaga:

Arvestamata vigade parem käsitlemine (renderdamine)

Veapiirangute kasutuselevõtt

JavaScripti viga kasutajaliidese osas ei tohiks kogu rakendust rikkuda. Selle probleemi lahendamiseks Reacti kasutajate jaoks tutvustab React 16 uut kontseptsiooni, mida nimetatakse "veapiirideks".

Veapiirid on Reacti komponendid, mis tabavad JavaScripti vead kõikjal oma alamkomponentide puus, logivad need vead ja renderdavad kokkujooksnud komponendipuu asemel varu kasutajaliidese. Veapiirid tabavad vead renderdamisel, elutsükli meetodites ja kogu nende all oleva puu konstruktorites.

...

Uus käitumine avastamata vigade puhul

See muutus on märkimisväärne. React 16 seisuga põhjustavad vead, mida ükski veapiir ei tabanud, kogu Reacti komponendipuu lahtiühendamise.

- Dan Abramov - Vigade käsitlemine Reactis 16

See on oluline selgitus, mis võttis mul veidi aega, enne kui sellest aru sain ülaltoodud käitumine töötab ainult renderdusmeetodis (või tõenäolisemalt mõnes elutsüklimeetodis) esinevate vigade korral.. Näiteks veapiiride kasutamine ei teeks meie nupule midagi head viga; see viga oli klikitöötlejas.

Loome renderdusvea näite ja seejärel kasutame veapiire, et viga graatsilisemalt käsitleda.

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

Tähelepanek:

Kui vajutate nuppu, Reageerima kuvatakse lipp.lõhkunud.võlts, mis tekitab vea
Ilma veapiirita eemaldatakse kogu komponendipuu

Seejärel kirjutame oma veapiiri koodi (kasutab uut elutsükli meetodit komponentDidCatch); see on sisuliselt Dan Abramovi artiklis toodud 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>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Lõpuks kasutame seda komponenti:

react-app/src/App.js

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

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

Nupul Renderdusviga klõpsamine kuvab aga varu kasutajaliidese ja teavitab Sentryt veast.

Lõpuleviimine

Loodan, et leidsite sellest abi.

PS Link originaalile

PS Telegrami vestlus Sentry kaudu https://t.me/sentry_ru

Allikas: www.habr.com

Reacti kasutajaliidese rakenduste vigade kaugjälgimine

Lisa kommentaar Tühista vastus