Kajeno ke tla u joetsa ka ho latedisa liphoso tsa nako ea nnete ho sesebelisoa sa React. Sesebelisoa se ka pele ha se sebelisoe hangata bakeng sa ho latela liphoso. Lik'hamphani tse ling hangata li emisa ho latela lits'oants'o, li khutlela ho eona kamora litokomane, liteko, joalo-joalo. Leha ho le joalo, haeba u ka fetola sehlahisoa sa hau hore se be betere, se etse feela!
1. Ke hobane'ng ha u hloka Sentry?
Ke nahana hore o na le thahasello ea ho latela litšitšili nakong ea tlhahiso
Na u nahana hore see ha sea lekana?
Ho lokile, ha re shebeng lintlha.
Mabaka a holimo a hore bahlahisi ba sebelise Sentry:
- E o lumella ho qoba likotsi ha o tsamaisa khoutu e nang le liphoso
- Thusa QA ka tlhahlobo ea khoutu
- Fumana litsebiso tse potlakileng mabapi le mathata
- Bokhoni ba ho lokisa liphoso kapele
- Ho fumana pontšo e bonolo ea liphoso ho phanele ea admin
- Hlopha liphoso ka karolo ea mosebelisi/sebatli
Mabaka a mantlha a morero oa CEO/Lead
- Boloka chelete (Sentry e ka kenngoa ho li-server tsa hau)
- Ho fumana maikutlo a basebelisi
- Ho utloisisa se phoso ka projeke ea hau ka nako ea nnete
- Ho utloisisa palo ea mathata ao batho ba nang le ona ka sesebelisoa sa hau
- Thusa ho fumana libaka tseo baetsi ba hau ba entseng liphoso ho tsona
Ke nahana hore bahlahisi ba ka thahasella sengoloa sena pele. U ka sebelisa lethathamo lena la mabaka ho kholisa mookameli oa hau ho kopanya Sentry.
Ela hloko ntho ea ho qetela lethathamong la khoebo.
A na u se u ntse u thahasella?
Sentry ke eng?
Sentry ke sesebelisoa se bulehileng sa ho latela bug se thusang bahlahisi ho lekola le ho lokisa likotsi ka nako ea nnete. Se ke oa lebala hore sesebelisoa se u lumella ho eketsa ts'ebetso le ho ntlafatsa boiphihlelo ba mosebelisi. Sentry e tšehetsa JavaScript, Node, Python, PHP, Ruby, Java le lipuo tse ling tsa lenaneo.
2. Kena 'me u thehe morero
- Bula akhaonto ea hau ea Sentry. U ka tlameha ho kena. (Ka kopo hlokomela hore Sentry e ka kenngoa ho li-server tsa hau)
- Mohato o latelang ke ho theha morero
- Khetha puo ea hau lethathamong. (Re tla khetha React. Tobetsa "Create Project").
Iketsetse kopo ea hau. Mohlala oa mantlha oa mokhoa oa ho kopanya Sentry ka har'a setshelo o ka bonoa ka tlase:
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 e na le Wizard e thusang ho u thusa ho tseba hore na u lokela ho etsa eng kamora moo. U ka latela mehato ena. Ke batla ho u bontša mokhoa oa ho theha sesebelisoa sa hau sa pele sa liphoso. E kholo, re thehile morero! Ha re feteleng mohatong o latelang
3. React le Sentry kopanyo
U tlameha ho kenya sephutheloana sa npm morerong oa hau.
npm i @sentry/browserQala Sentry ka har'a setshelo sa hau:
Sentry.init({
// dsn: #dsnUrl,
});DSN e fumaneha ho Projects -> Settings -> Client Keys. U ka fumana linotlolo tsa bareki bareng ea ho batla.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ho latela phoso ea pele
Mohlala, ke sebelisitse sesebelisoa sa mmino se bonolo ka Deezer API. O ka e bona . Re hloka ho etsa phoso. Tsela e 'ngoe ke ho fihlella thepa "e sa hlalosoang".
Re hloka ho theha konopo e letsetsang console.log с user.imeile. Ka mor'a ketso ena re lokela ho fumana molaetsa oa phoso: Uncaught TypeError (ha e khone ho bala thepa ho tsoa ho undefined email) ka lebaka la sesebediswa se sieo. U ka boela ua sebelisa Mokhelo oa Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Thepa eohle e shebahala tjena:
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);Kamora ho kopanya konopo ena, o lokela ho e leka ho sebatli.
Re na le phoso ea rona ea pele
Whoo-hoo!
Haeba u tobetsa phoso ea hlooho, u tla bona mohlala oa stack.
Melaetsa e shebahala e le mpe. Ke 'nete hore re bone melaetsa ea liphoso ntle le ho utloisisa hore na khoutu e hokae. Ka mokhoa o ikhethileng re bua ka 'mapa oa mohloli ho ReactJS hobane ha o hlophisitsoe.
Ke kopa hape ho fana ka litaelo tsa ho theha 'mapa oa mohloli, empa seo se ka etsa hore sengoloa sena se be telele ho feta kamoo ke neng ke rerile.
U ka ithuta sehlooho sena . Haeba u thahasella sengoloa sena, e tla phatlalatsa karolo ea bobeli mabapi le kopanyo ea 'mapa oa mohloli. Kahoo, otla tse ling tse ratoang 'me u ingolise ho tsona e le hore u se ke ua fetoa ke karolo ea bobeli.
5. Tšebeliso Sentry ka ntlha ya bofelo API
HO LOKILE. Re kentse mokhelo oa javascript lirapeng tse fetileng. Leha ho le joalo, re tla etsa eng ka liphoso tsa XHR?
Sentry e boetse e na le ho sebetsana le liphoso tsa tloaelo. Ke e sebelisitse ho latela liphoso tsa api.
Sentry.captureException(err)O ka etsa lebitso la phoso, boemo, eketsa data, data e ikhethang ea mosebelisi o sebelisa sesebelisoa sa hau, lengolo-tsoibila, joalo-joalo.
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));
}
});Ke kopa ho sebelisa tšebetso e akaretsang bakeng sa ho tšoasa 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);
};Kenya tšebetso ena ho api call ea hau.
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));
}
});
};A re hlahlobeng mekhoa:
- setLevel e o lumella ho kenya phoso ea boemo ho dashboard ea balebeli. E na le litšobotsi - 'fatal', 'error', 'temoso', 'log', 'info,' debug', 'critical').
- setUser e thusa ho boloka data efe kapa efe ea mosebelisi (id, aterese ea lengolo-tsoibila, moralo oa tefo, jj.).
- setExtra e u lumella ho hlakisa data efe kapa efe eo u e hlokang, mohlala, boloka.
Haeba u batla ho fumana maikutlo a basebelisi mabapi le phoso, u lokela ho sebelisa mosebetsi oa showReportDialog.
Sentry.showReportDialog();Qetello:
Kajeno re hlalositse mokhoa o le mong oa ho kopanya Sentry ho sesebelisoa sa React.
→ Puisano ea thelekramo ka
Source: www.habr.com