🥇Fehlerverfolgung in einer React-Anwendung mit Sentry

Heute werde ich Ihnen zeigen, wie Sie Fehler in Echtzeit in Ihrer React-Anwendung verfolgen können. Eine Benutzeroberflächenanwendung wird normalerweise nicht für die Fehlersuche verwendet. Einige Unternehmen verschieben die Fehlerverfolgung häufig und kommen erst später zur Dokumentation, zu Tests und anderen Aspekten zurück. Wenn Sie jedoch in der Lage sind, Ihr Produkt zu verbessern, dann tun Sie es einfach!

1. Warum benötigen Sie Sentry?

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

Halten Sie das für nicht genug?

Gut, schauen wir uns die Details an.

Die Hauptgründe, Sentry für Entwickler zu verwenden:

Reduzierung der Risiken beim Bereitstellen fehlerhaften Codes.
Unterstützung des QA-Teams bei Code-Tests.
Erhalt schneller Benachrichtigungen über Probleme.
Möglichkeit zur schnellen Fehlerbehebung.
Erhalt einer benutzerfreundlichen Fehleransicht im Dashboard.
Fehler nach Benutzersegmenten / Browsern filtern.

Die Hauptgründe für CEOs / Projektleiter.

Kosteneinsparungen (Sentry kann auf Ihren eigenen Servern installiert werden).
Erhalt von Benutzerfeedback.
Verstehen, was in Ihrem Projekt in Echtzeit nicht stimmt.
Verstehen der Herausforderungen, die Menschen mit Ihrer Anwendung haben
Hilfe beim Finden von Stellen, an denen Ihre Entwickler Fehler gemacht haben

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

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

Sind Sie bereits interessiert?

Was ist Sentry?

Sentry ist eine Open-Source-Fehlerverfolgungsanwendung, die Entwicklern hilft, Fehler in Echtzeit zu verfolgen und zu beheben. Vergessen Sie nicht, dass die Anwendung auch die Effizienz steigern und die Benutzererfahrung verbessern kann. 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. (Bitte beachten Sie, dass Sentry auch 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 Sie Sentry in einen Container integrieren können, finden Sie unten:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// sollte vor der Verwendung hier aufgerufen werden
// idealerweise sogar vor dem Rendern Ihrer React-Anwendung 

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 erklärt, was als Nächstes zu tun ist. Sie können die folgenden Schritte ausführen. Ich möchte Ihnen zeigen, wie Sie Ihren ersten Fehler-Handler 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 Suchleiste finden.

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

4. Erste Fehlerverfolgung

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 eine Schaltfläche erstellen, die console.log mit user.email. Nach dieser Aktion sollten wir eine Fehlermeldung erhalten: Uncaught TypeError (kann Eigenschaft von undefiniert nicht lesen) von) wegen fehlender Benutzerobjekte. Sie können auch 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;
          test Fehler1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Feedback melden1</div>
        <h1>Musikfinder</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton /&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}" />}
                  title={item.title}
                  description={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

Hurra!

Wenn Sie auf den Fehlerkopf klicken, sehen Sie den Stack-Trace.

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

Ich möchte auch Anleitungen zur Konfiguration der Quellkarte bereitstellen, 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, liken Sie mehr und abonnieren Sie, um Dmitry Nozhenko, nichts von dem zweiten Teil zu verpassen.

5. Verwendung Sentry mit Endpunkt API

Okay. Wir haben die Javascript-Ausnahme in den vorherigen Punkten behandelt. Was machen wir jedoch mit XHR-Fehlern?

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

Sentry.captureException(err)

Sie können den Fehlernamen, das Niveau, zusätzliche Daten und einzigartige Benutzerdaten über Ihre Anwendung, E-Mail usw. einstellen.

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 würde gerne eine allgemeine Funktion für den API-Fehlerbehandler 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 das Feedback der Benutzer zum Fehler erhalten möchten
  return Sentry.captureException(error);
};

Importieren Sie diese Funktion in den 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 von Fehlern in das Sentry-Dashboard. Es hat Eigenschaften wie 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser hilft dabei, alle Benutzerdaten (ID, E-Mail-Adresse, Zahlungsplan usw.) zu speichern.
setExtra ermöglicht das Hinzufügen beliebiger Daten, die Sie benötigen, wie zum Beispiel den Shop.

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