Sot do t'ju tregoj për gjurmimin e gabimeve në kohë reale në një aplikacion React. Një aplikacion i përparmë nuk përdoret zakonisht për gjurmimin e gabimeve. Disa kompani shpesh e shtyjnë gjurmimin e gabimeve, duke u kthyer në të pas dokumentacionit, testeve, etj. Sidoqoftë, nëse mund ta ndryshoni produktin tuaj për mirë, atëherë thjesht bëjeni!
1. Pse keni nevojë për Sentry?
Supozoj se jeni të interesuar të gjurmoni gabimet gjatë prodhimit
Mendoni se kjo nuk mjafton?
Mirë, le të shohim detajet.
Arsyet kryesore që zhvilluesit të përdorin Sentry:
- Ju lejon të shmangni rreziqet kur vendosni kodin me gabime
- Ndihmoni QA me testimin e kodit
- Merrni njoftime të shpejta për problemet
- Aftësia për të korrigjuar shpejt gabimet
- Marrja e një shfaqjeje të përshtatshme të gabimeve në panelin e administratorit
- Renditni gabimet sipas segmentit të përdoruesit/shfletuesit
Arsyet kryesore për projektin CEO/Udhëheqës
- Kurseni para (Sentry mund të instalohet në serverët tuaj)
- Marrja e komenteve të përdoruesit
- Kuptimi i asaj që nuk shkon me projektin tuaj në kohë reale
- Kuptimi i numrit të problemeve që njerëzit kanë me aplikacionin tuaj
- Ju ndihmojë të gjeni vendet ku zhvilluesit tuaj kanë bërë gabime
Unë mendoj se zhvilluesit do të jenë të interesuar për këtë artikull së pari. Ju gjithashtu mund të përdorni këtë listë arsyesh për të bindur shefat tuaj që të integrojnë Sentry.
Kini kujdes me artikullin e fundit në listën e biznesit.
Jeni të interesuar tashmë?
Çfarë është Sentry?
Sentry është një aplikacion për gjurmimin e gabimeve me burim të hapur që i ndihmon zhvilluesit të gjurmojnë dhe rregullojnë përplasjet në kohë reale. Mos harroni se aplikacioni ju lejon të rrisni efikasitetin dhe të përmirësoni përvojën e përdoruesit. Sentry mbështet JavaScript, Node, Python, PHP, Ruby, Java dhe gjuhë të tjera programimi.
2. Hyni dhe krijoni një projekt
- Hapni llogarinë tuaj Sentry. Ju mund të duhet të identifikoheni. (Ju lutemi vini re se Sentry mund të instalohet në serverët tuaj)
- Hapi tjetër është krijimi i një projekti
- Zgjidhni gjuhën tuaj nga lista. (Ne do të zgjedhim React. Kliko "Krijo projekt")
Personalizojeni aplikacionin tuaj. Një shembull bazë se si të integrohet Sentry në një kontejner mund të shihet më poshtë:
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 ka një magjistar të dobishëm për t'ju ndihmuar të kuptoni se çfarë duhet të bëni më pas. Ju mund të ndiqni këto hapa. Unë dua t'ju tregoj se si të krijoni mbajtësin tuaj të parë të gabimit. E shkëlqyeshme, ne kemi krijuar një projekt! Le të kalojmë në hapin tjetër
3. Integrimi React dhe Sentry
Duhet të instaloni paketën npm në projektin tuaj.
npm i @sentry/browserInicializoni Sentry në kontejnerin tuaj:
Sentry.init({
// dsn: #dsnUrl,
});DSN ndodhet te Projektet -> Cilësimet -> Çelësat e klientit. Ju mund të gjeni çelësat e klientit në shiritin e kërkimit.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ndjekja e gabimit të parë
Për shembull, kam përdorur një aplikacion të thjeshtë muzikor me Deezer API. Mund ta shihni . Duhet të krijojmë një gabim. Një mënyrë është qasja në pronën "e papërcaktuar".
Duhet të krijojmë një buton që thërret konsol.log с përdoruesi.email. Pas këtij veprimi duhet të marrim një mesazh gabimi: Gabim i llojit të pakapur (nuk mund të lexojë veçori nga e papërcaktuara email) për shkak të mungesës së objektit të përdoruesit. Ju gjithashtu mund të përdorni Përjashtim Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>I gjithë kontejneri duket si ky:
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);Pas integrimit të këtij butoni, duhet ta provoni atë në shfletues.
Ne kemi gabimin tonë të parë
Uu-hu!
Nëse klikoni në gabimin e kokës, do të shihni një gjurmë stek.
Mesazhet duken keq. Sigurisht që kemi parë mesazhe gabimi pa e kuptuar se ku është kodi. Si parazgjedhje ne po flasim për hartën e burimit në ReactJS sepse ato nuk janë të konfiguruara.
Do të dëshiroja gjithashtu të ofroj udhëzime për konfigurimin e hartës burimore, por kjo do ta bënte këtë artikull shumë më të gjatë nga sa kisha menduar.
Ju mund ta studioni këtë temë . Nëse jeni të interesuar për këtë artikull, do të publikojë pjesën e dytë për integrimin e hartës burimore. Pra, shtypni më shumë pëlqime dhe abonohuni në për të mos humbur pjesën e dytë.
5. Përdorni Rojë me pikën përfundimtare API
NE RREGULL. Ne kemi mbuluar përjashtimin e Javascript në paragrafët e mëparshëm. Megjithatë, çfarë do të bëjmë për gabimet XHR?
Sentry gjithashtu ka trajtimin me porosi të gabimeve. E përdora për të gjurmuar gabimet e api.
Sentry.captureException(err)Ju mund të personalizoni emrin e gabimit, nivelin, të shtoni të dhëna, të dhënat unike të përdoruesit duke përdorur aplikacionin tuaj, emailin, etj.
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));
}
});Do të doja të përdorja një funksion të përgjithshëm për API-në e kapjes.
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);
};Importo këtë funksion në thirrjen tënde 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));
}
});
};Le të kontrollojmë metodat:
- niveli i vendosur ju lejon të futni një gabim niveli në pultin e rojës. Ka veti - 'fatal', 'gabim', 'paralajmërim', 'log', 'info, 'debug', 'kritik').
- setPërdoruesi ndihmon për të ruajtur çdo të dhënë të përdoruesit (id, adresën e emailit, planin e pagesës, etj.).
- setExtra ju lejon të specifikoni çdo të dhënë që ju nevojitet, për shembull, të ruani.
Nëse dëshironi të merrni komente nga përdoruesit për një gabim, duhet të përdorni funksionin showReportDialog.
Sentry.showReportDialog();Përfundim:
Sot kemi përshkruar një mënyrë për të integruar Sentry në një aplikacion React.
→ Biseda në telegram nga
Burimi: www.habr.com