Vandaag zal ik je vertellen over het realtime volgen van fouten in een React-applicatie. Een front-end-applicatie wordt doorgaans niet gebruikt voor het opsporen van fouten. Sommige bedrijven stellen het volgen van bugs vaak uit en komen er na documentatie, tests, enz. weer op terug. Als u uw product echter ten goede kunt veranderen, doe het dan gewoon!
1. Waarom heb je Sentry nodig?
Ik neem aan dat je geïnteresseerd bent in het opsporen van bugs tijdens de productie
Denkt u dat dit niet genoeg is?
Oké, laten we naar de details kijken.
Belangrijkste redenen voor ontwikkelaars om Sentry te gebruiken:
- Hiermee kunt u risico's vermijden bij het implementeren van code met fouten
- Help QA met het testen van code
- Ontvang snel meldingen over problemen
- Mogelijkheid om fouten snel te corrigeren
- Een handige weergave van fouten krijgen in het beheerderspaneel
- Sorteer fouten op gebruikers-/browsersegment
Belangrijkste redenen voor CEO/hoofdproject
- Bespaar geld (Sentry kan op uw servers worden geïnstalleerd)
- Feedback van gebruikers krijgen
- Begrijp in realtime wat er mis is met uw project
- Inzicht krijgen in het aantal problemen dat mensen hebben met uw app
- Help u plaatsen te vinden waar uw ontwikkelaars fouten hebben gemaakt
Ik denk dat de ontwikkelaars eerst in dit artikel geïnteresseerd zouden zijn. Je kunt deze lijst met redenen ook gebruiken om je bazen ervan te overtuigen Sentry te integreren.
Wees voorzichtig met het laatste item op de bedrijvenlijst.
Bent u al geïnteresseerd?
Wat is Sentry?
Sentry is een opensource-applicatie voor het volgen van bugs waarmee ontwikkelaars crashes in realtime kunnen volgen en oplossen. Vergeet niet dat u met de applicatie de efficiëntie kunt verhogen en de gebruikerservaring kunt verbeteren. Sentry ondersteunt JavaScript, Node, Python, PHP, Ruby, Java en andere programmeertalen.
2. Log in en maak een project aan
- Open uw Sentry-account. Mogelijk moet u inloggen. (Houd er rekening mee dat Sentry op uw servers kan worden geïnstalleerd)
- De volgende stap is het maken van een project
- Selecteer uw taal uit de lijst. (We gaan Reageren selecteren. Klik op "Project maken")
Pas uw applicatie aan. Een eenvoudig voorbeeld van hoe Sentry in een container kan worden geïntegreerd, ziet u hieronder:
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 heeft een handige wizard om u te helpen bepalen wat u vervolgens moet doen. U kunt deze stappen volgen. Ik wil je laten zien hoe je je eerste fouthandler kunt maken. Geweldig, we hebben een project gemaakt! Laten we verder gaan met de volgende stap
3. React- en Sentry-integratie
U moet het npm-pakket in uw project installeren.
npm i @sentry/browserInitialiseer Sentry in uw container:
Sentry.init({
// dsn: #dsnUrl,
});De DSN bevindt zich in Projecten -> Instellingen -> Clientsleutels. U kunt klantsleutels vinden in de zoekbalk.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Het opsporen van de eerste fout
Ik gebruikte bijvoorbeeld een eenvoudige muziekapplicatie met de Deezer API. Je kan het zien . We moeten een fout creëren. Eén manier is om toegang te krijgen tot de eigenschap "undefined".
We moeten een knop maken die belt console.log с gebruiker.e-mail. Na deze actie zouden we een foutmelding moeten ontvangen: Uncaught TypeError (kan eigenschap niet lezen van undefined email) vanwege ontbrekend gebruikersobject. Je kan ook gebruiken JavaScript-uitzondering.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>De gehele container ziet er als volgt uit:
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);Nadat u deze knop heeft geïntegreerd, moet u deze in de browser testen.
We hebben onze eerste fout
Joepie!
Als u op de headerfout klikt, ziet u een stacktrace.
De berichten zien er slecht uit. Natuurlijk hebben we foutmeldingen gezien zonder te begrijpen waar de code zich bevindt. Standaard hebben we het over de bronkaart in ReactJS omdat deze niet is geconfigureerd.
Ik zou ook graag instructies willen geven voor het opzetten van de bronkaart, maar dat zou dit artikel veel langer maken dan ik had bedoeld.
Je kunt dit onderwerp bestuderen . Als u geïnteresseerd bent in dit artikel, zal het tweede deel over bronkaartintegratie publiceren. Dus zorg voor meer likes en abonneer je om het tweede deel niet te missen.
5. Gebruik Schildwacht met eindpunt API
OK. We hebben de JavaScript-uitzondering in de voorgaande paragrafen behandeld. Maar wat gaan we doen aan XHR-fouten?
Sentry heeft ook aangepaste foutafhandeling. Ik gebruikte het om API-fouten op te sporen.
Sentry.captureException(err)U kunt de foutnaam en het niveau aanpassen, gegevens en unieke gebruikersgegevens toevoegen met behulp van uw applicatie, e-mail, enz.
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));
}
});Ik wil graag een generieke functie gebruiken voor de catch-API.
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);
};Importeer deze functie in uw API-aanroep.
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));
}
});
};Laten we de methoden bekijken:
- setNiveau Hiermee kunt u een niveaufout in het Sentry-dashboard invoegen. Het heeft eigenschappen - 'fataal', 'fout', 'waarschuwing', 'log', 'info, 'debug', 'kritiek').
- setGebruiker helpt bij het opslaan van gebruikersgegevens (ID, e-mailadres, betalingsplan, enz.).
- setExtra Hiermee kunt u alle gegevens opgeven die u bijvoorbeeld nodig heeft.
Als u gebruikersfeedback over een bug wilt krijgen, moet u de showReportDialog-functie gebruiken.
Sentry.showReportDialog();Conclusie:
Vandaag hebben we een manier beschreven om Sentry in een React-applicatie te integreren.
→ Telegramchatten door
Bron: www.habr.com