Nhasi ini ndichakuudza nezve chaiyo-nguva yekukanganisa yekutevera muReact application. Iyo yekumberi-yekupedzisira application haiwanzo kushandiswa pakutevera kukanganisa. Mamwe makambani anowanzo kumisa kutevedza bug, kudzokera kwairi mushure mezvinyorwa, bvunzo, nezvimwe. Zvisinei, kana iwe uchikwanisa kushandura chigadzirwa chako kuti ive nani, saka ingoita!
1. Sei uchida Sentry?
Ini ndinofungidzira iwe unofarira kuronda tsikidzi panguva yekugadzira
Unofunga kuti izvi hazvina kukwana here?
Zvakanaka, ngatitarisei pane zvakadzama.
Zvikonzero zvepamusoro zvevagadziri vekushandisa Sentry:
- Inokutendera kuti udzivise njodzi paunenge uchitumira kodhi ine zvikanganiso
- Batsira QA nekuongorora kodhi
- Gamuchira zviziviso nekukurumidza nezvematambudziko
- Kugona kukurumidza kugadzirisa zvikanganiso
- Kuwana kuratidzwa kuri nyore kwezvikanganiso mune admin panel
- Ronga zvikanganiso nechikamu chemushandisi/browser
Zvikonzero zvikuru zve CEO / Lead project
- Sevha mari (Sentry inogona kuiswa pamaseva ako)
- Kuwana mhinduro yemushandisi
- Kunzwisisa kuti chii chakaipa neprojekti yako munguva chaiyo
- Kunzwisisa huwandu hwematambudziko vanhu vane app yako
- Batsira iwe kutsvaga nzvimbo uko vagadziri vako vakakanganisa
Ndinofunga vanogadzira vangafarira chinyorwa ichi kutanga. Iwe unogona zvakare kushandisa iyi runyorwa rwezvikonzero kugonesa mukuru wako kuti abatanidze Sentry.
Ngwarira chinhu chekupedzisira pane bhizinesi rondedzero.
Unotofarira here?
Chii chinonzi Sentry?
Sentry ndeye yakavhurika sosi bug yekutevera application iyo inobatsira vanogadzira kutevedzera uye kugadzirisa tsaona munguva chaiyo. Usakanganwa kuti iyo application inokutendera iwe kuti uwedzere kushanda nesimba uye kugadzirisa mushandisi ruzivo. Sentry inotsigira JavaScript, Node, Python, PHP, Ruby, Java uye mimwe mitauro yekuronga.
2. Pinda uye gadzira chirongwa
- Vhura yako Sentry account. Unogona kupinda. (Ndokumbira utarise kuti Sentry inogona kuiswa pamaseva ako)
- Nhanho inotevera ndeyekugadzira chirongwa
- Sarudza mutauro wako kubva pamazita. (Tichasarudza React. Dzvanya "Gadzira Chirongwa").
Gadzirisa application yako. Muenzaniso wekutanga wekubatanidza Sentry mumudziyo unogona kuoneka pazasi:
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 ine Wizard inobatsira kuti ikubatsire kuona zvaunofanira kuita zvinotevera. Unogona kutevera matanho aya. Ini ndoda kukuratidza maitiro ekugadzira yako yekutanga kukanganisa kubata. Zvakanaka, takagadzira chirongwa! Ngatienderere mberi kune nhanho inotevera
3. React uye Sentry kubatanidzwa
Iwe unofanirwa kuisa iyo npm package muprojekiti yako.
npm i @sentry/browserTanga Sentry mumudziyo wako:
Sentry.init({
// dsn: #dsnUrl,
});Iyo DSN iri muProjekti -> Zvirongwa -> Client Keys. Unogona kuwana makiyi evatengi mubhaa yekutsvaga.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Kutsvaga kukanganisa kwekutanga
Semuenzaniso, ndakashandisa iri nyore mimhanzi application neDeezer API. Unogona kuzviona . Tinofanira kugadzira chikanganiso. Imwe nzira ndeyekuwana iyo "undefined" pfuma
Tinofanira kugadzira bhatani rinofona console.log Ρ user.email. Mushure mekuita uku tinofanirwa kugamuchira meseji yekukanganisa: Uncaught TypeError (haigone kuverenga chivakwa kubva kune undefined email) nekuda kwekushaikwa kwemushandisi chinhu. Unogonawo kushandisa Javascript kunze.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Chigadziko chose chinotaridzika seizvi:
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);Mushure mekubatanidza bhatani iri, unofanirwa kuriyedza mubrowser.
Tine kukanganisa kwedu kwekutanga
Whoo-hoo!
Kana ukadzvanya pane header kukanganisa, uchaona stack trace.
Iwo mameseji anotaridzika zvakaipa. Chokwadi takaona mameseji ekukanganisa tisinganzwisise kuti code iripi. Nekumisikidza tiri kutaura nezve mepu yekubva muReactJS nekuti haina kugadzirwa.
Ndinodawo kupa mirairo yekumisikidza iyo mepu, asi izvo zvinoita kuti chinyorwa ichi chirebe kupfuura zvandaifunga.
Unogona kudzidza nyaya iyi . Kana uchifarira chinyorwa ichi, ichaburitsa chikamu chechipiri nezve kubatanidzwa kwemepu. Saka, hit more likes uye nyoresa kuitira kuti usapotsa chikamu chechipiri.
5. Kushandisa musoja nenzvimbo yekupedzisira API
OK. Isu takafukidza iyo javascript kusarudzika mundima dzapfuura. Nekudaro, tichaitei nezve XHR zvikanganiso?
Sentry zvakare ine tsika yekukanganisa kubata. Ndakaishandisa kuronda zvikanganiso zveapi.
Sentry.captureException(err)Iwe unogona kugadzirisa zita rekukanganisa, nhanho, wedzera data, yakasarudzika mushandisi data uchishandisa yako application, email, nezvimwe.
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));
}
});Ndinoda kushandisa generic basa rekubata 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);
};Ngenisa basa iri mune yako api kufona.
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));
}
});
};Ngatitarisei nzira:
- setLevel inokutendera kuti uise chikanganiso chenhanho mudhidhibhodhi yevarindiri. Iine zvimiro - 'inouraya', 'kukanganisa', 'yambiro', 'log', 'info, 'debug', 'critical').
- setUser inobatsira kuchengetedza chero data remushandisi (id, email kero, chirongwa chekubhadhara, nezvimwewo).
- setExtra inokubvumira kuti utaure chero data yaunoda, semuenzaniso, chengeta.
Kana iwe uchida kuwana mhinduro yemushandisi nezve bug, unofanirwa kushandisa iyo showReportDialog basa.
Sentry.showReportDialog();Mhedziso:
Nhasi takatsanangura imwe nzira yekubatanidza Sentry muReact application.
β Teregiramu chat by
Source: www.habr.com