Hodiaŭ mi gvidos vin tra realtempa erarspurado en React-aplikaĵo. La fasanta aplikaĵo ne estas kutime uzata por spurado de eraroj. Iuj kompanioj ofte flankenlasas cimspuradon, revenante al ĝi post dokumentado, testoj ktp. Tamen, se vi povas ŝanĝi vian produkton por pli bone, tiam simple faru ĝin!
1. Kial vi bezonas Sentry?
Mi supozas, ke vi interesiĝas pri cimspurado dum produktado.
Ĉu vi pensas, ke ĉi tio ne sufiĉas?
Bone, ni rigardu la detalojn.
Ĉefaj Kialoj Uzi Sentry por Programistoj:
- Permesas vin forigi riskojn dum disfaldi kodon kun eraroj
- Helpu QA en koda testado
- Ricevu rapidajn sciigojn pri problemo
- Kapablo rapide ripari erarojn
- Akiri oportunan montradon de eraroj en la administra panelo
- Ordigi erarojn laŭ segmento de uzanto/retumilo
Ĉefaj kialoj por CEO / Ĉefprojekto
- Ŝparu monon (Sentry povas esti instalita sur viaj serviloj)
- Ricevu uzantajn komentojn
- Kompreni kio malbonas kun via projekto en reala tempo
- Kompreni la nombron da problemoj kiujn homoj havas kun via aplikaĵo
- Helpu trovi lokojn, kie viaj programistoj faris eraron
Mi pensas, ke la programistoj interesiĝus pri ĉi tiu artikolo unue. Vi ankaŭ povas uzi ĉi tiun liston de kialoj por konvinki vian estron integri Sentry.
Atentu pri la lasta ero en la komerca listo.
Ĉu vi jam interesiĝas?
Kio estas Sentry?
Sentry estas malfermfonta aplikaĵo por spuri erarojn, kiu helpas programistojn spuri kaj ripari kraŝojn en reala tempo. Ne forgesu, ke la aplikaĵo ankaŭ ebligas al vi pliigi efikecon kaj plibonigi la sperton de uzanto. Sentry subtenas JavaScript, Node, Python, PHP, Ruby, Java kaj aliajn programlingvojn.
2. Ensalutu kaj kreu projekton
- Malfermu vian Sentry-konton. Vi eble bezonos ensaluti. (Bonvolu noti, ke Sentry povas esti instalita sur viaj serviloj)
- La sekva paŝo estas krei projekton
- Elektu vian lingvon el la listo. (Ni elektos Reagi. Alklaku "Krei Projekton")
Agordu vian aplikon. Vi povas vidi bazan ekzemplon pri kiel integri Sentry en ujon sube:
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 havas helpeman sorĉiston por helpi vin kompreni kion vi devas fari poste. Vi povas sekvi la paŝojn sube. Mi volas montri al vi kiel krei vian unuan erartraktilon. Bonege, ni kreis projekton! Ni transiru al la sekva paŝo
3. Integrante React kaj Sentry
Vi devas instali la npm-pakaĵon en via projekto.
npm i @sentry/browserKomencu Sentry en via ujo:
Sentry.init({
// dsn: #dsnUrl,
});La DSN troviĝas en Projektoj -> Agordoj -> Kliento Ŝlosiloj. Vi povas trovi klientajn ŝlosilojn en la serĉbreto.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Spurado de la unua eraro
Ekzemple, mi uzis simplan muzikaplikon kun la Deezer API. Vi povas vidi ĝin . Ni devas krei eraron. Unu maniero estas aliri la "nedifinitan" posedaĵon
Ni devas krei butonon kiu vokas konzolo.log с uzanto.retpoŝto. Post ĉi tiu ago, ni devus ricevi erarmesaĝon: Nekaptita TypeError (ne povas legi posedaĵon de nedifinita email) pro la foresto de uzantobjekto. Vi ankaŭ povas uzi Javaskripto escepto.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>La tuta ujo aspektas jene:
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);Post integri ĉi tiun butonon, vi devus testi ĝin en la retumilo.
Ni havas nian unuan eraron
Ho-hu!
Se vi alklakas la kapan eraron, vi vidos la stakan spuron.
La mesaĝoj aspektas malbone. Kompreneble, ni vidis erarmesaĝojn sen kompreni kie estas ĉi tiu kodo. Defaŭlte temas pri fontmapo en ReactJS ĉar ili ne estas agorditaj.
Mi ankaŭ ŝatus doni instrukciojn por agordi la fontmapon, sed tio farus ĉi tiun afiŝon multe pli longa ol mi intencis.
Vi povas studi ĉi tiun temon . Se vi interesiĝas pri ĉi tiu artikolo, publikigos la duan parton pri fontmapa integriĝo. Do alklaku pli da ŝatoj kaj abonu por ne maltrafi la duan parton.
5. Uzado Gardisto kun finpunkto API
BONE. Ni kovris la javaskripto-escepton en la antaŭaj alineoj. Tamen, kion ni faras kun XHR-eraroj?
Gardostaranto ankaŭ havas kutiman erartraktadon. Mi uzis ĝin por api-spurado.
Sentry.captureException(err)Vi povas agordi la cimon nomon, nivelon, aldoni datumojn, unikajn uzantajn datumojn per via programo, retpoŝto, ktp.
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));
}
});Mi ŝatus uzi ĝeneralan funkcion por la 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);
};Importu ĉi tiun funkcion en api-voko.
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));
}
});
};Ni kontrolu la metodojn:
- setLevel permesas al vi enigi nivelan eraron en la gardostaran panelon. Ĝi havas ecojn - 'fatala', 'eraro', 'averto', 'programeto', 'informo, 'sencimigi', 'kritika').
- setUser helpas konservi ajnajn uzantajn datumojn (identigilon, retpoŝtadreson, pagplanon, ktp.).
- setExtra permesas al vi agordi ajnajn datumojn, kiujn vi bezonas, ekzemple vendejo.
Se vi volas komentojn de uzantoj pri cimo, vi devus uzi la funkcion showReportDialog.
Sentry.showReportDialog();Konkludo:
Hodiaŭ ni priskribis unu el la manieroj integri Sentry en React-aplikaĵon.
→ Telegram-babilado de
fonto: www.habr.com