🥇Sentry fjernovervågning af fejl i React frontend-applikationer

Vi udforsker brugen af Sentry med React.

Denne artikel er en del af en serie, der starter med at rapportere Sentry-fejl ved hjælp af et eksempel: Часть 1.

Implementering af React

Først skal vi tilføje et nyt Sentry-projekt til denne applikation; fra Sentrys hjemmeside. I dette tilfælde vælger vi React.

Vi genimplementerer vores to knapper, Hej og Fejl, i en applikation med React. Vi starter med at oprette vores startapplikation:

npx create-react-app react-app

Så importerer vi Sentry-pakken:

yarn add @sentry/browser

og initialiser det:

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

Bemærkninger:

Under udviklingen har vi andre mekanismer til overvågning af problemer, såsom konsollen, så vi aktiverer kun Sentry til produktionsbygninger

Dernæst implementerer vi vores Hej og fejl-knapper og tilføjer dem til applikationen:

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 (Kildekort)

Vi kan teste Sentry med en produktionsbygning ved at indtaste:

yarn build

og fra build-mappen indtast:

npx http-server -c-1

Det problem, vi umiddelbart støder på, er, at Sentrys fejlregistreringer refererer til linjenumre i den minificerede batch; ikke særlig brugbar.

Sentry-tjenesten forklarer dette ved at trække kildekortene til den reducerede pakke efter at have modtaget en fejl. I dette tilfælde kører vi fra localhost (ikke tilgængelig for Sentry-tjenesten).

Løsninger (kildekort)

Løsningen på dette problem er at køre programmet fra en offentlig webserver. En simpel svarknap for at bruge GitHub Pages-tjenesten (gratis). De trin, der skal bruges, er normalt som følger:

Kopier indholdet af mappen bygge til en mappe docs i rodbiblioteket i depotet.
Tænde for GitHub-sider i repository (fra GitHub) for at bruge docs-mappen i Master grene
Skub ændringer til GitHub

Bemærk: efter at jeg fandt ud af hvad jeg skal bruge opret-opret-app startsidefunktion for at starte applikationen. Kom ned til at tilføje følgende til package.json:

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

Den endelige version af den kørende applikation er tilgængelig på:

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

Illustration af fangede bugs

Lad os gå igennem ved at klikke på Hej-knappen.

Med en fejl, der ser ud som denne:

Bemærkninger:

Denne fejlrapport kunne ikke være klarere, BRAVO.

Illustration af uforklarede fejl

Ligeledes, lad os gå gennem knappen klik Fejl.

Med en fejl, der ser ud som denne:

Bedre håndtering af urapporterede fejl (gengivelse)

Introduktion af fejlgrænser

En JavaScript-fejl i en del af brugergrænsefladen bør ikke ødelægge hele applikationen. For at løse dette problem for React-brugere introducerer React 16 et nyt koncept kaldet "error bounds".

Fejlgrænser er React-komponenter, der fanger JavaScript-fejl hvor som helst i deres underordnede komponenttræ, logger disse fejl og gengiver en reserve-brugergrænseflade i stedet for komponenttræet, der gik ned. Fejlgrænser fanger fejl under gengivelse, i livscyklusmetoder og i konstruktørerne af hele træet under dem.

...

Ny adfærd for uopdagede fejl

Denne ændring er væsentlig. Fra React 16 vil fejl, der ikke blev fanget af nogen fejlgrænse, resultere i, at hele React-komponenttræet afmonteres.

— Dan Abramov - Fejlhåndtering i React 16

En vigtig afklaring, der tog mig et stykke tid, før jeg indså dette, er det ovenstående adfærd virker kun med fejl, der er smidt i gengivelsesmetoden (eller mere sandsynligt i en af livscyklusmetoderne). For eksempel ville brug af fejlgrænser ikke gøre noget godt med vores knap Fejl; denne fejl var i klikhåndteringen.

Lad os oprette et eksempel på gengivelsesfejl og derefter bruge fejlgrænser til at håndtere fejlen mere 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,
    });
  }
}

Observation:

Når du trykker på knappen, Reagerer vil blive vist flag.busted.falsk, hvilket genererer en fejl
Uden en fejlgrænse vil hele komponenttræet blive afmonteret

Derefter skriver vi vores fejlgrænsekode (bruger den nye livscyklusmetode componentDidCatch); dette er i bund og grund eksemplet givet i Dan Abramovs artikel:

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 sidst bruger vi denne komponent:

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å knappen Render Error, vises reserve-brugergrænsefladen og rapporterer en fejl til Sentry.

Afslutning

Jeg håber, du fandt dette nyttigt.

PS Link til original

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

Kilde: www.habr.com

Sentry-fjernovervågning af fejl i React-frontend-applikationer

Tilføj en kommentar Annuller svar