Ma a React alkalmazás valós idejű hibakövetéséről fogok beszélni. A front-end alkalmazásokat általában nem használják hibakövetésre. Egyes cégek gyakran halogatják a hibakövetést, és visszatérnek hozzá a dokumentáció, tesztek stb. után. Ha azonban meg tudja változtatni a termékét, akkor tegye meg!
1. Miért van szüksége a Sentry-re?
Feltételezem, hogy érdekli a hibák nyomon követése a gyártás során
Ön szerint ez nem elég?
Oké, nézzük a részleteket.
A fejlesztők legfőbb okai a Sentry használatának:
- Lehetővé teszi a kockázatok elkerülését, amikor hibás kódot telepít
- Segítség a minőségbiztosításnak a kódtesztelésben
- Gyors értesítéseket kaphat a problémákról
- A hibák gyors kijavításának képessége
- A hibák kényelmes megjelenítése az adminisztrációs panelen
- A hibák rendezése felhasználói/böngészőszegmens szerint
A vezérigazgató/vezető projekt fő okai
- Pénzt takaríthat meg (a Sentry telepíthető a szervereire)
- Felhasználói visszajelzések fogadása
- Valós időben érteni, mi a probléma a projekttel
- Az alkalmazással kapcsolatos problémák számának megértése
- Segít megtalálni azokat a helyeket, ahol a fejlesztők hibáztak
Szerintem a fejlesztőket először ez a cikk érdekelné. Az okok ezen listáját arra is felhasználhatja, hogy meggyőzze főnökeit a Sentry integrációjáról.
Legyen óvatos az üzleti lista utolsó elemével.
Érdekel már?
Mi az a Sentry?
A Sentry egy nyílt forráskódú hibakövető alkalmazás, amely segít a fejlesztőknek valós időben követni és kijavítani az összeomlásokat. Ne felejtse el, hogy az alkalmazás lehetővé teszi a hatékonyság növelését és a felhasználói élmény javítását. A Sentry támogatja a JavaScript, Node, Python, PHP, Ruby, Java és más programozási nyelveket.
2. Jelentkezzen be, és hozzon létre egy projektet
- Nyissa meg Sentry fiókját. Lehet, hogy be kell jelentkeznie. (Kérjük, vegye figyelembe, hogy a Sentry telepíthető a szervereire)
- A következő lépés egy projekt létrehozása
- Válassza ki a nyelvet a listából. (A React lehetőséget fogjuk kiválasztani. Kattintson a "Projekt létrehozása" gombra)
Szabja személyre az alkalmazást. Az alábbiakban egy alapvető példa látható a Sentry konténerbe történő integrálására:
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;
}
}
}A Sentry egy hasznos varázslóval rendelkezik, amely segít kitalálni, mit kell tennie a következő lépésben. Kövesse ezeket a lépéseket. Szeretném megmutatni, hogyan hozhatja létre az első hibakezelőt. Remek, létrehoztunk egy projektet! Térjünk át a következő lépésre
3. React és Sentry integráció
Telepítenie kell az npm csomagot a projektben.
npm i @sentry/browserA Sentry inicializálása a tárolóban:
Sentry.init({
// dsn: #dsnUrl,
});A DSN a Projektek -> Beállítások -> Klienskulcsok alatt található. Az ügyfélkulcsokat a keresősávban találhatja meg.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Az első hiba követése
Például egy egyszerű zenei alkalmazást használtam a Deezer API-val. Láthatod . Hibát kell létrehoznunk. Az egyik módja az "undefined" tulajdonság elérése
Létre kell hoznunk egy gombot, amely hív konzol.napló с user.email. A művelet után hibaüzenetet kell kapnunk: Uncaught TypeError (nem olvasható a tulajdonság az undefined email) hiányzó felhasználói objektum miatt. Használhatod is Javascript kivétel.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>A teljes konténer így néz ki:
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);A gomb integrálása után érdemes tesztelni a böngészőben.
Megvan az első hiba
Hú-hú!
Ha a fejléc hibájára kattint, megjelenik egy veremnyom.
Rosszul néznek ki az üzenetek. Természetesen láttunk hibaüzeneteket anélkül, hogy megértettük volna, hol van a kód. Alapértelmezés szerint a ReactJS forrásleképezéséről beszélünk, mert nincsenek konfigurálva.
Szeretnék útmutatást adni a forrástérkép beállításához is, de így ez a cikk sokkal hosszabb lenne, mint terveztem.
Tanulmányozhatja ezt a témát . Ha érdekel ez a cikk, közzéteszi a második részt a forrástérkép-integrációról. Szóval nyomj még több lájkot és iratkozz fel hogy ne maradjon le a második részről.
5. Használat Őrszem végponttal API
RENDBEN. A JavaScript kivételével az előző bekezdésekben foglalkoztunk. De mit tegyünk az XHR hibákkal?
A Sentry egyéni hibakezeléssel is rendelkezik. Az api hibák nyomon követésére használtam.
Sentry.captureException(err)Testreszabhatja a hiba nevét, szintjét, hozzáadhat adatokat, egyedi felhasználói adatokat az alkalmazás, e-mail stb. használatával.
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));
}
});Egy általános függvényt szeretnék használni a catch API-hoz.
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);
};Importálja ezt a függvényt az API-hívásba.
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));
}
});
};Nézzük a módszereket:
- setLevel lehetővé teszi egy szinthiba beszúrását az őrszem műszerfalába. Tulajdonságai vannak – 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'kritikus').
- setUser segít elmenteni a felhasználói adatokat (azonosító, e-mail cím, fizetési terv, stb.).
- setExtra lehetővé teszi bármilyen szükséges adat megadását, például tárolást.
Ha felhasználói visszajelzést szeretne kapni egy hibáról, használja a showReportDialog funkciót.
Sentry.showReportDialog();Következtetés:
Ma ismertettük a Sentry React alkalmazásba való integrálásának egyik módját.
→ Telegram chat by
Forrás: will.com