🥇Sentry ekstern overvåking av feil i React frontend-applikasjoner

Vi utforsker bruken av Sentry med React.

Denne artikkelen er en del av en serie som starter med å rapportere Sentry-feil ved å bruke et eksempel: Часть 1.

Implementering av React

Først må vi legge til et nytt Sentry-prosjekt for denne applikasjonen; fra Sentry-nettstedet. I dette tilfellet velger vi React.

Vi re-implementerer våre to knapper, Hello og Error, i en applikasjon med React. Vi starter med å lage vår startapplikasjon:

npx create-react-app react-app

Deretter importerer vi Sentry-pakken:

yarn add @sentry/browser

og initialiser den:

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

Observasjoner:

Under utviklingen har vi andre mekanismer for å overvåke problemer, for eksempel konsollen, så vi aktiverer kun Sentry for produksjonsbygg

Deretter implementerer vi våre Hello- og Error-knapper og legger dem til i applikasjonen:

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;

Problem (kildekart)

Vi kan teste Sentry med en produksjonsbygging ved å skrive inn:

yarn build

og fra build-mappen skriv inn:

npx http-server -c-1

Problemet vi umiddelbart støter på er at Sentrys feilposter refererer til linjenumre i den minifiserte batchen; ikke særlig nyttig.

Sentry-tjenesten forklarer dette ved å trekke kildekartene for den reduserte pakken etter å ha mottatt en feil. I dette tilfellet kjører vi fra localhost (ikke tilgjengelig for Sentry-tjenesten).

Løsninger (kildekart)

Løsningen på dette problemet er å kjøre applikasjonen fra en offentlig webserver. En enkel svarknapp for å bruke GitHub Pages-tjenesten (gratis). Trinnene som skal brukes er vanligvis som følger:

Kopier innholdet i mappen bygge til mappe docs i rotkatalogen til depotet.
Slå på GitHub-sider i depotet (fra GitHub) for å bruke docs-mappen i Master grener
Push endringer til GitHub

Note: etter at jeg fant ut hva jeg trenger å bruke lag-lag-app startsidefunksjon for å starte applikasjonen. Kom ned på å legge til følgende til package.json:

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

Den endelige versjonen av den kjørende applikasjonen er tilgjengelig på:

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

Illustrasjon av fanget insekter

La oss gå gjennom å klikke på Hei-knappen.

Med en feil som vises slik:

Observasjoner:

Denne feilrapporten kunne ikke vært klarere, BRAVO.

Illustrasjon av Unaccounted for Errors

På samme måte, la oss gå gjennom knappen klikk Feil.

Med en feil som vises slik:

Bedre håndtering av urapporterte feil (gjengivelse)

Innføring av feilgrenser

En JavaScript-feil i deler av brukergrensesnittet skal ikke ødelegge hele applikasjonen. For å løse dette problemet for React-brukere introduserer React 16 et nytt konsept kalt "error bounds".

Feilgrenser er React-komponenter som fanger opp JavaScript-feil hvor som helst i det underordnede komponenttreet, logger disse feilene og gjengir et reservegrensesnitt i stedet for komponenttreet som krasjet. Feilgrenser fanger opp feil under gjengivelse, i livssyklusmetoder og i konstruktørene til hele treet under dem.

...

Ny oppførsel for uoppdagede feil

Denne endringen er betydelig. Fra og med React 16 vil feil som ikke ble fanget opp av noen feilgrense føre til at hele React-komponenttreet demonteres.

- Dan Abramov - Feilhåndtering i React 16

En viktig avklaring som tok meg en stund før jeg skjønte dette er det atferden ovenfor fungerer bare med feil som er kastet i gjengivelsesmetoden (eller mer sannsynlig i noen av livssyklusmetodene). For eksempel vil ikke bruk av feilgrenser gjøre noe godt med knappen vår Feil; denne feilen var i klikkbehandleren.

La oss lage et eksempel på gjengivelsesfeil og deretter bruke feilgrenser for å håndtere feilen mer elegant.

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

observasjon:

Når du trykker på knappen, Reager vil vises flagg.busted.falsk, som genererer en feil
Uten en feilgrense vil hele komponenttreet demonteres

Deretter skriver vi feilgrensekoden vår (bruker den nye livssyklusmetoden componentDidCatch); dette er i hovedsak eksemplet gitt i Dan Abramovs artikkel:

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

Til slutt bruker vi denne komponenten:

react-app/src/App.js

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

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

Hvis du klikker på Gjengi feil-knappen, vises reservegrensesnittet og rapporterer en feil til Sentry.

Ferdigstillelse

Jeg håper du fant dette nyttig.

PS Link til original

PS Telegram chat via Sentry https://t.me/sentry_ru

Kilde: www.habr.com

Sentry-fjernovervåking av feil i React-frontend-applikasjoner

Legg til en kommentar Avbryt svar