🥇Fehlerverfolgung in einer React-Anwendung mit Sentry

Heute werde ich Ihnen erzählen, wie man Fehler in Echtzeit in einer React-Anwendung verfolgt. Eine Benutzerschnittstellenanwendung wird normalerweise nicht zur Fehlerverfolgung verwendet. Einige Unternehmen verschieben oft die Fehlerverfolgung und kümmern sich später darum, nachdem die Dokumentation, Tests und mehr erledigt sind. Aber wenn Sie Ihr Produkt zum Besseren verändern können, dann tun Sie es einfach!

1. Warum benötigen Sie Sentry?

Ich nehme an, Sie sind daran interessiert, Fehler im Produktionsprozess zu verfolgen.

Glauben Sie, das reicht nicht aus?

Gut, lassen Sie uns die Einzelheiten betrachten.

Hauptgründe für die Verwendung von Sentry für Entwickler:

Reduziert Risiken beim Bereitstellen von fehlerhaftem Code.
Unterstützung für das QA-Team beim Testen des Codes.
Erhalten von schnellen Benachrichtigungen über Probleme.
Möglichkeit zur schnellen Behebung von Fehlern.
Erhalten einer benutzerfreundlichen Darstellung von Fehlern im Admin-Panel.
Fehler nach Nutzer- / Browsersegmenten sortieren.

Hauptgründe für CEOs / Projektleiter.

Kostenersparnis (Sentry kann auf Ihren Servern installiert werden).
Erhalten von Benutzerfeedback.
Verstehen, was in Ihrem Projekt in Echtzeit schiefgeht.
Verstehen, wie viele Probleme die Leute mit Ihrer Anwendung haben.
Hilfe bei der Suche nach Stellen, an denen Ihre Entwickler Fehler gemacht haben.

Ich denke, dass die Entwickler in erster Linie an diesem Artikel interessiert wären. Sie können diese Liste von Gründen auch verwenden, um das Management zu überzeugen, Sentry zu integrieren.

Seien Sie vorsichtig mit dem letzten Punkt in der Liste für Unternehmen.

Sind Sie schon interessiert?

Was ist Sentry?

Sentry ist eine Open-Source-Anwendung zur Fehlerverfolgung, die Entwicklern hilft, Abstürze in Echtzeit zu verfolgen und zu beheben. Vergessen Sie nicht, dass die Anwendung auch die Effizienz steigert und die Benutzerfreundlichkeit verbessert. Sentry unterstützt JavaScript, Node, Python, PHP, Ruby, Java und andere Programmiersprachen.

2. Melden Sie sich an und erstellen Sie ein Projekt.

Öffnen Sie Ihr Sentry-Konto. Möglicherweise müssen Sie sich anmelden. (Ich möchte darauf hinweisen, dass Sentry auf Ihren Servern installiert werden kann.)
Der nächste Schritt ist, ein Projekt zu erstellen.
Wählen Sie Ihre Sprache aus der Liste aus. (Wir werden React auswählen. Klicken Sie auf 'Projekt erstellen')

Richten Sie Ihre Anwendung ein. Ein grundlegendes Beispiel, wie Sentry in einen Container integriert wird, sehen Sie unten:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// sollte vor der Verwendung hier aufgerufen werden
// idealerweise sogar bevor Ihre React-App gerendert wird

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope =&gt; {
        Object.keys(errorInfo).forEach(key =&gt; {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            // fallback UI rendern
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Feedback melden</a>
            );
        } else {
            // wenn kein Fehler vorliegt, Kinder unverändert rendern
            return this.props.children;
        }
    }
}

Sentry verfügt über einen hilfreichen Assistenten, der Ihnen hilft zu verstehen, was als Nächstes zu tun ist. Sie können die folgenden Schritte ausführen. Ich möchte Ihnen zeigen, wie Sie Ihren ersten Fehlerbehandler erstellen. Großartig, wir haben ein Projekt erstellt! Lassen Sie uns zum nächsten Schritt übergehen.

3. Integration von React und Sentry

Sie müssen das npm-Paket in Ihr Projekt installieren.

npm i @sentry/browser

Initialisieren Sie Sentry in Ihrem Container:

Sentry.init({
 // dsn: #dsnUrl,
});

Die DSN finden Sie in Projekte -> Einstellungen -> Client-Schlüssel. Sie können die Client-Schlüssel in der Suchzeile finden.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. Verfolgung des ersten Fehlers

Ich habe zum Beispiel eine einfache Musik-App mit der Deezer-API verwendet. Sie können dies sehen. hier. Wir müssen einen Fehler erzeugen. Eine Möglichkeit besteht darin, auf die Eigenschaft "undefined" zuzugreifen.

Wir müssen einen Button erstellen, der aufruft console.log c user.email. Nach dieser Aktion sollten wir eine Fehlermeldung erhalten: Uncaught TypeError (konnte Eigenschaft von undefined nicht lesen email) wegen des Fehlens eines Benutzerobjekts. Sie können auch das JavaScript-Ausnahme.

Der gesamte Container sieht so aus:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "..\/store\/actions\/getList";

const Search = Input.Search;

const mapState = state =&gt; ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https:\/\/fc0edcf6927a4397855797a033f04085@sentry.io\/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div classname="App">
        <button
          type="button"
          onclick="{()" > console.log(user.email)}
        &gt;
          Testfehler1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Feedback melden1</div>
        <h1>Musikfinder</h1>
        <br />
        <search onsearch="{value" > getList(value)} Enter-Taste \/&gt;
        {loading &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!loading &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  Titel={item.title}
                  Beschreibung={item.artist.name}
                \/&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Nach der Integration dieser Schaltfläche sollten Sie sie im Browser testen.

Wir haben den ersten Fehler.

Whoo-hoo!

Wenn Sie auf den Fehlerheader klicken, sehen Sie die Stack-Trace.

Die Meldungen sehen schlecht aus. Natürlich haben wir Fehlermeldungen gesehen, ohne zu verstehen, wo dieser Code ist. Standardmäßig handelt es sich um die Quellkarte in ReactJS, weil sie nicht konfiguriert ist.

Ich würde auch gerne Anweisungen zur Konfiguration der Quellkarte geben, aber das würde diesen Artikel viel länger machen, als ich geplant hatte.

Sie können dieses Thema erkunden. hier. Wenn Sie an diesem Artikel interessiert sind, Dmitry Nozhenko wird den zweiten Teil über die Integration der Quellkarte veröffentlichen. Also, drücken Sie mehr Gefällt mir und abonnieren Sie Dmitry Nozhenko, um den zweiten Teil nicht zu verpassen.

5. Verwendung Sentry mit Endpunkt API

Okay. Wir haben das JavaScript-Ausnahme in den vorherigen Punkten betrachtet. Was werden wir jedoch mit XHR-Fehlern tun?

Sentry hat auch eine benutzerdefinierte Fehlerverarbeitung. Ich habe es verwendet, um API-Fehler zu verfolgen.

Sentry.captureException(err)

Sie können den Fehlernamen, das Level, die Daten und benutzerdefinierte Daten über Ihre Anwendung, E-Mail usw. anpassen.

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Ich möchte eine allgemeine Funktion für den API-Catch verwenden.

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
  // Sentry.showReportDialog(); - Wenn Sie Feedback von Nutzern zu einem Fehler erhalten möchten
  return Sentry.captureException(error);
};

Importieren Sie diese Funktion im API-Aufruf.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

Lassen Sie uns die Methoden überprüfen:

setLevel ermöglicht das Einfügen eines Fehlerelements in das Sentry-Dashboard. Es hat die Eigenschaften – ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’.
setUser hilft, alle Benutzerdaten (ID, E-Mail-Adresse, Zahlplan usw.) zu speichern.
setExtra ermöglicht die Angabe beliebiger benötigter Daten, z. B. des Stores.

Wenn Sie Feedback von Nutzern zu einem Fehler erhalten möchten, sollten Sie die Funktion showReportDialog verwenden.