Idag kommer jag att berätta om felspårning i realtid i en React-applikation. En front-end-applikation används vanligtvis inte för felspårning. Vissa företag skjuter ofta upp felspårning, återvänder till det efter dokumentation, tester etc. Men om du kan ändra din produkt till det bättre, så är det bara att göra det!
1. Varför behöver du Sentry?
Jag antar att du är intresserad av att spåra buggar under produktionen
Tror du att detta inte räcker?
Okej, låt oss titta på detaljerna.
De främsta skälen för utvecklare att använda Sentry:
- Låter dig undvika risker när du distribuerar kod med fel
- Hjälp QA med kodtestning
- Få snabba meddelanden om problem
- Förmåga att snabbt rätta till fel
- Få en bekväm visning av fel i adminpanelen
- Sortera fel efter användar-/webbläsarsegment
Huvudskäl för VD/Lead projekt
- Spara pengar (Sentry kan installeras på dina servrar)
- Få användarfeedback
- Förstå vad som är fel med ditt projekt i realtid
- Förstå antalet problem som människor har med din app
- Hjälp dig att hitta platser där dina utvecklare gjorde misstag
Jag tror att utvecklarna skulle vara intresserade av den här artikeln först. Du kan också använda den här listan med skäl för att övertyga din chef att integrera Sentry.
Var försiktig med den sista punkten på företagslistan.
Är du redan intresserad?
Vad är Sentry?
Sentry är en öppen källkod för buggspårning som hjälper utvecklare att spåra och fixa krascher i realtid. Glöm inte att applikationen låter dig öka effektiviteten och förbättra användarupplevelsen. Sentry stöder JavaScript, Node, Python, PHP, Ruby, Java och andra programmeringsspråk.
2. Logga in och skapa ett projekt
- Öppna ditt Sentry-konto. Du kanske måste logga in. (Observera att Sentry kan installeras på dina servrar)
- Nästa steg är att skapa ett projekt
- Välj ditt språk från listan. (Vi kommer att välja Reagera. Klicka på "Skapa projekt")
Anpassa din applikation. Ett grundläggande exempel på hur man integrerar Sentry i en behållare kan ses nedan:
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 har en hjälpsam guide som hjälper dig att ta reda på vad du ska göra härnäst. Du kan följa dessa steg. Jag vill visa dig hur du skapar din första felhanterare. Bra, vi har skapat ett projekt! Låt oss gå vidare till nästa steg
3. React och Sentry integration
Du måste installera npm-paketet i ditt projekt.
npm i @sentry/browserInitiera Sentry i din behållare:
Sentry.init({
// dsn: #dsnUrl,
});DSN finns i Projekt -> Inställningar -> Klientnycklar. Du kan hitta klientnycklar i sökfältet.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Spåra det första felet
Till exempel använde jag en enkel musikapplikation med Deezer API. Du kan se det . Vi måste skapa ett fel. Ett sätt är att komma åt egenskapen "odefinierad".
Vi måste skapa en knapp som ringer console.log с användare.e-post. Efter denna åtgärd bör vi få ett felmeddelande: Uncaught TypeError (kan inte läsa egenskap från odefinierad email) på grund av saknat användarobjekt. Du kan också använda Javascript undantag.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Hela behållaren ser ut så här:
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);Efter att ha integrerat den här knappen bör du testa den i webbläsaren.
Vi har vårt första fel
Whoo-hoo!
Om du klickar på rubrikfelet kommer du att se en stackspårning.
Meddelanden ser dåliga ut. Naturligtvis har vi sett felmeddelanden utan att förstå var koden finns. Som standard talar vi om källkartan i ReactJS eftersom de inte är konfigurerade.
Jag skulle också vilja ge instruktioner för att ställa in källkartan, men det skulle göra den här artikeln mycket längre än jag tänkt mig.
Du kan studera detta ämne . Om du är intresserad av den här artikeln, kommer att publicera den andra delen om integrering av källkarta. Så, slå fler gilla-markeringar och prenumerera på för att inte missa den andra delen.
5. användningen av Sentry med slutpunkt API
OK. Vi har täckt javascript-undantaget i föregående stycken. Men vad kommer vi att göra åt XHR-fel?
Sentry har också anpassad felhantering. Jag använde den för att spåra api-fel.
Sentry.captureException(err)Du kan anpassa felnamnet, nivån, lägga till data, unika användardata med din applikation, e-post, etc.
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));
}
});Jag skulle vilja använda en generisk funktion för 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);
};Importera den här funktionen i ditt api-anrop.
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));
}
});
};Låt oss kolla metoderna:
- setLevel låter dig infoga ett nivåfel i vaktpostens instrumentpanel. Den har egenskaper - 'fatal', 'error', 'warning', 'logg', 'info, 'debug', 'critical').
- setUser hjälper till att spara användardata (id, e-postadress, betalningsplan, etc.).
- setExtra låter dig specificera all data du behöver, till exempel lagra.
Om du vill få feedback från användare om en bugg bör du använda funktionen showReportDialog.
Sentry.showReportDialog();Slutsats:
Idag beskrev vi ett sätt att integrera Sentry i en React-applikation.
→ Telegramchatt av
Källa: will.com