Astăzi vă voi spune despre urmărirea erorilor în timp real într-o aplicație React. O aplicație front-end nu este utilizată de obicei pentru urmărirea erorilor. Unele companii amână adesea urmărirea erorilor, revenind la aceasta după documentare, teste etc. Cu toate acestea, dacă vă puteți schimba produsul în bine, atunci faceți-o!
1. De ce ai nevoie de Sentry?
Presupun că sunteți interesat de urmărirea erorilor în timpul producției
Crezi că asta nu este suficient?
Bine, să ne uităm la detalii.
Principalele motive pentru care dezvoltatorii folosesc Sentry:
- Vă permite să evitați riscurile la implementarea codului cu erori
- Ajută QA cu testarea codului
- Primiți notificări rapide despre probleme
- Abilitatea de a corecta rapid erorile
- Obțineți o afișare convenabilă a erorilor în panoul de administrare
- Sortați erorile după segment de utilizator/browser
Principalele motive pentru proiectul CEO/Lead
- Economisiți bani (Sentry poate fi instalat pe serverele dvs.)
- Obținerea de feedback de la utilizatori
- Înțelegeți ce este în neregulă cu proiectul dvs. în timp real
- Înțelegerea numărului de probleme pe care le au oamenii cu aplicația ta
- Vă ajută să găsiți locuri în care dezvoltatorii dvs. au făcut greșeli
Cred că dezvoltatorii ar fi interesați mai întâi de acest articol. De asemenea, poți folosi această listă de motive pentru a-ți convinge șeful să integreze Sentry.
Fii atent la ultimul element din lista de afaceri.
Ești deja interesat?
Ce este Sentry?
Sentry este o aplicație open source de urmărire a erorilor care îi ajută pe dezvoltatori să urmărească și să repare blocările în timp real. Nu uitați că aplicația vă permite să creșteți eficiența și să îmbunătățiți experiența utilizatorului. Sentry acceptă JavaScript, Node, Python, PHP, Ruby, Java și alte limbaje de programare.
2. Conectați-vă și creați un proiect
- Deschideți contul Sentry. Poate fi necesar să vă conectați. (Vă rugăm să rețineți că Sentry poate fi instalat pe serverele dvs.)
- Următorul pas este crearea unui proiect
- Selectați limba dvs. din listă. (Vom selecta React. Faceți clic pe „Creați proiect”)
Personalizați-vă aplicația. Un exemplu de bază despre cum să integrați Sentry într-un container poate fi văzut mai jos:
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 are un vrăjitor util pentru a vă ajuta să vă dați seama ce ar trebui să faceți în continuare. Puteți urma acești pași. Vreau să vă arăt cum să creați primul dvs. handler de erori. Super, am creat un proiect! Să trecem la pasul următor
3. React și integrarea Sentry
Trebuie să instalați pachetul npm în proiectul dvs.
npm i @sentry/browserInițializați Sentry în containerul dvs.:
Sentry.init({
// dsn: #dsnUrl,
});DSN-ul se află în Proiecte -> Setări -> Chei client. Puteți găsi cheile client în bara de căutare.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Urmărirea primei erori
De exemplu, am folosit o aplicație de muzică simplă cu API-ul Deezer. Il poti vedea . Trebuie să creăm o eroare. O modalitate este de a accesa proprietatea „nedefinită”.
Trebuie să creăm un buton care să sune consolă.log с utilizator.email. După această acțiune ar trebui să primim un mesaj de eroare: Eroare de tip neprins (nu se poate citi proprietatea din undefined email) din cauza lipsei obiectului utilizatorului. De asemenea, puteți utiliza Excepție Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Întregul container arată astfel:
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);După integrarea acestui buton, ar trebui să-l testați în browser.
Avem prima noastră eroare
Whoo-hoo!
Dacă faceți clic pe eroarea antetului, veți vedea o urmă de stivă.
Mesajele arată rău. Desigur, am văzut mesaje de eroare fără să înțelegem unde este codul. În mod implicit vorbim despre harta sursă în ReactJS deoarece acestea nu sunt configurate.
De asemenea, aș dori să ofer instrucțiuni pentru configurarea hărții sursă, dar asta ar face acest articol mult mai lung decât mi-am propus.
Puteți studia acest subiect . Dacă sunteți interesat de acest articol, va publica a doua parte despre integrarea hărții sursă. Așadar, apăsați mai multe aprecieri și abonați-vă la pentru a nu rata partea a doua.
5. Utilizare Pază cu punctul final API
BINE. Am acoperit excepția javascript în paragrafele anterioare. Totuși, ce vom face cu erorile XHR?
Sentry are și o gestionare personalizată a erorilor. L-am folosit pentru a urmări erorile API.
Sentry.captureException(err)Puteți personaliza numele erorii, nivelul, adăugați date, date unice ale utilizatorului folosind aplicația dvs., e-mailul 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));
}
});Aș dori să folosesc o funcție generică pentru API-ul catch.
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);
};Importați această funcție în apelul dvs. API.
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));
}
});
};Să verificăm metodele:
- setLevel vă permite să introduceți o eroare de nivel în tabloul de bord sentinelă. Are proprietăți - „fatal”, „eroare”, „avertisment”, „jurnal”, „informații, „depanare”, „critic”).
- setUser ajută la salvarea oricăror date de utilizator (id, adresă de e-mail, plan de plată etc.).
- setExtra vă permite să specificați orice date de care aveți nevoie, de exemplu, să stocați.
Dacă doriți să obțineți feedback de la utilizatori despre o eroare, ar trebui să utilizați funcția showReportDialog.
Sentry.showReportDialog();Concluzie:
Astăzi am descris o modalitate de a integra Sentry într-o aplicație React.
→ Chat Telegram de către
Sursa: www.habr.com