Dziś opowiem Wam o śledzeniu błędów w czasie rzeczywistym w aplikacji React. Aplikacja front-end nie jest zwykle używana do śledzenia błędów. Niektóre firmy często odkładają śledzenie błędów, wracając do niego po dokumentacji, testach itp. Jeśli jednak możesz zmienić swój produkt na lepszy, po prostu to zrób!
1. Dlaczego potrzebujesz Sentry?
Zakładam, że interesuje Cię śledzenie błędów podczas produkcji
Czy uważasz, że to nie wystarczy?
OK, przyjrzyjmy się szczegółom.
Najważniejsze powody, dla których programiści korzystają z Sentry:
- Pozwala uniknąć ryzyka podczas wdrażania kodu z błędami
- Pomóż QA w testowaniu kodu
- Otrzymuj szybkie powiadomienia o problemach
- Możliwość szybkiego poprawiania błędów
- Uzyskanie wygodnego wyświetlania błędów w panelu administracyjnym
- Sortuj błędy według segmentu użytkownika/przeglądarki
Główne powody podjęcia projektu CEO/Lead
- Oszczędzaj pieniądze (Sentry można zainstalować na swoich serwerach)
- Uzyskiwanie opinii użytkowników
- Zrozumienie, co jest nie tak z Twoim projektem w czasie rzeczywistym
- Zrozumienie liczby problemów, jakie ludzie mają z Twoją aplikacją
- Pomóż znaleźć miejsca, w których Twoi programiści popełnili błędy
Myślę, że programiści byliby najpierw zainteresowani tym artykułem. Możesz także skorzystać z tej listy powodów, aby przekonać swojego szefa do integracji Sentry.
Uważaj na ostatnią pozycję na liście firm.
Czy jesteś już zainteresowany?
Co to jest Sentry?
Sentry to aplikacja typu open source do śledzenia błędów, która pomaga programistom śledzić i naprawiać awarie w czasie rzeczywistym. Nie zapominaj, że aplikacja pozwala zwiększyć wydajność i poprawić doświadczenia użytkownika. Sentry obsługuje JavaScript, Node, Python, PHP, Ruby, Java i inne języki programowania.
2. Zaloguj się i utwórz projekt
- Otwórz swoje konto Sentry. Być może będziesz musiał się zalogować. (Pamiętaj, że Sentry może zostać zainstalowany na Twoich serwerach)
- Następnym krokiem jest utworzenie projektu
- Wybierz swój język z listy. (Wybierzemy React. Kliknij „Utwórz projekt”)
Dostosuj swoją aplikację. Podstawowy przykład integracji Sentry z kontenerem można zobaczyć poniżej:
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 ma pomocny kreator, który pomoże Ci dowiedzieć się, co powinieneś zrobić dalej. Możesz wykonać następujące kroki. Chcę ci pokazać, jak utworzyć pierwszą procedurę obsługi błędów. Świetnie, stworzyliśmy projekt! Przejdźmy do następnego kroku
3. Integracja React i Sentry
Musisz zainstalować pakiet npm w swoim projekcie.
npm i @sentry/browserZainicjuj Sentry w swoim kontenerze:
Sentry.init({
// dsn: #dsnUrl,
});DSN znajduje się w Projekty -> Ustawienia -> Klucze klienta. Klucze klienta znajdziesz w pasku wyszukiwania.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Śledzenie pierwszego błędu
Użyłem na przykład prostej aplikacji muzycznej z API Deezer. Możesz to zobaczyć . Musimy stworzyć błąd. Jednym ze sposobów jest uzyskanie dostępu do właściwości „niezdefiniowanej”.
Musimy stworzyć przycisk, który wywołuje konsola.log с użytkownik.e-mail. Po tej akcji powinniśmy otrzymać komunikat o błędzie: Nieprzechwycony błąd typu (nie można odczytać właściwości z niezdefiniowanego email) z powodu braku obiektu użytkownika. Możesz także użyć Wyjątek JavaScript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Cały kontener wygląda tak:
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);Po zintegrowaniu tego przycisku należy przetestować go w przeglądarce.
Mamy pierwszy błąd
Whoo-hoo!
Jeśli klikniesz błąd nagłówka, zobaczysz ślad stosu.
Wiadomości wyglądają źle. Oczywiście widzieliśmy komunikaty o błędach bez zrozumienia, gdzie znajduje się kod. Domyślnie mówimy o mapie źródłowej w ReactJS, ponieważ nie są one skonfigurowane.
Chciałbym również podać instrukcje dotyczące konfiguracji mapy źródłowej, ale to spowodowałoby, że ten artykuł byłby znacznie dłuższy, niż zamierzałem.
Możesz przestudiować ten temat . Jeśli zainteresował Cię ten artykuł, opublikuje drugą część dotyczącą integracji map źródłowych. Więc kliknij więcej polubień i subskrybuj żeby nie przegapić drugiej części.
5. Zastosowanie Wartownik z punktem końcowym API
OK. Wyjątek JavaScript omówiliśmy w poprzednich akapitach. Co jednak zrobimy z błędami XHR?
Sentry ma również niestandardową obsługę błędów. Użyłem go do śledzenia błędów interfejsu API.
Sentry.captureException(err)Możesz dostosować nazwę błędu, poziom, dodać dane, unikalne dane użytkownika za pomocą aplikacji, poczty e-mail itp.
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));
}
});Chciałbym użyć ogólnej funkcji dla interfejsu API catch.
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);
};Zaimportuj tę funkcję do swojego wywołania interfejsu API.
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));
}
});
};Sprawdźmy metody:
- ustawPoziom pozwala na wstawienie błędu poziomu do panelu wartowniczego. Ma właściwości - „fatal”, „błąd”, „ostrzeżenie”, „log”, „informacje, „debugowanie”, „krytyczny”).
- ustawUżytkownika pomaga zapisać dowolne dane użytkownika (identyfikator, adres e-mail, plan płatności itp.).
- zestawDodatkowy pozwala określić dowolne dane, których potrzebujesz, np. przechowywać.
Jeśli chcesz poznać opinię użytkowników na temat błędu, powinieneś skorzystać z funkcji showReportDialog.
Sentry.showReportDialog();Wnioski:
Dzisiaj opisaliśmy jeden ze sposobów integracji Sentry z aplikacją React.
→ Czat telegramowy przez
Źródło: www.habr.com