Heute werde ich Sie durch die Echtzeit-Fehlerverfolgung in einer React-App führen. Die Frontend-Anwendung wird normalerweise nicht zur Fehlerverfolgung verwendet. Manche Unternehmen verzichten oft auf die Fehlerverfolgung und greifen nach der Dokumentation, Tests usw. wieder darauf zurück. Wenn Sie jedoch Ihr Produkt zum Besseren verändern können, dann tun Sie es einfach!
1. Warum brauchen Sie Sentry?
Ich gehe davon aus, dass Sie an der Fehlerverfolgung während der Produktion interessiert sind.
Glaubst du, das ist nicht genug?
Okay, schauen wir uns die Details an.
Die wichtigsten Gründe für die Verwendung von Sentry für Entwickler:
- Ermöglicht Ihnen, Risiken bei der Bereitstellung von Code mit Fehlern zu beseitigen
- Helfen Sie der Qualitätssicherung beim Codetesten
- Erhalten Sie schnelle Problembenachrichtigungen
- Fähigkeit, Fehler schnell zu beheben
- Erhalten Sie eine komfortable Anzeige von Fehlern im Admin-Panel
- Fehler nach Benutzer-/Browsersegment sortieren
Hauptgründe für CEO / Lead-Projekt
- Sparen Sie Geld (Sentry kann auf Ihren Servern installiert werden)
- Erhalten Sie Benutzerfeedback
- Verstehen Sie in Echtzeit, was mit Ihrem Projekt nicht stimmt
- Verstehen Sie, wie viele Probleme Menschen mit Ihrer App haben
- Helfen Sie dabei, Stellen zu finden, an denen Ihre Entwickler einen 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 nutzen, um Ihren Chef davon zu überzeugen, Sentry zu integrieren.
Seien Sie vorsichtig mit dem letzten Punkt auf der Geschäftsliste.
Sind Sie bereits interessiert?
Was ist Sentry?
Sentry ist eine Open-Source-Bug-Tracking-Anwendung, die Entwicklern hilft, Abstürze in Echtzeit zu verfolgen und zu beheben. Vergessen Sie nicht, dass Sie mit der App auch die Effizienz steigern und das Benutzererlebnis verbessern können. Sentry unterstützt JavaScript, Node, Python, PHP, Ruby, Java und andere Programmiersprachen.
2. Melden Sie sich an und erstellen Sie ein Projekt
- Eröffnen Sie Ihr Sentry-Konto. Möglicherweise müssen Sie sich anmelden. (Bitte beachten Sie, dass Sentry auf Ihren Servern installiert werden kann)
- Der nächste Schritt besteht darin, ein Projekt zu erstellen
- Wählen Sie Ihre Sprache aus der Liste aus. (Wir wählen „Reagieren“. Klicken Sie auf „Projekt erstellen“).
Richten Sie Ihre Anwendung ein. Nachfolgend sehen Sie ein einfaches Beispiel für die Integration von Sentry in einen Container:
import * as Sentry from '@sentry/browser';
// Sentry.init({
// dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app
class ExampleBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error, errorInfo) {
this.setState({ error });
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
if (this.state.error) {
//render fallback UI
return (
<a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
);
} else {
//when there's not an error, render children untouched
return this.props.children;
}
}
}Sentry verfügt über einen hilfreichen Assistenten, der Ihnen hilft, zu verstehen, was Sie als Nächstes tun sollten. Sie können die folgenden Schritte ausführen. Ich möchte Ihnen zeigen, wie Sie Ihren ersten Fehlerhandler erstellen. Großartig, wir haben ein Projekt erstellt! Fahren wir mit dem nächsten Schritt fort
3. React und Sentry integrieren
Sie müssen das npm-Paket in Ihrem Projekt installieren.
npm i @sentry/browserInitialisieren Sie Sentry in Ihrem Container:
Sentry.init({
// dsn: #dsnUrl,
});Der DSN befindet sich unter Projekte -> Einstellungen -> Clientschlüssel. Clientschlüssel finden Sie in der Suchleiste.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Den ersten Fehler verfolgen
Ich habe zum Beispiel eine einfache Musikanwendung mit der Deezer-API verwendet. Du kannst es sehen . Wir müssen einen Fehler erzeugen. Eine Möglichkeit besteht darin, auf die Eigenschaft „undefiniert“ zuzugreifen
Wir müssen eine Schaltfläche erstellen, die aufruft console.log с Benutzer Email. Nach dieser Aktion sollten wir eine Fehlermeldung erhalten: Nicht erfasster TypeError (Eigenschaft kann nicht von undefiniert gelesen werden email) aufgrund des Fehlens eines Benutzerobjekts. Sie können auch verwenden Javascript-Ausnahme.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Der ganze 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 => ({
list: state.root.list,
loading: state.root.loading
});
const mapDispatch = {
getList
};
class Container extends Component {
constructor(props) {
super(props);
Sentry.init({
dsn: "https://[email protected]/1417586",
});
}
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
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)}
>
test error1
</button>
<div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
<h1>Music Finder</h1>
<br />
<Search onSearch={value => getList(value)} enterButton />
{loading && <Skeleton avatar title={false} loading={true} active />}
{!loading && (
<List
itemLayout="horizontal"
dataSource={list}
locale={{ emptyText: <div /> }}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.artist.picture} />}
title={item.title}
description={item.artist.name}
/>
</List.Item>
)}
/>
)}
</div>
);
}
}
export default connect(
mapState,
mapDispatch
)(Container);Nachdem Sie diesen Button eingebunden haben, sollten Sie ihn im Browser testen.
Wir haben unseren ersten Fehler
Huhu!
Wenn Sie auf den Header-Fehler klicken, wird der Stack-Trace angezeigt.
Die Nachrichten sehen schlecht aus. Natürlich haben wir Fehlermeldungen gesehen, ohne zu verstehen, wo sich dieser Code befindet. Standardmäßig handelt es sich um eine Quellzuordnung in ReactJS, da diese nicht konfiguriert ist.
Ich würde auch gerne Anweisungen zum Einrichten der Quellkarte bereitstellen, aber das würde diesen Beitrag viel länger machen, als ich beabsichtigt hatte.
Sie können dieses Thema studieren . Wenn Sie an diesem Artikel interessiert sind, wird den zweiten Teil über die Integration von Quellkarten veröffentlichen. Klicken Sie also auf „Mehr Likes“ und abonnieren Sie Den zweiten Teil darf man sich nicht entgehen lassen.
5. Verwendung Sentry mit Endpunkt API
OK. Wir haben die Javascript-Ausnahme in den vorherigen Absätzen behandelt. Doch was machen wir mit XHR-Fehlern?
Sentry verfügt außerdem über eine benutzerdefinierte Fehlerbehandlung. Ich habe es zur API-Fehlerverfolgung verwendet.
Sentry.captureException(err)Sie können den Fehlernamen und die Fehlerstufe anpassen, Daten und eindeutige Benutzerdaten über Ihre App, E-Mail usw. hinzufügen.
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": "[email protected]"})
.setLevel("Error")
);
return Sentry.captureException(err);
}
if (response) {
return dispatch(setList(response.body.data));
}
});Ich möchte eine generische Funktion für die Catch-API 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(); - If you want get users feedback on error
return Sentry.captureException(error);
};Importieren Sie diese Funktion in einen 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));
}
});
};Schauen wir uns die Methoden an:
- setLevel Ermöglicht das Einfügen eines Levelfehlers in das Sentry-Dashboard. Es verfügt über Eigenschaften: „schwerwiegend“, „Fehler“, „Warnung“, „Protokoll“, „Info“, „Debug“, „kritisch“.
- setUser Hilft dabei, alle Benutzerdaten (ID, E-Mail-Adresse, Zahlungsplan usw.) zu speichern.
- setExtra ermöglicht es Ihnen, alle benötigten Daten festzulegen, beispielsweise ein Geschäft.
Wenn Sie Benutzerfeedback zu einem Fehler wünschen, sollten Sie die Funktion showReportDialog verwenden.
Sentry.showReportDialog();Fazit:
Heute haben wir eine der Möglichkeiten beschrieben, Sentry in eine React-Anwendung zu integrieren.
→ Telegram-Chat von
Source: habr.com