🥇Śledzenie błędów w aplikacji React za pomocą Sentry

Dziś opowiem o śledzeniu błędów w czasie rzeczywistym w aplikacji React. Aplikacja interfejsu użytkownika zazwyczaj nie jest używana do śledzenia błędów. Niektóre firmy często odkładają śledzenie błędów, wracając do tego po dokumentacji, testach i innych rzeczach. Jednak jeśli możesz poprawić swój produkt, po prostu to zrób!

1. Dlaczego potrzebujesz Sentry?

Zakładam, że jesteś zainteresowany śledzeniem błędów w procesie produkcyjnym

Uważasz, że to za mało?

Dobrze, przyjrzyjmy się szczegółom.

Główne powody korzystania z Sentry dla programistów:

Pozwala eliminować ryzyko związane z wdrażaniem błędnego kodu
Pomoc QA w testowaniu kodu
Otrzymywanie szybkich powiadomień o problemach
Możliwość szybkiego naprawienia błędów
Otrzymywanie przejrzystego wyświetlenia błędów w panelu administracyjnym
Sortowanie błędów według segmentów użytkowników / przeglądarek

Główne powody dla CEO / liderów projektu

Oszczędność pieniędzy (Sentry można zainstalować na własnych serwerach)
Otrzymywanie opinii od użytkowników
Zrozumienie, co nie działa w Twoim projekcie w czasie rzeczywistym
Zrozumienie liczby problemów, które występują u ludzi w Twojej aplikacji
Pomoc w znalezieniu miejsc, gdzie Twoi programiści popełnili błędy

Myślę, że przede wszystkim programiści byliby zainteresowani tym artykułem. Możesz również wykorzystać tę listę powodów, aby przekonać kierownictwo do zintegrowania Sentry.

Uważaj na ostatni punkt na liście dla biznesu.

Jesteś już zainteresowany?

Czym jest Sentry?

Sentry to aplikacja do śledzenia błędów z otwartym kodem źródłowym, która pomaga programistom śledzić i naprawiać awarie w czasie rzeczywistym. Nie zapominaj również, że aplikacja pozwala zwiększyć efektywność i poprawić użyteczność. Sentry wspiera JavaScript, Node, Python, PHP, Ruby, Java i inne języki programowania.

2. Zaloguj się i utwórz projekt

Otwórz swoje konto Sentry. Może być konieczne zalogowanie się. (Zwróć uwagę, że Sentry można zainstalować na własnych serwerach)
Następnym krokiem jest stworzenie projektu
Wybierz swój język z listy. (Zamierzamy wybrać React. Kliknij „Utwórz projekt”)

Skonfiguruj swoją aplikację. Podstawowy przykład integracji Sentry z kontenerem znajdziesz poniżej:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// należało to wywołać przed jego użyciem tutaj
// najlepiej przed renderowaniem aplikacji react

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope =&gt; {
        Object.keys(errorInfo).forEach(key =&gt; {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Zgłoś opinię</a>
            );
        } else {
            //gdy nie ma błędu, renderuj dzieci bez zmian
            return this.props.children;
        }
    }
}

W Sentry jest przydatny Kreator, który pomoże Ci zrozumieć, co powinieneś zrobić dalej. Możesz wykonać następujące kroki. Chcę pokazać Ci, jak stworzyć pierwszy handler 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/browser

Zainicjuj Sentry w swoim kontenerze:

Sentry.init({
  // dsn: #dsnUrl,
});

DSN znajduje się w Projekty -> Ustawienia -> Klucze Klientów. Możesz znaleźć klucze klienta 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

Na przykład użyłem prostą aplikację muzyczną z API Deezer. Możesz to zobaczyć tutaj. Musimy stworzyć błąd. Jednym ze sposobów jest odwołanie się do właściwości "undefined"

Musimy stworzyć przycisk, który wywołuje console.log z user.email. Po tym działaniu powinniśmy otrzymać komunikat o błędzie: Uncaught TypeError (nie można odczytać właściwości z undefined email) z powodu braku obiektu użytkownika. Możesz także użyć wyjątków Javascript.

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 =&gt; ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https:\/\/fc0edcf6927a4397855797a033f04085@sentry.io\/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        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)}
        &gt;
          test error1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Zgłoś feedback1</div>
        <h1>Finder Muzyki</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton \/&gt;
        {loading &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!loading &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  title={item.title}
                  description={item.artist.name}
                \/&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Po zintegrowaniu tego przycisku powinieneś go przetestować w przeglądarce.

Mamy pierwszy błąd

Whoo-hoo!

Jeśli klikniesz w błąd nagłówka, zobaczysz stos wywołań.

Wiadomości wyglądają źle. Oczywiście widzieliśmy komunikaty o błędach, nie wiedząc, gdzie ten kod się znajduje. Domyślnie chodzi o mapę źródłową w ReactJS, ponieważ nie są skonfigurowane.

Chciałbym również dostarczyć instrukcje dotyczące konfiguracji mapy źródłowej, ale to uczyniłoby ten artykuł znacznie dłuższym, niż planowałem.

Możesz zbadać ten temat tutaj. Jeśli jesteś zainteresowany tym artykułem, Dmitry Nozhenko opublikuje drugą część na temat integracji mapy źródłowej. Dlatego kliknij więcej polubień i subskrybuj Dmitry Nozhenko, aby nie przegapić drugiej części.

5. Używanie Sentry z punktem końcowym API

Okej. Omówiliśmy wyjątek javascript w poprzednich punktach. Jednak co zrobimy z błędami XHR?

Sentry ma również własną obsługę błędów. Użyłem go do śledzenia błędów API.

Sentry.captureException(err)

Możesz skonfigurować nazwę błędu, poziom, dodać dane, unikalne dane użytkownika za pomocą swojej aplikacji, e-mail itd.

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": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Chciałbym użyć wspólnej funkcji do przechwytywania 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(); - Jeśli chcesz otrzymać opinię użytkowników na temat błędu
  return Sentry.captureException(error);
};

Zaimportuj tę funkcję w wywołaniu 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:

setLevel pozwala na wstawienie błędu poziomu na pulpicie nawigacyjnym Sentry. Ma właściwości — ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’.
setUser pomaga zachować wszelkie dane użytkownika (id, adres e-mail, plan płatności itd.).
setExtra pozwala na określenie dowolnych danych, które są potrzebne, np. magazyn.

Jeśli chcesz otrzymać opinie użytkowników na temat błędu, powinieneś użyć funkcji showReportDialog.