🥇Sentry entfernte Überwachung von Bugs in Frontend-Anwendungen mit React

Wir untersuchen die Verwendung von Sentry mit React.

Dieser Artikel ist Teil einer Reihe, die mit einem Sentry-Fehlerbericht beginnt: Teil 1.

Implementierung von React

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

Wir implementieren erneut unsere beiden Schaltflächen, Hello und Error, in die 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 Schaltflächen Hello und Error und fügen sie der Anwendung hinzu:

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 } from '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

...<br />import Hello from './Hello';<br />import MyError from './MyError';<br /><br />class App extends Component {<br />  render() {<br />    return (
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );<br />  }<br />}<br /><br />export default App;

Problem (Source Maps)

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, mit dem wir uns sofort befassen müssen, ist, dass die Sentry-Fehlermeldungen sich auf Zeilennummern im minimierten Paket beziehen; das ist nicht sehr hilfreich.

Der Sentry-Dienst erklärt dies, indem er die Quellkarten für das minimierte Paket nach dem Empfang eines Fehlers abruft. In diesem Fall laufen wir von localhost (nicht vom Sentry-Dienst zugänglich).

Lösungen (Quellkarten)

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

Kopieren Sie den Inhalt des Ordners build in den Ordner ausführt. Darüber hinaus können wir beim Hinzufügen von Daten aus dem Repository nur die notwendigen Verzeichnisse auswählen (in unserem Fall ist das das Verzeichnis in das Stammverzeichnis des Repositories.
Aktivieren Sie GitHub Pages im Repository (von GitHub), um den docs-Ordner in master der Branch
Übertragen Sie die Änderungen auf GitHub

Hinweis: nachdem ich verstanden hatte, dass ich die create-create-app Homepage-Funktion nutzen muss, um die Anwendung zu starten. Es bestand darin, Folgendes zu package.json hinzuzufügen:

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

Die endgültige Version der gestarteten Anwendung ist unter folgendem Link verfügbar:

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

Illustration der erfassten Fehler

Lassen Sie uns die Schaltfläche Hello drücken.

Mit dem folgenden Fehler, der angezeigt wird:

Beobachtungen:

Dieser Fehlerbericht könnte nicht klarer sein, BRAVO.

Illustration Unbeachteter Fehler

Lass uns ebenso durch den Knopfdruck gehen Fehler.

Mit dem folgenden Fehler, der angezeigt wird:

Beste Handhabung unbeachteter Fehler (Rendering)

Einführung in Fehlergrenzen
Ein JavaScript-Fehler im Benutzeroberflächenbereich sollte die Funktionalität der gesamten Anwendung nicht beeinträchtigen. Um dieses Problem für React-Nutzer zu lösen, führt React 16 das neue Konzept der "Fehlergrenzen" ein.
Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler an beliebiger Stelle in ihrem untergeordneten Komponentenbaum auffangen, diese Fehler protokollieren und eine Fallback-Benutzeroberfläche anstelle des beschädigten Komponentenbaums anzeigen. Fehlergrenzen fangen Fehler während des Renderings, in Lebenszyklusmethoden und in Konstruktoren des gesamten darunter liegenden Baums auf.
…
Neues Verhalten für unbeachtete Fehler
Diese Änderung ist bedeutend. Ab React 16 führen Fehler, die von keiner Fehlergrenze aufgefangen werden, zum Abbau des gesamten React-Komponentenbaums.
— Dan Abramov — Fehlerbehandlung in React 16

Eine wichtige Klarstellung, die mich etwas Zeit gekostet hat, um zu verstehen, ist, dass das oben genannte Verhalten nur mit Fehlern funktioniert, die im Renderverfahren (oder wahrscheinlicher, in einer der Lebenszyklusmethoden) erzeugt werden.. Zum Beispiel würde die Verwendung von Fehlergrenzen mit unserem Button keinen Nutzen bringen, Fehler; dieser Fehler befand sich im Click-Handler.

Lassen Sie uns ein Beispiel für einen Renderfehler erstellen und dann Fehlergrenzen für eine elegantere Fehlerbehandlung 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 die Taste gedrückt wird, React wird nun für diese Websites flag.busted.bogus, die einen Fehler erzeugt.
Ohne Fehlergrenzen wird der gesamte Komponentenbaum demontiert.

Dann schreiben wir unseren Fehlergrenzencode (verwendet die neue Lebenszyklusmethode componentDidCatch); das ist im Wesentlichen das Beispiel, das in Dans Abramovs Artikel angeführt 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 schief gelaufen.</h1>;
    }
    return this.props.children;
  }
}

Zuletzt 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 berichtet den Fehler an Sentry.