Illum se ngħidlek dwar it-traċċar tal-iżbalji f'ħin reali f'applikazzjoni React. Applikazzjoni front-end ma tintużax tipikament għat-traċċar tal-iżbalji. Xi kumpaniji ħafna drabi jwarrbu t-traċċar tal-bugs, jirritornaw lejh wara dokumentazzjoni, testijiet, eċċ. Madankollu, jekk tista 'tbiddel il-prodott tiegħek għall-aħjar, allura sempliċement agħmel dan!
1. Għaliex għandek bżonn Sentry?
Nassumu li inti interessat fit-traċċar tal-bugs waqt il-produzzjoni
Taħseb li dan mhux biżżejjed?
Tajjeb, ejja nħarsu lejn id-dettalji.
L-aqwa raġunijiet għall-iżviluppaturi biex jużaw Sentry:
- Jippermettilek tevita riskji meta tuża kodiċi bi żbalji
- Għajnuna QA bl-ittestjar tal-kodiċi
- Irċievi notifiki malajr dwar problemi
- Kapaċità li tikkoreġi malajr żbalji
- Ikseb wirja konvenjenti ta 'żbalji fil-pannell ta' l-amministrazzjoni
- Issortja l-iżbalji skont is-segment tal-utent/browser
Raġunijiet ewlenin għall-proġett CEO/Lead
- Iffranka l-flus (Sentry jista’ jiġi installat fuq is-servers tiegħek)
- Ikseb feedback mill-utent
- Nifhmu x'inhu ħażin fil-proġett tiegħek f'ħin reali
- Nifhmu n-numru ta' problemi li għandhom in-nies bl-app tiegħek
- Jgħinek issib postijiet fejn l-iżviluppaturi tiegħek għamlu żbalji
Naħseb li l-iżviluppaturi jkunu interessati f'dan l-artikolu l-ewwel. Tista 'wkoll tuża din il-lista ta' raġunijiet biex tikkonvinċi lill-imgħallem tiegħek biex jintegra Sentry.
Oqgħod attent mal-aħħar oġġett fuq il-lista tan-negozju.
Int diġà interessat?
X'inhu Sentry?
Sentry hija applikazzjoni ta 'traċċar tal-bug sors miftuħ li tgħin lill-iżviluppaturi jsegwu u jiffissaw il-ħabtiet f'ħin reali. Tinsiex li l-applikazzjoni tippermettilek li żżid l-effiċjenza u ttejjeb l-esperjenza tal-utent. Sentry jappoġġja JavaScript, Node, Python, PHP, Ruby, Java u lingwi ta 'programmar oħra.
2. Idħol u oħloq proġett
- Iftaħ il-kont Sentry tiegħek. Jista' jkollok bżonn tidħol. (Jekk jogħġbok innota li Sentry jista' jiġi installat fuq is-servers tiegħek)
- Il-pass li jmiss huwa li toħloq proġett
- Agħżel il-lingwa tiegħek mil-lista. (Se nagħżlu React. Ikklikkja "Oħloq Proġett")
Ippersonalizza l-applikazzjoni tiegħek. Eżempju bażiku ta’ kif tintegra Sentry f’kontenitur jista’ jidher hawn taħt:
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 għandu Wizard utli biex jgħinek tifhem x'għandek tagħmel wara. Tista 'ssegwi dawn il-passi. Irrid nuruk kif toħloq l-ewwel handler tal-iżbalji tiegħek. Kbir, ħloqna proġett! Ejja ngħaddu għall-pass li jmiss
3. Irreaġixxi u integrazzjoni Sentry
Int trid tinstalla l-pakkett npm fil-proġett tiegħek.
npm i @sentry/browserInizjalizza Sentry fil-kontenitur tiegħek:
Sentry.init({
// dsn: #dsnUrl,
});Id-DSN jinsab fi Proġetti -> Settings -> Klijent Keys. Tista' ssib iċ-ċwievet tal-klijenti fil-bar tat-tiftix.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. It-traċċar tal-ewwel żball
Pereżempju, użajt applikazzjoni sempliċi tal-mużika bid-Deezer API. Tista' tarah . Għandna bżonn noħolqu żball. Mod wieħed huwa li taċċessa l-proprjetà "mhux definita".
Għandna bżonn noħolqu buttuna li ssejjaħ console.log с utent.email. Wara din l-azzjoni għandna nirċievu messaġġ ta' żball: Error TypeError mhux maqbud (ma jistax jaqra proprjetà minn mhux definit email) minħabba oġġett utent nieqes. Tista 'wkoll tuża Eċċezzjoni Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Il-kontenitur kollu jidher bħal dan:
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);Wara li tintegra din il-buttuna, għandek tittestjaha fil-browser.
Għandna l-ewwel żball tagħna
Whoo-hoo!
Jekk tikklikkja fuq l-iżball tal-header, tara traċċa munzell.
Il-messaġġi jidhru ħżiena. Naturalment rajna messaġġi ta 'żball mingħajr ma nifhmu fejn hu l-kodiċi. B'mod awtomatiku qed nitkellmu dwar il-mappa tas-sors f'ReactJS minħabba li mhumiex konfigurati.
Nixtieq ukoll nipprovdu struzzjonijiet għat-twaqqif tal-mappa tas-sors, iżda dan jagħmel dan l-artikolu ħafna itwal milli kont intendi.
Tista' tistudja dan is-suġġett . Jekk inti interessat f'dan l-artikolu, se tippubblika t-tieni parti dwar l-integrazzjoni tal-mappa tas-sors. Allura, agħfas aktar likes u abbona għal biex ma titlifx it-tieni parti.
5. Użu sentry bil-punt tat-tmiem API
KOLLOX SEW. Aħna koprejna l-eċċezzjoni tal-javascript fil-paragrafi preċedenti. Madankollu, x'se nagħmlu dwar żbalji XHR?
Sentry għandu wkoll immaniġġjar ta 'żbalji apposta. Użajha biex insegwi l-iżbalji tal-API.
Sentry.captureException(err)Tista' tippersonalizza l-isem tal-iżball, il-livell, iżid id-dejta, id-dejta tal-utent unika billi tuża l-applikazzjoni tiegħek, l-email, eċċ.
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));
}
});Nixtieq nuża funzjoni ġenerika għall-API 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 din il-funzjoni fis-sejħa api tiegħek.
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));
}
});
};Ejja niċċekkjaw il-metodi:
- setLevel jippermettilek li daħħal żball ta' livell fid-dashboard tas-sentry. Għandu proprjetajiet - 'fatali', 'żball', 'twissija', 'log', 'info, 'debug', 'kritika').
- setUser jgħin biex tissejvja kwalunkwe data tal-utent (id, indirizz elettroniku, pjan ta' ħlas, eċċ.).
- setExtra jippermettilek tispeċifika kwalunkwe data li għandek bżonn, pereżempju, taħżen.
Jekk trid tikseb feedback tal-utent dwar bug, għandek tuża l-funzjoni showReportDialog.
Sentry.showReportDialog();Konklużjoni:
Illum iddeskrivejna mod wieħed kif nintegraw Sentry f'applikazzjoni React.
→ Telegram chat minn
Sors: www.habr.com