I dag vil jeg guide dig gennem fejlsporing i realtid i en React-app. Frontend-applikationen bruges typisk ikke til fejlsporing. Nogle virksomheder lægger ofte fejlsporing til side og vender tilbage til det efter dokumentation, test og så videre. Men hvis du kan ændre dit produkt til det bedre, så gør det bare!
1. Hvorfor har du brug for Sentry?
Jeg går ud fra, at du er interesseret i fejlsporing under produktionen.
Tror du, at dette ikke er nok?
Okay, lad os se på detaljerne.
Topårsager til at bruge Sentry for udviklere:
- Giver dig mulighed for at slippe af med risici, når du implementerer kode med fejl
- Hjælp QA i kodetestning
- Få hurtige problemmeddelelser
- Evne til hurtigt at rette fejl
- Få en praktisk visning af fejl i administrationspanelet
- Sorter fejl efter bruger-/browsersegment
Hovedårsager til CEO / Lead projekt
- Spar penge (Sentry kan installeres på dine servere)
- Få brugerfeedback
- Forstå, hvad der er galt med dit projekt i realtid
- Forstå antallet af problemer, folk har med din app
- Hjælp med at finde steder, hvor dine udviklere begik en fejl
Jeg tror, at udviklerne ville være interesserede i denne artikel i første omgang. Du kan også bruge denne liste over grunde til at overbevise din chef om at integrere Sentry.
Vær forsigtig med det sidste punkt på virksomhedslisten.
Er du allerede interesseret?
Hvad er Sentry?
Sentry er en open source-fejlsporingsapplikation, der hjælper udviklere med at spore og rette nedbrud i realtid. Glem ikke, at appen også giver dig mulighed for at øge effektiviteten og forbedre brugeroplevelsen. Sentry understøtter JavaScript, Node, Python, PHP, Ruby, Java og andre programmeringssprog.
2. Log ind og opret et projekt
- Åbn din Sentry-konto. Du skal muligvis logge ind. (Bemærk venligst, at Sentry kan installeres på dine servere)
- Det næste trin er at oprette et projekt
- Vælg dit sprog fra listen. (Vi vælger React. Klik på "Create Project")
Konfigurer din applikation. Du kan se et grundlæggende eksempel på, hvordan du integrerer Sentry i en container nedenfor:
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 nyttig guide til at hjælpe dig med at forstå, hvad du skal gøre næste gang. Du kan følge nedenstående trin. Jeg vil gerne vise dig, hvordan du opretter din første fejlbehandler. Super, vi har lavet et projekt! Lad os gå videre til næste trin
3. Integration af React og Sentry
Du skal installere npm-pakken i dit projekt.
npm i @sentry/browserInitialiser Sentry i din beholder:
Sentry.init({
// dsn: #dsnUrl,
});DSN er placeret i Projekter -> Indstillinger -> Klientnøgler. Du kan finde klientnøgler i søgelinjen.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Sporing af den første fejl
For eksempel brugte jeg en simpel musikapplikation med Deezer API. Du kan se det . Vi skal lave en fejl. En måde er at få adgang til egenskaben "udefineret".
Vi skal lave en knap, der ringer konsol log с bruger.e-mail. Efter denne handling skulle vi modtage en fejlmeddelelse: Ufanget TypeError (kan ikke læse egenskab fra udefineret email) på grund af fraværet af et brugerobjekt. Du kan også bruge javascript undtagelse.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Hele beholderen ser således ud:
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 at have integreret denne knap, bør du teste den i browseren.
Vi har vores første fejl
Hov-hø!
Hvis du klikker på overskriftsfejlen, vil du se staksporet.
Beskederne ser dårlige ud. Selvfølgelig har vi set fejlmeddelelser uden at forstå, hvor denne kode er. Som standard handler det om kildekort i ReactJS, fordi de ikke er konfigureret.
Jeg vil også gerne give instruktioner til opsætning af kildekortet, men det ville gøre dette indlæg meget længere, end jeg havde tænkt mig.
Du kan studere dette emne . Hvis du er interesseret i denne artikel, vil udgive anden del om integration af kildekort. Så klik på flere likes og abonner på ikke at gå glip af anden del.
5. Brug Sentry med endepunkt API
OKAY. Vi har dækket javascript-undtagelsen i de foregående afsnit. Men hvad gør vi med XHR-fejl?
Sentry har også tilpasset fejlhåndtering. Jeg brugte det til api-fejlsporing.
Sentry.captureException(err)Du kan tilpasse fejlnavnet, niveauet, tilføje data, unikke brugerdata via din app, e-mail osv.
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));
}
});Jeg vil gerne bruge en generisk funktion til 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);
};Importer denne funktion i api-kald.
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));
}
});
};Lad os tjekke metoderne:
- sætNiveau giver dig mulighed for at indsætte en niveaufejl i vagtpostens dashboard. Den har egenskaber - 'fatal', 'fejl', 'advarsel', 'log', 'info, 'fejlretning', 'kritisk').
- sætBruger hjælper med at gemme alle brugerdata (id, e-mailadresse, betalingsplan osv.).
- sætEkstra giver dig mulighed for at indstille alle data, du har brug for, for eksempel en butik.
Hvis du ønsker brugerfeedback på en fejl, skal du bruge funktionen showReportDialog.
Sentry.showReportDialog();Konklusion:
I dag har vi beskrevet en af måderne til at integrere Sentry i en React-applikation.
→ Telegramchat af
Kilde: www.habr.com