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

Vi undersøger brugen af Sentry med React.

Denne artikel er en del af en serie, der starter med fejlrapportering i Sentry som eksempel: Del 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 implementerer igen vores to knapper, Hello og Error, i applikationen med React. Vi starter med at bygge vores startapplikation:

npx create-react-app react-app

Derefter importerer vi Sentry-pakken:

yarn add @sentry/browser

og initialiserer 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://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Observationer:

Under udvikling har vi andre mekanismer til at overvåge problemer, såsom konsollen, så vi aktiverer kun Sentry for produktionsbygger.

Derefter implementerer vi vores knapper Hello og Error 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}"
        >
          Hej
        </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}"
        >
          Fejl
        </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;

Problematik (Kildekort)

Vi kan teste Sentry med en produktionsbygning ved at indtaste:

yarn build

og fra build-mappen indtaste:

npx http-server -c-1

Problemet, vi straks vil støde på, er, at Sentry-fejlrapporter henviser til linjenumre i den minimerede pakke; ikke så nyttigt.

Sentry-tjenesten forklarer dette ved at trække kildekortene for den minimerede pakke efter modtagelse af en fejl. I dette tilfælde kører vi fra localhost (utilgængelig for Sentry).

Løsninger (Kildekort)

At løse dette problem kræver, at applikationen kører fra en offentlig webserver. En simpel reaktion på dette er at bruge GitHub Pages-tjenesten (gratis). Trinene for at bruge det er normalt som følger:

Kopier indholdet af mappen build til mappen docs i roden af repository.
Aktiver GitHub Pages i repository (fra GitHub) for at bruge docs-mappen i master grenen.
Overfør ændringer til GitHub

Bemærk: efter at jeg indså, at jeg skulle bruge create-create-app homepage-funktionen til at køre applikationen. Det handlede om 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 Fejl

Lad os gennemgå et klik på knappen Hello.

Med en fejl, der fremstår som følger:

Observationer:

Denne fejlrapport kan ikke være klarere, BRAVO.

Illustration af Uovervejede Fejl

Tilsvarende, lad os gennemgå et klik på knappen. Fejl.

Med en fejl, der fremstår som følger:

Bedste håndtering af uventede fejl (rendering)

Introduktion til fejlgrænser
En JavaScript-fejl i brugergrænsefladen bør ikke forstyrre hele applikationen. For at løse dette problem for React-brugere introducerer React 16 et nyt begreb "fejlgrænser".
Fejlgrænser er React-komponenter, der fanger JavaScript-fejl, uanset hvor i deres barnetræ de opstår, registrerer disse fejl og viser en reserve-brugergrænseflade i stedet for det komponenttræ, der er brudt. Fejlgrænser fanger fejl under rendering, i livscyklusmetoder og i konstruktører af hele træet under dem.
…
Ny adfærd for uopdagede fejl
Denne ændring er vigtig. Fra og med React 16 vil fejl, der ikke er fanget af nogen fejlgrænse, resultere i, at hele React-komponenttræet afmonteres.
— Dan Abramov — Fejlmeddelelser i React 16

En vigtig præcisering, som tog mig noget tid at forstå, er, at den ovenfor nævnte adfærd kun gælder for fejl, der genereres i renderingsmetoden (eller, hvad der er mere sandsynligt, i en hvilken som helst af livscyklusmetoderne). For eksempel ville brugen af fejlgrænser ikke være nyttig med vores knap Fejl; denne fejl opstod i klikhandleren.

Lad os oprette et eksempel på en visualiseringsfejl og derefter bruge fejlgrænser til en mere elegant fejlhåndtering.

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 Fejl
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      flag: true,
    });
  }
}

Observation:

Ved klik på knappen, React vise flag.busted.bogus, som forårsager en fejl
Uden fejlgrænse vil hele komponenttræet blive afmonteret

Derefter skriver vi vores fejlgrænsekode (bruger den nye livscyklusmetode componentDidCatch); dette er i det væsentlige et eksempel fra 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>Noget gik galt.</h1>;
    }
    return this.props.children;
  }
}

Endelig bruger vi denne komponent:

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

Når knappen Render Error trykkes, viser den reserve-brugergrænsefladen og rapporterer fejlen til Sentry.