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

reagieren-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');
  }
}

reagieren-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 (Quellkarten)

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:

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

Die endgültige Version der laufenden Anwendung ist verfügbar unter:

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

Illustration von gefangenen Käfern

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.

- Dan Abramov - Fehlerbehandlung in Reaktion 16

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.

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

Beobachtung:

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

Schließlich verwenden wir diese Komponente:

reagieren-app/src/App.js

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

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

Wenn Sie jedoch auf die Schaltfläche „Fehler rendern“ klicken, wird die Fallback-Benutzeroberfläche angezeigt und ein Fehler an Sentry gemeldet.

Abschluss

Ich hoffe, Sie fanden das hilfreich.

PS Link zum Original

PS-Telegram-Chat über Sentry https://t.me/sentry_ru

Source: habr.com

Sentry-Fernüberwachung von Fehlern in React-Frontend-Anwendungen

Kommentar hinzufügen Отменить ответ