🥇Sentry Fernüberwachung von Bugs in Frontend-Anwendungen von React

Wir lernen die Verwendung von Sentry mit React.

Dieser Artikel ist Teil einer Reihe, die mit der Fehlermeldung von Sentry anhand des Beispiels beginnt: Teil 1.

React-Implementierung

Zuerst müssen wir ein neues Sentry-Projekt für diese Anwendung hinzufügen; von der Sentry-Website. In diesem Fall wählen wir React aus.

Wir implementieren erneut unsere beiden Tasten, Hello und Error, in der React-Anwendung. Wir beginnen mit der Erstellung unserer Startanwendung:

npx create-react-app react-app

Dann importieren wir das Sentry-Paket:

yarn add @sentry/browser

und initialisieren es:

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

Beobachtungen:

Während der Entwicklung haben wir andere Mechanismen zur Überwachung von Problemen, wie die Konsole, daher aktivieren wir Sentry nur für Produktionsbuilds.

Dann implementieren wir unsere Tasten Hello und Error und fügen sie in die Anwendung ein:

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}"
        >
          Hallo
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Hallo Welt',
    });
    try {
      throw new Error('Gefangen');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app / src / MyError.js

import React, { Component } von 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Fehler
        </button>
      </div>
    )
  }

  handleClick = () =&gt; {
    throw new Error('Uncaught');
  }
}

react-app / src / App.js

(übersetzter Text auf Deutsch)
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );
  }
}

export default App;

Problem (Quellkarten)

Wir können Sentry mit einem Produktionsbuild testen, indem wir eingeben:

yarn build

und aus dem build-Ordner eingeben:

npx http-server -c-1

Das Problem, dem wir sofort begegnen werden, ist, dass die Sentry-Fehlerprotokolle auf Zeilennummern im minimierten Paket verweisen, was nicht sehr hilfreich ist.

Der Sentry-Dienst erklärt dies, indem er die Quellkarten für das minimierte Paket abruft, nachdem ein Fehler aufgetreten ist. In diesem Fall laufen wir von localhost (nicht für den Sentry-Dienst erreichbar).

Lösungen (Quellkarten)

Die Lösung für dieses Problem besteht darin, die Anwendung von einem öffentlichen Webserver auszuführen. Eine einfache Möglichkeit, dies zu tun, ist die Nutzung des GitHub Pages-Dienstes (kostenlos). Die Schritte zur Nutzung sind normalerweise folgende:

Kopieren Sie den Inhalt des Ordners build in den Ordner docs in das Stammverzeichnis des Repositories.
Aktivieren Sie GitHub Pages im Repository (aus GitHub), um den Ordner docs in master Branch
übertragen Sie die Änderungen auf GitHub

Hinweis: Nachdem ich erkannt habe, dass ich die create-create-app Homepage-Funktion benötige, um die Anwendung auszuführen. Es beschränkte sich darauf, Folgendes zu package.json hinzuzufügen:

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

Die endgültige Version der ausgeführten Anwendung ist unter folgender Adresse verfügbar:

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

Abbildung der gefangenen Fehler

Lassen Sie uns den Druck der Taste Hello durchgehen.

Mit einem Fehler, der wie folgt erscheint:

Beobachtungen:

Dieser Fehlerbericht könnte nicht klarer sein, BRAVO.

Illustration der nicht erfassten Fehler

In ähnlicher Weise lassen Sie uns den Druck der Taste durchgehen. Fehler.

Mit einem Fehler, der wie folgt erscheint:

Die beste Behandlung unentdeckter Fehler (Rendering)

Einführung der Fehlergrenzen
Ein JavaScript-Fehler im Bereich der Benutzeroberfläche sollte nicht die Funktionalität der gesamten Anwendung beeinträchtigen. Um dieses Problem für React-Benutzer zu lösen, führt React 16 ein neues Konzept der "Fehlergrenzen" ein.
Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler überall in ihrem darunter liegenden Komponentenbaum erfassen, diese Fehler protokollieren und eine Ersatzbenutzeroberfläche anstelle des defekten Komponentenbaums anzeigen. Fehlergrenzen fangen Fehler während des Renderns, in den Lebenszyklusmethoden und in den Konstruktoren des gesamten darunter liegenden Baums ab.
…
Neues Verhalten für unentdeckte Fehler
Diese Änderung ist bedeutend. Ab React 16 führen Fehler, die von keiner Fehlergrenze gefangen wurden, dazu, dass der gesamte Komponentenbaum von React demontiert wird.
— Dan Abramov — Fehlerbehandlung in React 16

Eine wichtige Klarstellung, die ich eine Weile brauchte, um zu verstehen, ist, dass das oben genannte Verhalten nur bei Fehlern funktioniert, die im Renderverfahren (oder wahrscheinlicher in einer der Lebenszyklusmethoden) erzeugt werden. Beispielsweise würde die Verwendung von Fehlergrenzen bei unserem Knopf keinen Nutzen bringen Fehler; dieser Fehler lag im Klick-Handler.

Lass uns ein Beispiel für einen Rendering-Fehler erstellen und dann Fehlergrenzen für ein eleganteres Fehlerhandling verwenden.

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

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

Beobachtung:

Wenn der Knopf gedrückt wird, React wird angezeigt flag.busted.bogus, was einen Fehler auslöst
Ohne Fehlergrenze wird der gesamte Komponentenbaum demontiert

Dann schreiben wir unseren Fehlergrenzen-Code (verwendet die neue Lebenszyklusmethode componentDidCatch); dies ist im Wesentlichen ein Beispiel, das in Dans Artikel gegeben wird:

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>Etwas ist schiefgelaufen.</h1>;
    }
    return this.props.children;
  }
}

Schließlich verwenden wir diese Komponente:

react-app / src / App.js

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

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

Dabei zeigt das Drücken des Buttons Render Error die Ersatzbenutzeroberfläche an und meldet den Fehler an Sentry.