🥇 Sentry etävalvonta bugien React-käyttöliittymäsovelluksissa

Tutkimme Sentryn käyttöä Reactin kanssa.

Tämä artikkeli on osa sarjaa, joka alkaa Sentry-virheiden ilmoittamisesta esimerkin avulla: Часть 1.

Reactin käyttöönotto

Ensin meidän on lisättävä uusi Sentry-projekti tälle sovellukselle; Sentry-verkkosivustolta. Tässä tapauksessa valitsemme React.

Toteutamme uudelleen kaksi painikettamme, Hello ja Error, Reactin sovelluksessa. Aloitamme luomalla aloitussovelluksemme:

npx create-react-app react-app

Tuomme sitten Sentry-paketin:

yarn add @sentry/browser

ja alusta se:

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

Huomautukset:

Kehityksen aikana meillä on muita valvontamekanismeja, kuten konsoli, joten otamme Sentryn käyttöön vain tuotantorakennuksissa

Seuraavaksi otamme käyttöön Hello- ja Error-painikkeemme ja lisäämme ne sovellukseen:

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;

Ongelma (lähdekartat)

Voimme testata Sentryä tuotantoversiolla kirjoittamalla:

yarn build

ja kirjoita build-kansiosta:

npx http-server -c-1

Ongelma, johon törmäämme välittömästi, on se, että Sentryn virhetietueet viittaavat pienennetyn erän rivinumeroihin; ei kovin hyödyllinen.

Sentry-palvelu selittää tämän vetämällä pienennetyn paketin lähdekartat virheen saatuaan. Tässä tapauksessa käytämme localhost-palvelua (ei Sentry-palvelun käytettävissä).

Ratkaisut (lähdekartat)

Ratkaisu tähän ongelmaan on suorittaa sovellus julkiselta verkkopalvelimelta. Yksi yksinkertainen vastauspainike GitHub Pages -palvelun käyttöön (ilmainen). Käytettävät vaiheet ovat yleensä seuraavat:

Kopioi kansion sisältö rakentaa kansioon docs arkiston juurihakemistossa.
Käynnistä GitHub-sivut arkistossa (GitHubista) käyttääksesi docs-kansiota mestari oksat
Työnnä muutokset GitHubiin

Huomata: sen jälkeen kun olen selvittänyt mitä minun pitää käyttää luo-luo-sovellus kotisivutoiminto sovelluksen käynnistämiseksi. Päädyttiin seuraavan lisäämiseen package.json-tiedostoon:

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

Käynnissä olevan sovelluksen lopullinen versio on saatavilla osoitteessa:

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

Kuva kiinni bugeista

Käydään läpi napsauttamalla Hello-painiketta.

Virhe ilmestyy näin:

Huomautukset:

Tämä virheraportti ei voisi olla selkeämpi, BRAVO.

Kuva huomaamattomista virheistä

Samoin käydään läpi painikkeen napsautus Virhe.

Virhe ilmestyy näin:

Käsittelemättömien virheiden parempi käsittely (renderöinti)

Virherajojen käyttöönotto

JavaScript-virhe osassa käyttöliittymää ei saa rikkoa koko sovellusta. Tämän React-käyttäjien ongelman ratkaisemiseksi React 16 esittelee uuden käsitteen nimeltä "virherajat".

Virherajat ovat React-komponentteja, jotka havaitsevat JavaScript-virheet missä tahansa alikomponenttipuussaan, kirjaavat nämä virheet ja luovat varakäyttöliittymän kaatuneen komponenttipuun sijaan. Virherajat havaitsevat virheet renderöinnin aikana, elinkaarimenetelmissä ja koko niiden alla olevan puun rakentajissa.

...

Uusi toimintatapa havaitsemattomille virheille

Tämä muutos on merkittävä. React 16:sta lähtien virheet, joita mikään virheraja ei havaitse, johtavat koko React-komponenttipuun irrottamiseen.

- Dan Abramov - Virheenkäsittely Reactissa 16

Tärkeä selvennys, joka kesti hetken ennen kuin tajusin tämän yllä oleva käyttäytyminen toimii vain renderöintimenetelmässä (tai todennäköisemmin missä tahansa elinkaarimenetelmässä) esiintyvien virheiden kanssa.. Esimerkiksi virherajojen käyttäminen ei tekisi mitään hyvää painikkeellemme Virhe; tämä virhe oli napsautusten käsittelyssä.

Luodaan esimerkki renderöintivirheestä ja käytä sitten virherajoja käsitelläksesi virhettä sulavammin.

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

havainnointi:

Kun painat painiketta, suhtautua tulee näkyviin lippu.rikottu.väärin, joka aiheuttaa virheen
Ilman virherajaa koko komponenttipuu irrotetaan

Sitten kirjoitamme virherajakoodimme (käyttää uutta elinkaarimenetelmää komponenttiDidCatch); tämä on pohjimmiltaan Dan Abramovin artikkelissa annettu esimerkki:

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

Lopuksi käytämme tätä komponenttia:

react-app/src/App.js

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

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

Render Error -painikkeen napsauttaminen näyttää kuitenkin varakäyttöliittymän ja ilmoittaa virheestä Sentrylle.

Valmistuminen

Toivottavasti tästä oli apua.

PS. Linkki alkuperäiseen

PS Telegram chat Sentryn kautta https://t.me/sentry_ru

Lähde: will.com

Sentry etävalvonta bugien React-käyttöliittymäsovelluksissa

Lisää kommentti Peruuta vastaus