Dnes vám poviem o sledovaní chýb v reálnom čase v aplikácii React. Front-end aplikácia sa zvyčajne nepoužíva na sledovanie chýb. Niektoré spoločnosti často odkladajú sledovanie chýb, vracajú sa k nemu po dokumentácii, testoch atď. Ak však môžete zmeniť svoj produkt k lepšiemu, urobte to!
1. Prečo potrebujete Sentry?
Predpokladám, že máte záujem o sledovanie chýb počas výroby
Myslíte si, že to nestačí?
Dobre, pozrime sa na detaily.
Hlavné dôvody, prečo vývojári používajú Sentry:
- Umožňuje vyhnúť sa rizikám pri nasadzovaní kódu s chybami
- Pomôžte QA s testovaním kódu
- Dostávajte rýchle upozornenia na problémy
- Schopnosť rýchlo opraviť chyby
- Získanie pohodlného zobrazenia chýb na paneli správcu
- Zoraďte chyby podľa segmentu používateľa/prehliadača
Hlavné dôvody pre projekt CEO/vedúci
- Ušetrite peniaze (Sentry je možné nainštalovať na vaše servery)
- Získavanie spätnej väzby od používateľov
- Pochopenie toho, čo je na vašom projekte zlé v reálnom čase
- Pochopenie množstva problémov, ktoré majú ľudia s vašou aplikáciou
- Pomôžte vám nájsť miesta, kde vaši vývojári urobili chyby
Myslím, že vývojárov by tento článok najskôr zaujímal. Tento zoznam dôvodov môžete použiť aj na to, aby ste presvedčili svojho šéfa, aby integroval Sentry.
Buďte opatrní pri poslednej položke v obchodnom zozname.
Máte už záujem?
Čo je Sentry?
Sentry je open source aplikácia na sledovanie chýb, ktorá pomáha vývojárom sledovať a opravovať zlyhania v reálnom čase. Nezabudnite, že aplikácia vám umožňuje zvýšiť efektivitu a zlepšiť používateľskú skúsenosť. Sentry podporuje JavaScript, Node, Python, PHP, Ruby, Java a ďalšie programovacie jazyky.
2. Prihláste sa a vytvorte projekt
- Otvorte svoj účet Sentry. Možno sa budete musieť prihlásiť. (Upozorňujeme, že Sentry je možné nainštalovať na vaše servery)
- Ďalším krokom je vytvorenie projektu
- Vyberte svoj jazyk zo zoznamu. (Vyberieme možnosť Reagovať. Kliknite na „Vytvoriť projekt“)
Prispôsobte si aplikáciu. Základný príklad toho, ako integrovať Sentry do kontajnera, si môžete pozrieť nižšie:
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 má užitočného sprievodcu, ktorý vám pomôže zistiť, čo by ste mali robiť ďalej. Môžete postupovať podľa týchto krokov. Chcem vám ukázať, ako vytvoriť svoj prvý obslužný program chýb. Skvelé, vytvorili sme projekt! Prejdime k ďalšiemu kroku
3. Integrácia React a Sentry
Vo svojom projekte musíte nainštalovať balík npm.
npm i @sentry/browserInicializujte Sentry vo svojom kontajneri:
Sentry.init({
// dsn: #dsnUrl,
});DSN sa nachádza v Projects -> Settings -> Client Keys. Klientske kľúče nájdete vo vyhľadávacom paneli.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Sledovanie prvej chyby
Použil som napríklad jednoduchú hudobnú aplikáciu s Deezer API. Môžete to vidieť . Musíme vytvoriť chybu. Jedným zo spôsobov je prístup k vlastnosti „undefined“.
Musíme vytvoriť tlačidlo, ktoré volá konzola.log с user.email. Po tejto akcii by sme mali dostať chybové hlásenie: Uncaught TypeError (nemožno prečítať vlastnosť z nedefinovaného email) kvôli chýbajúcemu objektu používateľa. Môžete tiež použiť Výnimka Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Celý kontajner vyzerá takto:
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);Po integrácii tohto tlačidla by ste ho mali otestovať v prehliadači.
Máme tu prvú chybu
Hurá!
Ak kliknete na chybu hlavičky, uvidíte stopu zásobníka.
Správy vyzerajú zle. Samozrejme, videli sme chybové hlásenia bez toho, aby sme pochopili, kde je kód. Štandardne hovoríme o zdrojovej mape v ReactJS, pretože nie sú nakonfigurované.
Rád by som uviedol aj návod na nastavenie zdrojovej mapy, ale tým by bol tento článok oveľa dlhší, ako som zamýšľal.
Túto tému si môžete preštudovať . Ak vás tento článok zaujal, zverejní druhú časť o integrácii zdrojovej mapy. Takže dajte viac lajkov a prihláste sa na odber aby som nepremeškal druhú časť.
5. Použitie Hliadka s koncovým bodom API
OK. Výnimke javascriptu sme sa venovali v predchádzajúcich odsekoch. Čo však urobíme s chybami XHR?
Sentry má tiež vlastné spracovanie chýb. Použil som to na sledovanie chýb API.
Sentry.captureException(err)Môžete prispôsobiť názov chyby, úroveň, pridať údaje, jedinečné používateľské údaje pomocou aplikácie, e-mailu atď.
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));
}
});Chcel by som použiť všeobecnú funkciu pre rozhranie 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);
};Importujte túto funkciu do svojho volania 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));
}
});
};Pozrime sa na metódy:
- setLevel umožňuje vložiť chybu úrovne do ovládacieho panela hliadky. Má vlastnosti - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser pomáha ukladať akékoľvek používateľské údaje (id, e-mailová adresa, platobný plán atď.).
- setExtra umožňuje špecifikovať akékoľvek údaje, ktoré potrebujete, napríklad uložiť.
Ak chcete získať spätnú väzbu od používateľov o chybe, mali by ste použiť funkciu showReportDialog.
Sentry.showReportDialog();Záver:
Dnes sme opísali jeden spôsob, ako integrovať Sentry do aplikácie React.
→ Telegramový rozhovor od
Zdroj: hab.com