Tänään opastan sinut reaaliaikaisen virheseurannan läpi React-sovelluksessa. Käyttöliittymäsovellusta ei tyypillisesti käytetä virheiden seurantaan. Jotkut yritykset jättävät usein syrjään virheseurannan ja palaavat siihen dokumentaation, testien ja niin edelleen jälkeen. Jos kuitenkin voit muuttaa tuotettasi parempaan suuntaan, tee se vain!
1. Miksi tarvitset Sentryä?
Oletan, että olet kiinnostunut vikojen seurannasta tuotannon aikana.
Luuletko, että tämä ei riitä?
Okei, katsotaan yksityiskohtia.
Yleisimmät syyt käyttää Sentryä kehittäjille:
- Voit päästä eroon riskeistä, kun otat käyttöön virheellisen koodin
- Auta QA:ta kooditestauksessa
- Saat nopeat ongelmailmoitukset
- Kyky korjata virheet nopeasti
- Kätevä virheiden näyttö hallintapaneelissa
- Lajittele virheet käyttäjä-/selainsegmentin mukaan
Tärkeimmät syyt toimitusjohtaja / johtoprojektiin
- Säästä rahaa (Sentry voidaan asentaa palvelimillesi)
- Hanki käyttäjäpalautetta
- Ymmärrät reaaliajassa, mikä projektissasi on vialla
- Ymmärrä, kuinka monta ongelmaa ihmisillä on sovelluksesi kanssa
- Auta löytämään paikkoja, joissa kehittäjäsi ovat tehneet virheen
Luulen, että kehittäjät olisivat kiinnostuneita tästä artikkelista. Voit myös käyttää tätä luetteloa syistä vakuuttaaksesi pomosi integroimaan Sentryn.
Ole varovainen yritysluettelon viimeisen kohteen kanssa.
Oletko jo kiinnostunut?
Mikä on Sentry?
Sentry on avoimen lähdekoodin virheseurantasovellus, jonka avulla kehittäjät voivat seurata ja korjata kaatumisia reaaliajassa. Älä unohda, että sovelluksen avulla voit myös lisätä tehokkuutta ja parantaa käyttökokemusta. Sentry tukee JavaScript-, Node-, Python-, PHP-, Ruby-, Java- ja muita ohjelmointikieliä.
2. Kirjaudu sisään ja luo projekti
- Avaa Sentry-tilisi. Sinun on ehkä kirjauduttava sisään. (Huomaa, että Sentry voidaan asentaa palvelimillesi)
- Seuraava vaihe on projektin luominen
- Valitse kieli luettelosta. (Valitsemme Reagoi. Napsauta "Luo projekti")
Määritä sovelluksesi. Alla on esimerkki Sentryn integroimisesta säilöön:
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;
}
}
}Sentryllä on hyödyllinen ohjattu toiminto, joka auttaa sinua ymmärtämään, mitä sinun pitäisi tehdä seuraavaksi. Voit seurata alla olevia ohjeita. Haluan näyttää sinulle, kuinka voit luoda ensimmäisen virhekäsittelijän. Hienoa, olemme luoneet projektin! Siirrytään seuraavaan vaiheeseen
3. Reactin ja Sentryn integrointi
Sinun on asennettava npm-paketti projektiisi.
npm i @sentry/browserAlusta Sentry säilösi:
Sentry.init({
// dsn: #dsnUrl,
});DSN sijaitsee kohdassa Projektit -> Asetukset -> Asiakasavaimet. Löydät asiakasavaimet hakupalkista.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Ensimmäisen virheen jäljittäminen
Käytin esimerkiksi yksinkertaista musiikkisovellusta Deezer API:lla. Voit nähdä sen . Meidän on luotava bugi. Yksi tapa on käyttää "undefined" -ominaisuutta
Meidän on luotava painike, joka kutsuu konsolin loki с user.email. Tämän toimenpiteen jälkeen meidän pitäisi saada virheilmoitus: Uncaught TypeError (Ominaisuutta ei voi lukea määrittämättömästä email) käyttäjäobjektin puuttumisen vuoksi. Voit myös käyttää javascript poikkeus.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Koko säiliö näyttää tältä:
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);Kun olet integroinut tämän painikkeen, sinun tulee testata se selaimessa.
Meillä on ensimmäinen virhe
Huhhuu!
Jos napsautat otsikkovirhettä, näet pinon jäljen.
Viestit näyttävät huonoilta. Tietenkin olemme nähneet virheilmoituksia ymmärtämättä, missä tämä koodi on. Oletusarvoisesti kyse on ReactJS:n lähdekartasta, koska niitä ei ole määritetty.
Haluaisin myös antaa ohjeita lähdekartan asettamiseen, mutta se tekisi tästä viestistä paljon pidemmän kuin tarkoitin.
Voit tutkia tätä aihetta . Jos olet kiinnostunut tästä artikkelista, julkaisee toisen osan lähdekarttojen integroinnista. Joten klikkaa lisää tykkäyksiä ja tilaa älä missaa toista osaa.
5. Käyttö Vartiomies päätepisteen kanssa API
OK. Olemme käsitelleet JavaScript-poikkeuksen edellisissä kappaleissa. Mutta mitä teemme XHR-virheille?
Sentryssä on myös mukautettu virheenkäsittely. Käytin sitä api-vikojen seurantaan.
Sentry.captureException(err)Voit muokata virheen nimeä, tasoa, lisätä tietoja, yksilöllisiä käyttäjätietoja sovelluksesi, sähköpostisi jne. kautta.
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));
}
});Haluaisin käyttää yleistä toimintoa catch API:lle.
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);
};Tuo tämä funktio api-kutsussa.
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));
}
});
};Tarkastetaan menetelmät:
- setLevel voit lisätä tasovirheen vartijan kojelautaan. Sillä on ominaisuuksia - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
- setUser auttaa tallentamaan kaikki käyttäjätiedot (tunnus, sähköpostiosoite, maksusuunnitelma jne.).
- setExtra voit määrittää mitä tahansa tarvitsemasi tiedot, esimerkiksi myymälän.
Jos haluat käyttäjien palautetta virheestä, sinun tulee käyttää showReportDialog-toimintoa.
Sentry.showReportDialog();Johtopäätös:
Tänään kuvailimme yhtä tavoista integroida Sentry React-sovellukseen.
→ Telegram chat by
Lähde: will.com