Androany aho dia hilaza aminao momba ny fanaraha-maso diso amin'ny fotoana tena izy amin'ny fampiharana React. Ny fampiharana eo anoloana dia tsy ampiasaina matetika amin'ny fanaraha-maso lesoka. Matetika ny orinasa sasany dia manafoana ny fanaraha-maso ny bibikely, miverina any aorian'ny antontan-taratasy, fitsapana, sns. Na izany aza, raha afaka manova ny vokatrao ho tsara kokoa ianao, dia ataovy fotsiny izany!
1. Nahoana ianao no mila Sentry?
Heveriko fa mahaliana anao ny manara-maso ireo bibikely mandritra ny famokarana
Heverinao ve fa tsy ampy izany?
Okay, andeha hojerentsika ny antsipiriany.
Antony lehibe indrindra hampiasain'ny mpamorona ny Sentry:
- Mamela anao hisoroka ny risika rehefa mampiasa kaody misy hadisoana
- Ampio ny QA amin'ny fitsapana kaody
- Mahazoa fampandrenesana haingana momba ny olana
- Fahaizana manitsy haingana ny fahadisoana
- Mahazo fampisehoana mety amin'ny lesoka ao amin'ny tontonana admin
- Sokafy ny lesoka araka ny fizarana mpampiasa/mpitety
Ny antony lehibe amin'ny tetikasa CEO/Lead
- Mitahiry vola (azo apetraka amin'ny servero ny Sentry)
- Mahazoa hevitra avy amin'ny mpampiasa
- Fahatakarana ny tsy mety amin'ny tetikasanao amin'ny fotoana tena izy
- Fahatakarana ny isan'ny olana mahazo ny olona amin'ny fampiharanao
- Ampio ianao hahita toerana nanaovan'ny mpamorona anao fahadisoana
Heveriko fa ho liana amin'ity lahatsoratra ity aloha ny mpamorona. Azonao atao koa ny mampiasa ity lisitry ny antony handresena lahatra ny lehibenao hampiditra Sentry ity.
Mitandrema amin'ny singa farany amin'ny lisitry ny orinasa.
Efa liana ve ianao?
Inona no atao hoe Sentry?
Sentry dia rindranasa fanaraha-maso bibikely loharano misokatra izay manampy ny mpamorona hanara-maso sy hamaha ny fianjerana amin'ny fotoana tena izy. Aza adino fa ny fampiharana dia ahafahanao mampitombo ny fahaiza-manao sy manatsara ny traikefan'ny mpampiasa. Manohana JavaScript, Node, Python, PHP, Ruby, Java ary fiteny fandaharana hafa ny Sentry.
2. Midira ary mamorona tetikasa
- Sokafy ny kaonty Sentry anao. Mety tsy maintsy miditra ianao. (Mariho fa ny Sentry dia azo apetraka amin'ny lohamilinao)
- Ny dingana manaraka dia ny famoronana tetikasa
- Fidio ny fiteninao amin'ny lisitra. (Hisafidy ny React isika. Kitiho ny "Create Project")
Amboary ny fampiharanao. Ohatra iray amin'ny fomba fampidirana Sentry ao anaty container dia azo jerena eto ambany:
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 dia manana Wizard manampy anao hamantatra izay tokony hataonao manaraka. Azonao atao ny manaraka ireto dingana ireto. Te hasehoko anao ny fomba hamoronana ny mpandrindra fahadisoana voalohany anao. Tsara, namorona tetikasa izahay! Andao hiroso aminβny dingana manaraka
3. React and Sentry integration
Tsy maintsy mametraka ny fonosana npm amin'ny tetikasanao ianao.
npm i @sentry/browserAtombohy ny Sentry ao amin'ny fitoeranao:
Sentry.init({
// dsn: #dsnUrl,
});Ny DSN dia hita ao amin'ny Projects -> Settings -> Client Keys. Afaka mahita fanalahidin'ny mpanjifa ao amin'ny bara fitadiavana ianao.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Fanaraha-maso ny fahadisoana voalohany
Ohatra, nampiasa fampiharana mozika tsotra aho miaraka amin'ny Deezer API. Hitanao izany . Mila mamorona fahadisoana isika. Ny fomba iray dia ny fidirana amin'ny fananana "tsy voafaritra".
Mila mamorona bokotra miantso isika console.log Ρ user.email. Aorian'ity hetsika ity dia tokony hahazo hafatra diso isika: Uncaught TypeError (tsy afaka mamaky fananana avy amin'ny undefined email) noho ny zavatra tsy hita ny mpampiasa. Azonao ampiasaina koa Javascript exception.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Toy izao ny kaontenera manontolo:
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);Aorian'ny fampidirana ity bokotra ity dia tokony hizaha toetra azy amin'ny navigateur ianao.
Manana ny fahadisoanay voalohany izahay
Whoo-hoo!
Raha tsindrio eo amin'ny hadisoana amin'ny lohapejy ianao dia hahita trace stack.
Toa ratsy ny hafatra. Mazava ho azy fa nahita hafatra diso izahay nefa tsy nahatakatra hoe aiza ny kaody. Amin'ny alΓ lan'ny default dia miresaka momba ny sarintany loharano ao amin'ny ReactJS isika satria tsy voarindra.
Te-hanome torolalana amin'ny fametrahana ny sarintany loharano ihany koa aho, saingy izany dia hahatonga ity lahatsoratra ity ho lava kokoa noho izay nokasaiko.
Afaka mianatra ity lohahevitra ity ianao . Raha liana amin'ity lahatsoratra ity ianao, dia hamoaka ny ampahany faharoa momba ny fampidirana sarintany loharano. Noho izany, tsindrio ny j'aime bebe kokoa ary misoratra anarana mba tsy ho diso ny tapany faharoa.
5. Fampiasana mpiambina miaraka amin'ny teboka farany API
OK. Norakofanay tamin'ny andalana teo aloha ny exception javascript. Na izany aza, inona no hataontsika momba ny fahadisoana XHR?
Ny Sentry koa dia manana fikirakirana fahadisoana mahazatra. Nampiasa azy io aho hanaraha-maso ny lesoka api.
Sentry.captureException(err)Azonao atao ny mampifanaraka ny anaran'ny hadisoana, ny haavony, manampy angona, angon-drakitra mpampiasa tsy manam-paharoa amin'ny alΓ lan'ny fampiharanao, mailaka, sns.
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));
}
});Te-hampiasa fiasa ankapobeny ho an'ny API catch aho.
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);
};Ampidiro amin'ny antso apinao ity fiasa ity.
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));
}
});
};Andeha hojerentsika ny fomba:
- setLevel mamela anao hampiditra fahadisoana ambaratonga ao amin'ny dashboard mpiambina. Manana fananana - 'fatal', 'error', 'fanati-maso', 'log', 'info, 'debug', 'critical').
- setUser manampy amin'ny fitahirizana angon-drakitra mpampiasa (id, adiresy mailaka, drafitra fandoavam-bola, sns.).
- setExtra mamela anao hamaritra izay angona ilainao, ohatra, mitahiry.
Raha te hahazo tamberin'ny mpampiasa momba ny bibikely ianao dia tokony hampiasa ny asa showReportDialog.
Sentry.showReportDialog();famaranana:
Androany dia nanoritsoritra fomba iray hampidirana an'i Sentry amin'ny fampiharana React izahay.
β Telegram chat amin'ny
Source: www.habr.com