I dag vil jeg fortelle deg om sanntids feilsporing i en React-applikasjon. En frontend-applikasjon brukes vanligvis ikke til feilsporing. Noen selskaper utsetter ofte feilsporing, går tilbake til det etter dokumentasjon, tester osv. Men hvis du kan endre produktet til det bedre, så bare gjør det!
1. Hvorfor trenger du Sentry?
Jeg antar at du er interessert i å spore feil under produksjon
Tror du dette ikke er nok?
Ok, la oss se på detaljene.
De viktigste grunnene for utviklere til å bruke Sentry:
- Lar deg unngå risiko når du distribuerer kode med feil
- Hjelp QA med kodetesting
- Motta raske varsler om problemer
- Evne til raskt å rette feil
- Få en praktisk visning av feil i administrasjonspanelet
- Sorter feil etter bruker-/nettlesersegment
Hovedårsaker til CEO/Lead prosjekt
- Spar penger (Sentry kan installeres på serverne dine)
- Få tilbakemeldinger fra brukere
- Forstå hva som er galt med prosjektet ditt i sanntid
- Forstå hvor mange problemer folk har med appen din
- Hjelp deg å finne steder der utviklerne dine har gjort feil
Jeg tror utviklerne vil være interessert i denne artikkelen først. Du kan også bruke denne listen over grunner til å overbevise sjefen din om å integrere Sentry.
Vær forsiktig med det siste elementet på virksomhetslisten.
Er du allerede interessert?
Hva er Sentry?
Sentry er en åpen kildekode-feilsporingsapplikasjon som hjelper utviklere med å spore og fikse krasj i sanntid. Ikke glem at applikasjonen lar deg øke effektiviteten og forbedre brukeropplevelsen. Sentry støtter JavaScript, Node, Python, PHP, Ruby, Java og andre programmeringsspråk.
2. Logg på og opprett et prosjekt
- Åpne Sentry-kontoen din. Du må kanskje logge inn. (Vær oppmerksom på at Sentry kan installeres på serverne dine)
- Det neste trinnet er å lage et prosjekt
- Velg språket ditt fra listen. (Vi skal velge React. Klikk "Create Project")
Tilpass applikasjonen din. Et grunnleggende eksempel på hvordan du integrerer Sentry i en beholder kan ses 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 veiviser som hjelper deg med å finne ut hva du bør gjøre videre. Du kan følge disse trinnene. Jeg vil vise deg hvordan du lager din første feilbehandler. Flott, vi har laget et prosjekt! La oss gå videre til neste trinn
3. React og Sentry integrasjon
Du må installere npm-pakken i prosjektet ditt.
npm i @sentry/browserInitialiser Sentry i beholderen din:
Sentry.init({
// dsn: #dsnUrl,
});DSN er plassert i Prosjekter -> Innstillinger -> Klientnøkler. Du finner klientnøkler i søkefeltet.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Sporing av den første feilen
For eksempel brukte jeg en enkel musikkapplikasjon med Deezer API. Du kan se det . Vi må lage en feil. En måte er å få tilgang til egenskapen "udefinert".
Vi må lage en knapp som ringer console.log с bruker.e-post. Etter denne handlingen skal vi motta en feilmelding: Ufanget TypeError (kan ikke lese egenskap fra udefinert email) på grunn av manglende brukerobjekt. Du kan også bruke Javascript-unntak.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Hele beholderen ser slik ut:
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);Etter å ha integrert denne knappen, bør du teste den i nettleseren.
Vi har vår første feil
Huff!
Hvis du klikker på overskriftsfeilen, vil du se en stabelsporing.
Meldingene ser dårlige ut. Selvfølgelig har vi sett feilmeldinger uten å forstå hvor koden er. Som standard snakker vi om kildekartet i ReactJS fordi de ikke er konfigurert.
Jeg vil også gjerne gi instruksjoner for å sette opp kildekartet, men det ville gjøre denne artikkelen mye lengre enn jeg hadde tenkt.
Du kan studere dette emnet . Hvis du er interessert i denne artikkelen, vil publisere den andre delen om integrering av kildekart. Så trykk flere likes og abonner på for ikke å gå glipp av andre del.
5. Bruk Sentry med sluttpunkt API
OK. Vi har dekket javascript-unntaket i de foregående avsnittene. Men hva vil vi gjøre med XHR-feil?
Sentry har også tilpasset feilhåndtering. Jeg brukte den til å spore api-feil.
Sentry.captureException(err)Du kan tilpasse feilnavnet, nivået, legge til data, unike brukerdata ved å bruke applikasjonen din, e-post 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 gjerne bruke en generisk funksjon for 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 funksjonen i API-anropet ditt.
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));
}
});
};La oss sjekke metodene:
- setLevel lar deg sette inn en nivåfeil i vaktpostens dashbord. Den har egenskaper - 'fatal', 'error', 'advarsel', 'logg', 'info, 'debug', 'critical').
- setBruker hjelper til med å lagre brukerdata (id, e-postadresse, betalingsplan, etc.).
- setExtra lar deg spesifisere alle data du trenger, for eksempel lagre.
Hvis du ønsker å få tilbakemelding fra brukere om en feil, bør du bruke funksjonen showReportDialog.
Sentry.showReportDialog();Konklusjon:
I dag beskrev vi en måte å integrere Sentry i en React-applikasjon.
→ Telegramchat av
Kilde: www.habr.com