Täna tutvustan teile Reacti rakenduses reaalajas vigade jälgimist. Esiosa rakendust ei kasutata tavaliselt vigade jälgimiseks. Mõned ettevõtted jätavad sageli vigade jälgimise kõrvale, pöördudes selle juurde pärast dokumenteerimist, teste jne. Kui aga saad oma toodet paremaks muuta, siis lihtsalt tee seda!
1. Miks teil Sentryt vaja on?
Eeldan, et olete huvitatud vigade jälgimisest tootmise ajal.
Kas arvate, et sellest ei piisa?
Olgu, vaatame üksikasju.
Peamised põhjused Sentry kasutamiseks arendajatele:
- Võimaldab vabaneda riskidest vigadega koodi juurutamisel
- Abi QA koodi testimisel
- Saate kiireid probleemiteateid
- Võimalus vigu kiiresti parandada
- Mugav vigade kuvamine administraatoripaneelil
- Sorteeri vead kasutaja/brauseri segmendi järgi
Tegevjuhi/juhtprojekti peamised põhjused
- Säästke raha (Sentry saab teie serveritesse installida)
- Hankige kasutajate tagasisidet
- Saate reaalajas aru, mis teie projektil viga on
- Inimestel teie rakendusega seotud probleemide arvukuse mõistmine
- Aidake leida kohti, kus teie arendajad tegid vea
Arvan, et arendajad oleksid sellest artiklist ennekõike huvitatud. Seda põhjuste loendit saate kasutada ka selleks, et veenda oma ülemust Sentryt integreerima.
Ettevaatust ärinimekirja viimase elemendiga.
Kas olete juba huvitatud?
Mis on Sentry?
Sentry on avatud lähtekoodiga vigade jälgimise rakendus, mis aitab arendajatel krahhe reaalajas jälgida ja parandada. Ärge unustage, et rakendus võimaldab teil ka tõhusust tõsta ja kasutajakogemust parandada. Sentry toetab JavaScripti, Node'i, Pythoni, PHP, Ruby, Java ja muid programmeerimiskeeli.
2. Logi sisse ja loo projekt
- Avage oma Sentry konto. Võimalik, et peate sisse logima. (Pange tähele, et Sentry saab teie serveritesse installida)
- Järgmine samm on projekti loomine
- Valige loendist oma keel. (Me valime React. Klõpsake "Loo projekt")
Seadistage oma rakendus. Põhinäidet Sentry konteinerisse integreerimise kohta näete allpool.
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;
}
}
}Sentryl on abistav viisard, mis aitab teil mõista, mida peaksite järgmisena tegema. Saate järgida alltoodud samme. Tahan teile näidata, kuidas luua oma esimene veakäsitleja. Suurepärane, oleme loonud projekti! Liigume edasi järgmise sammu juurde
3. Reacti ja Sentry integreerimine
Peate oma projekti installima paketi npm.
npm i @sentry/browserInitsialiseerige Sentry oma konteineris:
Sentry.init({
// dsn: #dsnUrl,
});DSN asub jaotises Projektid -> Seaded -> Kliendivõtmed. Kliendivõtmed leiate otsinguribalt.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Esimese vea jälgimine
Näiteks kasutasin lihtsat muusikarakendust Deezer API-ga. Näete seda . Peame looma vea. Üks võimalus on pääseda juurde "määratlemata" atribuudile
Peame looma nupu, mis helistab konsool.log с user.email. Pärast seda toimingut peaksime saama veateate: Tabamata tüübiviga (määratlemata atribuuti ei saa lugeda email) kasutajaobjekti puudumise tõttu. Võite ka kasutada javascripti erand.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Kogu konteiner näeb välja selline:
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);Pärast selle nupu integreerimist peaksite seda brauseris testima.
Meil on esimene viga
Ohoo-hoo!
Kui klõpsate päise veale, näete virna jälge.
Sõnumid näevad halvad välja. Muidugi oleme näinud veateateid, mõistmata, kus see kood asub. Vaikimisi on see ReactJS-i lähtekaardi kohta, kuna need pole konfigureeritud.
Tahaksin anda ka juhiseid lähtekaardi seadistamiseks, kuid see muudaks selle postituse palju pikemaks, kui ma kavatsesin.
Saate seda teemat uurida . Kui olete sellest artiklist huvitatud, avaldab teise osa lähtekaardi integreerimisest. Nii et klõpsake rohkem meeldimisi ja tellige et teist osa mitte vahele jätta.
5. Kasutage Tunnimees lõpp-punktiga API
OKEI. Oleme käsitlenud JavaScripti erandit eelmistes lõikudes. Mida me aga teeme XHR-i vigadega?
Sentryl on ka kohandatud veatöötlus. Kasutasin seda api vigade jälgimiseks.
Sentry.captureException(err)Saate kohandada vea nime, taset, lisada andmeid, unikaalseid kasutajaandmeid oma rakenduse, meili jne kaudu.
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));
}
});Soovin kasutada püüdmise API jaoks üldist funktsiooni.
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);
};Importige see funktsioon API kõnes.
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));
}
});
};Kontrollime meetodeid:
- setLevel võimaldab sisestada tasemevea valve armatuurlauale. Sellel on omadused – 'fatal', 'error', 'hoiatus', 'logi', 'info, 'silumine', 'kriitiline').
- setUser aitab salvestada mis tahes kasutajaandmeid (id, meiliaadress, makseplaan jne).
- setExtra võimaldab määrata mis tahes andmeid, mida vajate, näiteks pood.
Kui soovite kasutajate tagasisidet vea kohta, peaksite kasutama funktsiooni showReportDialog.
Sentry.showReportDialog();Järeldus:
Täna kirjeldasime üht võimalust Sentry integreerimiseks Reacti rakendusse.
→ Telegrami vestlus
Allikas: www.habr.com