O le asō o le a ou taʻuina atu ia te oe le suʻeina o mea sese i le taimi moni i se React application. O se talosaga pito i luma e le masani ona fa'aogaina mo le siakiina o mea sese. O nisi kamupani e masani ona tuʻu ese le siakiina o pusa, toe foʻi i ai pe a maeʻa faʻamaumauga, suʻega, ma isi. Ae peitaʻi, afai e mafai ona e suia lau oloa mo le lelei, ona fai lea!
1. Aisea e te manaʻomia ai le Sentry?
Ou te manatu e te fiafia i le siakiina o bug i le taimi o le gaosiga
E te manatu e le lava lea mea?
Lelei, se'i o tatou va'ai i fa'amatalaga.
O mafuaʻaga sili mo tagata atiaʻe e faʻaaoga ai le Sentry:
- Fa'ataga oe e aloese mai fa'alavelave pe a fa'apipi'i fa'ailoga ma mea sese
- Fesoasoani ile QA ile su'ega ole code
- Maua faʻamatalaga vave e uiga i faʻafitauli
- Mafai e vave faasa'o mea sese
- Maua se faʻaaliga faigofie o mea sese i le admin panel
- Fa'avasega mea sese ile vaega ole tagata fa'aoga/su'esu'e
Mafuaaga autu mo le Pule Sili/Ta'ita'i poloketi
- Fa'asao tupe (E mafai ona fa'apipi'i le Sentri i au 'au'aunaga)
- Mauaina o finagalo faaalia o tagata faaaoga
- Malamalama i le mea o loʻo faʻaletonu i lau poloketi ile taimi moni
- Malamalama i le numera o faʻafitauli o loʻo i ai tagata i lau app
- Fesoasoani ia te oe e su'e nofoaga na faia ai mea sese a au atia'e
Ou te manatu o le a fiafia le au atinaʻe i lenei tusiga muamua. E mafai foi ona e faʻaogaina lenei lisi o mafuaʻaga e faʻamaonia ai lou pule e tuʻufaʻatasia le Sentry.
Fa'aeteete i mea mulimuli i le lisi o pisinisi.
Ua uma ona e fiafia?
O le a le Sentry?
O le Sentry o se faʻamatalaga mataʻituina o pusa punaʻoa e fesoasoani i tagata atiaʻe e siaki ma faʻaleleia faʻalavelave i le taimi moni. Aua nei galo o le talosaga e mafai ai ona e faʻateleina le lelei ma faʻaleleia le poto masani o tagata. E lagolagoina e Sentry le JavaScript, Node, Python, PHP, Ruby, Java ma isi gagana polokalame.
2. Ulufale ma fai se poloketi
- Tatala lau Sentry account. Atonu e tatau ona e ulufale i totonu. (Faamolemole ia matau e mafai ona faʻapipiʻi Sentry i luga o au 'auʻaunaga)
- O le isi laasaga o le faia lea o se poloketi
- Filifili lau gagana mai le lisi. (O le a matou filifili React. Kiliki "Fausia Poloketi")
Fa'avasega lau talosaga. O se faʻataʻitaʻiga autu o le faʻaogaina o le Sentry i totonu o se atigipusa e mafai ona vaʻaia i lalo:
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;
}
}
}E iai se Wizard fesoasoani a le Sentry e fesoasoani ia te oe e iloa ai le mea e tatau ona e faia i le isi itu. E mafai ona e mulimuli i laasaga nei. Ou te manaʻo e faʻaali atu ia te oe pe faʻafefea ona fai lau faʻatonu muamua mea sese. Lelei, ua matou fatuina se poloketi! Sei o tatou agai atu i le isi laasaga
3. Tu'ufa'atasiga tali ma le Sentry
E tatau ona e faʻapipiʻi le npm package i lau poloketi.
npm i @sentry/browserAmata le Sentry i lau koneteina:
Sentry.init({
// dsn: #dsnUrl,
});O lo'o iai le DSN i Poloketi -> Fa'atonu -> Ki Client. E mafai ona e mauaina ki tagata o tausia ile pa su'esu'e.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Su'e le mea sese muamua
Mo se faʻataʻitaʻiga, na ou faʻaogaina se faʻaoga musika faigofie ma le Deezer API. E mafai ona e vaai i ai . E tatau ona tatou faia se mea sese. O se tasi o auala o le mauaina lea o le meatotino "undefined".
E tatau ona tatou faia se faamau e valaau console.log с user.imeli. A maeʻa lenei gaioiga e tatau ona tatou maua se faʻamatalaga sese: Uncaught TypeError (e le mafai ona faitau meatotino mai undefined email) ona o le misi o mea fa'aoga. E mafai foi ona e faʻaaogaina Javascript tuusaunoaga.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>O le container atoa e pei o lenei:
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);A maeʻa ona tuʻufaʻatasia lenei faʻamau, e tatau ona e suʻeina i le suʻega.
E i ai la tatou mea sese muamua
Oi-hoo!
Afai e te kiliki i luga o le ulutala sese, o le a e vaʻai i se faʻasologa o faʻaputuga.
E foliga leaga ia savali. Ioe ua matou vaʻai i faʻamatalaga sese e aunoa ma le malamalama i le mea o loʻo i ai le code. E le mafai ona matou talanoa e uiga i le faʻafanua puna i ReactJS ona e le o faʻatulagaina.
Ou te fia tuʻuina atu foʻi faʻatonuga mo le faʻatulagaina o le faʻafanua faʻapogai, ae o le a sili atu le umi o lenei tusiga nai lo le mea na ou faʻamoemoeina.
E mafai ona e suʻesuʻeina lenei autu . Afai e te fiafia i lenei tusiga, o le a fa'asalalauina le vaega lona lua e uiga i fa'afanua fa'apogai tu'ufa'atasiga. O lea, kiliki atili fiafia ma lesitala i ina ia le misia le vaega lona lua.
5. Faaaoga Sentry fa'atasi ai ma le fa'ai'uga API
Ua lelei. Ua matou ufiufi le tuusaunoaga javascript i parakalafa muamua. Ae ui i lea, o le a le mea o le a tatou faia e uiga i mea sese XHR?
E iai fo'i le fa'afoega o mea sese a le Sentry. Na ou faʻaaogaina e siaki ai mea sese api.
Sentry.captureException(err)E mafai ona e faʻavasegaina le igoa sese, tulaga, faʻaopoopo faʻamaumauga, faʻamatalaga faʻapitoa faʻaoga e faʻaaoga ai lau talosaga, imeli, ma isi.
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));
}
});Ou te manaʻo e faʻaoga se galuega lautele mo le puʻeina 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);
};Auina mai lenei galuega i lau api telefoni.
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));
}
});
};Sei o tatou siaki auala:
- setiLevel fa'atagaina oe e fa'aofi se tulaga sese i totonu o le dashboard leoleo. E iai mea - 'fatal', 'sese', 'lapataiga', 'log', 'info, 'debug', 'critical').
- setiUser fesoasoani e faʻasaoina soʻo se faʻamatalaga faʻaoga (id, tuatusi imeli, fuafuaga totogi, ma isi).
- setExtra fa'atagaina oe e fa'ailoa so'o se fa'amatalaga e te mana'omia, mo se fa'ata'ita'iga, teu.
Afai e te manaʻo e maua ni faʻamatalaga a tagata e uiga i se pusa, e tatau ona e faʻaogaina le showReportDialog galuega.
Sentry.showReportDialog();Faaiuga:
O aso nei na matou faʻamatalaina se tasi auala e tuʻufaʻatasia ai le Sentry i se React application.
→ Telegram talatalanoaga e
puna: www.habr.com