Vandag sal ek jou vertel van intydse foutopsporing in 'n React-toepassing. 'n Vooraan-toepassing word nie tipies vir foutopsporing gebruik nie. Sommige maatskappye stel dikwels foutopsporing uit, keer daarna terug na dokumentasie, toetse, ens. As jy egter jou produk ten goede kan verander, doen dit dan net!
1. Hoekom het jy Sentry nodig?
Ek neem aan dat u belangstel om foute tydens produksie op te spoor
Dink jy dit is nie genoeg nie?
Goed, kom ons kyk na die besonderhede.
Topredes vir ontwikkelaars om Sentry te gebruik:
- Laat jou toe om risiko's te vermy wanneer kode met foute ontplooi word
- Help QA met kodetoetsing
- Ontvang vinnige kennisgewings oor probleme
- Vermoë om foute vinnig reg te stel
- Kry 'n gerieflike vertoning van foute in die administrasiepaneel
- Sorteer foute volgens gebruiker/blaaiersegment
Hoofredes vir HUB/Loodprojek
- Spaar geld (Sentry kan op jou bedieners geïnstalleer word)
- Kry gebruikersterugvoer
- Om intyds te verstaan wat fout is met jou projek
- Verstaan die aantal probleme wat mense met jou program het
- Help jou om plekke te vind waar jou ontwikkelaars foute gemaak het
Ek dink die ontwikkelaars sal eers in hierdie artikel belangstel. Jy kan ook hierdie lys redes gebruik om jou baas te oortuig om Sentry te integreer.
Wees versigtig met die laaste item op die besigheidslys.
Stel jy reeds belang?
Wat is Sentry?
Sentry is 'n oopbron-bugopsporingstoepassing wat ontwikkelaars help om ineenstortings intyds op te spoor en reg te stel. Moenie vergeet dat die toepassing jou in staat stel om doeltreffendheid te verhoog en gebruikerservaring te verbeter nie. Sentry ondersteun JavaScript, Node, Python, PHP, Ruby, Java en ander programmeertale.
2. Teken in en skep 'n projek
- Maak jou Sentry-rekening oop. Jy sal dalk moet aanmeld. (Neem asseblief kennis dat Sentry op jou bedieners geïnstalleer kan word)
- Die volgende stap is om 'n projek te skep
- Kies jou taal uit die lys. (Ons gaan Reageer kies. Klik "Create Project")
Pas jou toepassing aan. 'n Basiese voorbeeld van hoe om Sentry in 'n houer te integreer, kan hieronder gesien word:
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 het 'n nuttige towenaar om jou te help uitvind wat jy volgende moet doen. Jy kan hierdie stappe volg. Ek wil jou wys hoe om jou eerste fouthanteerder te skep. Wonderlik, ons het 'n projek geskep! Kom ons gaan aan na die volgende stap
3. Reageer en Sentry-integrasie
Jy moet die npm-pakket in jou projek installeer.
npm i @sentry/browserInisialiseer Sentry in jou houer:
Sentry.init({
// dsn: #dsnUrl,
});Die DSN is geleë in Projekte -> Instellings -> Kliëntsleutels. U kan kliëntsleutels in die soekbalk vind.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Volg die eerste fout
Ek het byvoorbeeld 'n eenvoudige musiektoepassing met die Deezer API gebruik. Jy kan dit sien . Ons moet 'n fout skep. Een manier is om toegang tot die "ongedefinieerde" eiendom te verkry
Ons moet 'n knoppie skep wat roep konsole log с gebruiker.e-pos. Na hierdie aksie behoort ons 'n foutboodskap te ontvang: Uncaught TypeError (kan nie eiendom van undefined lees nie email) as gevolg van ontbrekende gebruikerobjek. Jy kan ook gebruik Javascript-uitsondering.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Die hele houer lyk soos volg:
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);Nadat u hierdie knoppie geïntegreer het, moet u dit in die blaaier toets.
Ons het ons eerste fout
Whoo-hoe!
As jy op die kopfout klik, sal jy 'n stapelspoor sien.
Die boodskappe lyk sleg. Natuurlik het ons foutboodskappe gesien sonder om te verstaan waar die kode is. By verstek praat ons van die bronkaart in ReactJS omdat hulle nie gekonfigureer is nie.
Ek wil ook graag instruksies gee vir die opstel van die bronkaart, maar dit sal hierdie artikel baie langer maak as wat ek bedoel het.
Jy kan hierdie onderwerp bestudeer . As jy belangstel in hierdie artikel, sal die tweede deel oor bronkaartintegrasie publiseer. So, druk meer likes en teken in op om nie die tweede deel te mis nie.
5. Gebruik Sentry met eindpunt API
OK. Ons het die JavaScript-uitsondering in die vorige paragrawe behandel. Wat sal ons egter teen XHR-foute doen?
Sentry het ook persoonlike fouthantering. Ek het dit gebruik om API-foute op te spoor.
Sentry.captureException(err)U kan die foutnaam, vlak, data byvoeg, unieke gebruikerdata aanpas deur u toepassing, e-pos, ens.
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));
}
});Ek wil graag 'n generiese funksie vir die catch API gebruik.
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);
};Voer hierdie funksie in jou API-oproep in.
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));
}
});
};Kom ons kyk na die metodes:
- stelVlak laat jou toe om 'n vlakfout in die wagpaneelbord in te voeg. Dit het eienskappe - 'noodlottig', 'fout', 'waarskuwing', 'logboek', 'inligting, 'ontfout', 'krities').
- stelGebruiker help om enige gebruikerdata (ID, e-posadres, betalingsplan, ens.) te stoor.
- stelEkstra laat jou toe om enige data te spesifiseer wat jy nodig het, byvoorbeeld stoor.
As jy gebruikerterugvoer oor 'n fout wil kry, moet jy die showReportDialog-funksie gebruik.
Sentry.showReportDialog();Gevolgtrekking:
Ons het vandag een manier beskryf om Sentry in 'n React-toepassing te integreer.
→ Telegram-klets deur
Bron: will.com