ProHoster > Blog > Verwaltung > Sentry-Fernüberwachung von Fehlern in React-Frontend-Anwendungen
Sentry-Fernüberwachung von Fehlern in React-Frontend-Anwendungen
Wir untersuchen die Verwendung von Sentry mit React.
Dieser Artikel ist Teil einer Serie, die mit der Meldung von Sentry-Fehlern anhand eines Beispiels beginnt: Часть 1.
Implementierung von React
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.
Wir werden unsere beiden Schaltflächen „Hallo“ und „Fehler“ in einer Anwendung mit React erneut implementieren. Wir beginnen mit der Erstellung unserer Starteranwendung:
npx create-react-app react-app
Dann importieren wir das Sentry-Paket:
yarn add @sentry/browser
und initialisiere es:
reagieren-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,
});
}
...
Beobachtungen:
Während der Entwicklung verfügen wir über andere Mechanismen zur Überwachung von Problemen, z. B. die Konsole, daher aktivieren wir Sentry nur für Produktions-Builds
Als nächstes implementieren wir unsere Schaltflächen „Hallo“ und „Fehler“ und fügen sie der Anwendung hinzu:
reagieren-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);
}
}
}
Wir können Sentry mit einem Produktions-Build testen, indem wir Folgendes eingeben:
yarn build
und geben Sie im Build-Ordner Folgendes ein:
npx http-server -c-1
Das Problem, auf das wir sofort stoßen, besteht darin, dass sich die Fehleraufzeichnungen von Sentry auf Zeilennummern im minimierten Stapel beziehen. nicht sehr nützlich.
Der Sentry-Dienst erklärt dies, indem er nach Erhalt eines Fehlers die Quellkarten für das reduzierte Paket abruft. In diesem Fall laufen wir von localhost (für den Sentry-Dienst nicht zugänglich).
Lösungen (Quellkarten)
Die Lösung für dieses Problem besteht darin, die Anwendung von einem öffentlichen Webserver auszuführen. Eine einfache Antwortschaltfläche zur Nutzung des GitHub Pages-Dienstes (kostenlos). Die zu verwendenden Schritte sind normalerweise wie folgt:
Kopieren Sie den Inhalt des Ordners bauen zum Ordner docs im Stammverzeichnis des Repositorys.
Einschalten GitHub-Seiten im Repository (von GitHub), um den Ordner „docs“ zu verwenden Master Geäst
Pushen Sie Änderungen an GitHub
Beachten: Nachdem ich herausgefunden habe, was ich verwenden muss App erstellen-erstellen Startseitenfunktion zum Starten der Anwendung. Es kam darauf an, Folgendes zu package.json hinzuzufügen:
Lassen Sie uns durch das Klicken auf die Schaltfläche „Hallo“ gehen.
Mit einem Fehler, der so aussieht:
Beobachtungen:
Dieser Fehlerbericht könnte nicht klarer sein, BRAVO.
Illustration von nicht berücksichtigten Fehlern
Lassen Sie uns ebenfalls den Button-Klick durchgehen Fehler.
Mit einem Fehler, der so aussieht:
Besserer Umgang mit unberücksichtigten Fehlern (Rendering)
Einführung von Fehlergrenzen
Ein JavaScript-Fehler in einem Teil der Benutzeroberfläche sollte nicht die gesamte Anwendung beschädigen. Um dieses Problem für React-Benutzer zu lösen, führt React 16 ein neues Konzept namens „Fehlergrenzen“ ein.
Fehlergrenzen sind React-Komponenten, die JavaScript-Fehler an einer beliebigen Stelle in ihrem untergeordneten Komponentenbaum abfangen, diese Fehler protokollieren und anstelle des abgestürzten Komponentenbaums eine Fallback-Benutzeroberfläche rendern. Fehlergrenzen fangen Fehler beim Rendern, in Lebenszyklusmethoden und in den Konstruktoren des gesamten darunter liegenden Baums auf.
...
Neues Verhalten für unerkannte Fehler
Diese Änderung ist bedeutsam. Ab React 16 führen Fehler, die von keiner Fehlergrenze abgefangen wurden, dazu, dass der gesamte React-Komponentenbaum ausgehängt wird.
Eine wichtige Klarstellung, bei der es eine Weile gedauert hat, bis mir klar wurde, dass dies der Fall ist Das obige Verhalten funktioniert nur bei Fehlern, die in der Render-Methode (oder wahrscheinlicher in einer der Lebenszyklusmethoden) ausgelöst werden.. Beispielsweise würde die Verwendung von Fehlergrenzen bei unserem Button keinen Nutzen bringen Fehler; Dieser Fehler lag im Click-Handler.
Lassen Sie uns einen Beispiel-Rendering-Fehler erstellen und dann Fehlergrenzen verwenden, um den Fehler eleganter zu behandeln.
Wenn Sie die Taste drücken, Reagieren wird Angezeigt werden flag.busted.bogus, was einen Fehler erzeugt
Ohne eine Fehlergrenze wird die Bereitstellung des gesamten Komponentenbaums aufgehoben
Dann schreiben wir unseren Fehlergrenzcode (verwendet die neue Lebenszyklusmethode). KomponenteDidCatch); Dies ist im Wesentlichen das Beispiel in Dan Abramovs Artikel:
reagieren-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;
}
}