Haut wäert ech Iech soen iwwer Echtzäit Feeler Tracking an enger React Applikatioun. Eng Front-End Applikatioun gëtt net typesch fir Feeler Tracking benotzt. E puer Firmen stellen dacks Bug Tracking of, kommen zréck no Dokumentatioun, Tester, etc. Wéi och ëmmer, wann Dir Äert Produkt zum bessere kënnt änneren, da maacht et einfach!
1. Firwat braucht Dir Sentry?
Ech huelen un datt Dir interesséiert sidd fir Bugs während der Produktioun ze verfolgen
Mengt Dir dat ass net genuch?
Okay, loosst eis d'Detailer kucken.
Top Grënn fir Entwéckler Sentry ze benotzen:
- Erlaabt Iech Risiken ze vermeiden wann Dir Code mat Feeler ofsetzt
- Hëllef QA mat Code Testen
- Kritt séier Notifikatiounen iwwer Probleemer
- D'Kapazitéit fir séier Feeler ze korrigéieren
- Kritt e praktesche Display vu Feeler am Admin Panel
- Zortéieren Feeler vum Benotzer / Browser Segment
Haaptgrënn fir CEO / Lead Projet
- Spuert Suen (Sentry kann op Äre Server installéiert ginn)
- Benotzer Feedback kréien
- Verstinn wat falsch mat Ärem Projet an Echtzäit ass
- D'Zuel vun de Probleemer déi d'Leit mat Ärer App hunn ze verstoen
- Hëlleft Iech Plazen ze fannen wou Är Entwéckler Feeler gemaach hunn
Ech denken, datt d'Entwéckler als éischt un dësem Artikel interesséiert sinn. Dir kënnt och dës Lëscht vu Grënn benotzen fir Äre Chef ze iwwerzeegen Sentry z'integréieren.
Sidd virsiichteg mam leschte Punkt op der Geschäftslëscht.
Sidd Dir schonn interesséiert?
Wat ass Sentry?
Sentry ass eng Open Source Bug Tracking Applikatioun déi Entwéckler hëlleft Crashen an Echtzäit ze verfolgen an ze fixéieren. Vergiesst net datt d'Applikatioun Iech erlaabt d'Effizienz ze erhéijen an d'Benotzererfarung ze verbesseren. Sentry ënnerstëtzt JavaScript, Node, Python, PHP, Ruby, Java an aner Programméierungssproochen.
2. Login a schafen e Projet
- Öffnen Äre Sentry Kont. Dir musst Iech vläicht aloggen. (Notéiert w.e.g. datt Sentry op Äre Server installéiert ka ginn)
- De nächste Schrëtt ass e Projet ze kreéieren
- Wielt Är Sprooch aus der Lëscht. (Mir wäerte reagéieren. Klickt op "Projet erstellen")
Personnaliséiert Är Applikatioun. E Basis Beispill vu wéi Dir Sentry an e Container integréiert kann hei ënnen gesi ginn:
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 huet en hëllefräichen Wizard fir Iech ze hëllefen erauszefannen wat Dir duerno maache sollt. Dir kënnt dës Schrëtt verfollegen. Ech wëll Iech weisen wéi Dir Ären éischte Fehlerhandter erstellt. Super, mir hunn e Projet erstallt! Loosst eis op den nächste Schrëtt weidergoen
3. Reagéieren an Sentry Integratioun
Dir musst den npm Package an Ärem Projet installéieren.
npm i @sentry/browserInitialiséiere Sentry an Ärem Container:
Sentry.init({
// dsn: #dsnUrl,
});Den DSN ass an Projects -> Settings -> Client Keys. Dir kënnt Clientschlësselen an der Sichbar fannen.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Tracking den éischte Feeler
Zum Beispill hunn ech eng einfach Museksapplikatioun mat der Deezer API benotzt. Dir kënnt et gesinn . Mir mussen e Feeler erstellen. Ee Wee ass Zougang zu der "ondefinéiert" Eegeschafte
Mir mussen e Knäppchen erstellen deen rifft console.log с user.email. No dëser Aktioun sollte mir eng Fehlermeldung kréien: Uncaught TypeError (kann d'Eegeschafte vun ondefinéiert net liesen email) wéinst vermësst Benotzer Objet. Dir kënnt och benotzen Javascript Ausnam.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>De ganze Container gesäit esou aus:
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);Nodeems Dir dëse Knäppchen integréiert hutt, sollt Dir et am Browser testen.
Mir hunn eisen éischte Feeler
Whoo-hoo!
Wann Dir op den Headerfehler klickt, gesitt Dir e Stack Trace.
D'Messagen kucken schlecht. Natierlech hu mir Fehlermeldungen gesinn ouni ze verstoen wou de Code ass. Par défaut schwätze mir iwwer d'Quellkaart am ReactJS well se net konfiguréiert sinn.
Ech wéilt och Instruktioune ginn fir d'Quellkaart opzestellen, awer dat géif dësen Artikel vill méi laang maachen wéi ech geduecht hunn.
Dir kënnt dëst Thema studéieren . Wann Dir un dësem Artikel interesséiert sidd, wäert den zweeten Deel iwwer Quell Kaart Integratioun publizéieren. Also, schloen méi Likes an abonnéiert Iech op fir den zweeten Deel net ze verpassen.
5. Benotzung Sentry mat Ennpunkt API
OK. Mir hunn d'Javascript Ausnam an de fréiere Paragrafen ofgedeckt. Wéi och ëmmer, wat maache mir iwwer XHR Feeler?
Sentry huet och personaliséiert Fehlerhandhabung. Ech hunn et benotzt fir API Feeler ze verfolgen.
Sentry.captureException(err)Dir kënnt de Feelernumm, den Niveau personaliséieren, Daten addéieren, eenzegaarteg Benotzerdaten mat Ärer Applikatioun, E-Mail, 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));
}
});Ech wéilt eng generesch Funktioun fir de Fang API benotzen.
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 dës Funktioun an Ärem API Uruff.
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));
}
});
};Loosst eis d'Methoden iwwerpréiwen:
- setLevel erlaabt Iech e Niveaufehler an de Sentry-Dashboard anzeginn. Et huet Eegeschaften - 'fatal', 'Feeler', 'Warnung', 'Log', 'Info, 'Debug', 'kritesch').
- setUser hëlleft all Benotzerdaten ze späicheren (ID, E-Mailadress, Bezuelungsplang, asw.).
- setExtra erlaabt Iech all Donnéeën ze uginn Dir braucht, Zum Beispill, Buttek.
Wann Dir Benotzer Feedback iwwer e Feeler wëllt kréien, sollt Dir d'showReportDialog Funktioun benotzen.
Sentry.showReportDialog();Fazit:
Haut hu mir ee Wee beschriwwe fir Sentry an eng React Applikatioun z'integréieren.
→ Telegram Chat vum
Source: will.com