Hjoed sil ik jo liede troch it folgjen fan realtime flaters yn in React-app. De frontend-applikaasje wurdt normaal net brûkt foar bug tracking. Guon bedriuwen sette faak bug tracking oan 'e kant, werom nei dokumintaasje, tests, ensfh. As jo lykwols jo produkt kinne feroarje foar it better, doch it dan gewoan!
1. Wêrom hawwe jo Sentry nedich?
Ik nim oan dat jo ynteressearre binne yn bug tracking tidens produksje.
Tinksto dat dit net genôch is?
Okee, litte wy nei de details sjen.
Top redenen om Sentry te brûken foar ûntwikkelders:
- Stelt jo yn steat om risiko's kwyt te reitsjen by it ynsetten fan koade mei flaters
- Help QA yn koade testen
- Krij rappe probleemnotifikaasjes
- Mooglikheid om flaters fluch te reparearjen
- In handige werjefte fan flaters krije yn it adminpaniel
- Sortearje flaters op brûker / browser segment
Main redenen foar CEO / Lead projekt
- Besparje jild (Sentry kin wurde ynstalleare op jo servers)
- Krij feedback fan brûkers
- Begryp wat der mis is mei jo projekt yn realtime
- Begryp fan it oantal problemen dy't minsken hawwe mei jo app
- Help by it finen fan plakken wêr't jo ûntwikkelders in flater makken
Ik tink dat de ûntwikkelders op it earste plak ynteressearje yn dit artikel. Jo kinne ek dizze list mei redenen brûke om jo baas te oertsjûgjen om Sentry te yntegrearjen.
Wês foarsichtich mei it lêste item op 'e bedriuwslist.
Binne jo al ynteressearre?
Wat is Sentry?
Sentry is in iepen boarne bug tracking-applikaasje dy't ûntwikkelders helpt crashes yn realtime te folgjen en te reparearjen. Ferjit net dat de app jo ek kinne effisjinsje ferheegje en brûkersûnderfining ferbetterje. Sentry stipet JavaScript, Node, Python, PHP, Ruby, Java en oare programmeartalen.
2. Oanmelde en meitsje in projekt
- Iepenje jo Sentry-akkount. Jo moatte miskien oanmelde. (Tink derom dat Sentry kin wurde ynstalleare op jo servers)
- De folgjende stap is it meitsjen fan in projekt
- Selektearje jo taal út de list. (Wy sille React kieze. Klik op "Projekt oanmeitsje")
Stel jo applikaasje yn. Jo kinne hjirûnder in basisfoarbyld sjen fan hoe't jo Sentry yn in kontener yntegrearje kinne:
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 hat in nuttige wizard om jo te helpen begripe wat jo folgjende moatte dwaan. Jo kinne de stappen hjirûnder folgje. Ik wol jo sjen litte hoe't jo jo earste flaterhanneler meitsje kinne. Geweldich, wy hawwe in projekt makke! Litte wy nei de folgjende stap gean
3. Yntegraasje fan React en Sentry
Jo moatte it npm-pakket yn jo projekt ynstallearje.
npm i @sentry/browserInisjalisearje Sentry yn jo kontener:
Sentry.init({
// dsn: #dsnUrl,
});De DSN leit yn Projekten -> Ynstellings -> Client Keys. Jo kinne kliïntkaaien fine yn 'e sykbalke.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Tracking de earste flater
Bygelyks, ik brûkte in ienfâldige muzykapplikaasje mei de Deezer API. Jo kinne it sjen . Wy moatte in flater meitsje. Ien manier is om tagong te krijen ta de "undefined" eigenskip
Wy moatte in knop meitsje dy't ropt konsole log с user.email. Nei dizze aksje moatte wy in flaterberjocht krije: Uncaught TypeError (kin eigendom net lêze fan undefiniearre email) fanwege it ûntbrekken fan in brûker objekt. Jo kinne ek brûke javascript útsûndering.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>De hiele kontener sjocht der sa út:
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);Nei it yntegrearjen fan dizze knop, moatte jo it testen yn 'e browser.
Wy hawwe ús earste flater
Whoo-hoe!
As jo op 'e koptekstflater klikke, sille jo it stapelspoar sjen.
De berjochten sjogge der min út. Fansels hawwe wy flaterberjochten sjoen sûnder te begripen wêr't dizze koade is. Standert giet it oer boarnekaart yn ReactJS, om't se net binne konfigureare.
Ik wol ek ynstruksjes jaan foar it opsetten fan de boarnekaart, mar dat soe dizze post in stik langer meitsje as ik fan doel wie.
Jo kinne dit ûnderwerp studearje . As jo ynteressearre binne yn dit artikel, sil publisearje it twadde diel oer boarne map yntegraasje. Klik dus op mear likes en abonnearje op it twadde diel net te missen.
5. Gebrûk Sentry mei einpunt API
OK. Wy hawwe de javascript-útsûndering behannele yn 'e foarige paragrafen. Wat dogge wy lykwols mei XHR-flaters?
Sentry hat ek oanpaste flater ôfhanneling. Ik brûkte it foar api bug tracking.
Sentry.captureException(err)Jo kinne de bugnamme, nivo oanpasse, gegevens tafoegje, unike brûkersgegevens fia jo app, e-post, ensfh.
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));
}
});Ik soe graach brûke in generike funksje foar de 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);
};Ymportearje dizze funksje yn api-oprop.
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));
}
});
};Litte wy de metoaden kontrolearje:
- setLevel kinne jo ynfoegje in nivo flater yn de sentry dashboard. It hat eigenskippen - 'fataal', 'flater', 'warskôging', 'log', 'ynfo, 'debug', 'kritysk').
- setUser helpt om alle brûkersgegevens te bewarjen (id, e-mailadres, betellingsplan, ensfh.).
- setExtra kinne jo ynstelle alle gegevens dy't jo nedich hawwe, Bygelyks, in winkel.
As jo feedback fan brûkers wolle oer in brek, moatte jo de showReportDialog-funksje brûke.
Sentry.showReportDialog();Fermelding:
Hjoed hawwe wy ien fan 'e manieren beskreaun om Sentry te yntegrearjen yn in React-applikaasje.
→ Telegram petear troch
Boarne: www.habr.com