🥇Sledování chyb v aplikaci React pomocí Sentry

Dnes vám povím o sledování chyb v reálném čase v aplikaci React. Aplikace uživatelského rozhraní se obvykle nepoužívá k sledování chyb. Některé společnosti často odkládají sledování chyb, vracejí se k tomu po dokumentaci, testování a dalším. Pokud však můžete svůj produkt zlepšit, udělejte to!

1. Proč potřebujete Sentry?

Předpokládám, že máte zájem o sledování chyb během výroby.

Myslíte si, že to stačí?

Dobře, podívejme se na detaily.

Hlavní důvody pro použití Sentry pro vývojáře:

Umožňuje eliminovat rizika při nasazování chybového kódu.
Pomoc QA při testování kódu.
Získávání rychlých upozornění na problémy.
Možnost rychlého opravení chyb.
Získání přehledného zobrazení chyb v administrátorské části.
Třídění chyb podle segmentů uživatelů / prohlížečů.

Hlavní důvody pro CEO / vedoucí projektu.

Úspora peněz (Sentry můžete nainstalovat na své servery).
Získávání zpětné vazby od uživatelů.
Pochopení toho, co není v pořádku s vaším projektem v reálném čase.
Pochopení počtu problémů, které lidé mají s vaší aplikací.
Pomoc při hledání míst, kde vaši vývojáři chybovali.

Myslím, že vývojáři by se o tento článek zajímali především. Tento seznam důvodů můžete také použít k přesvědčení vedení o integraci Sentry.

Buďte opatrní s posledním bodem na seznamu pro byznys.

Jste již zainteresovaní?

Co je to Sentry?

Sentry je aplikace pro sledování chyb s otevřeným zdrojovým kódem, která pomáhá vývojářům sledovat a opravovat selhání v reálném čase. Nezapomeňte také na to, že aplikace zvyšuje efektivitu a zlepšuje uživatelský zážitek. Sentry podporuje JavaScript, Node, Python, PHP, Ruby, Java a další programovací jazyky.

2. Přihlaste se a vytvořte projekt.

Otevřete svůj účet Sentry. Možná se budete muset přihlásit. (Pozor, že Sentry můžete nainstalovat na své servery.)
Dalším krokem je vytvoření projektu.
Vyberte svůj jazyk ze seznamu. (Chystáme se vybrat React. Klikněte na "Vytvořit projekt")

Nastavte svou aplikaci. Základní příklad, jak integrovat Sentry do kontejneru, můžete vidět níže:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// mělo by být zavoláno před jeho použitím zde
// ideálně ještě před vykreslením vaší react aplikace 

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) {
            // vykreslit záložní uživatelské rozhraní
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Nahlásit zpětnou vazbu</a>
            );
        } else {
            // když není chyba, vykreslit děti beze změny
            return this.props.children;
        }
    }
}

V Sentry je užitečný Průvodce, který vám pomůže pochopit, co byste měli dělat dál. Můžete provést následující kroky. Chci vám ukázat, jak vytvořit první zpracovatel chyb. Skvěle, vytvořili jsme projekt! Přejděme k dalšímu kroku

3. Integrace React a Sentry

Musíte nainstalovat balíček npm do svého projektu.

npm i @sentry/browser

Inicializujte Sentry ve svém kontejneru:

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

DSN se nachází v Projekty -> Nastavení -> Klientské klíče. Klientské klíče můžete najít v řádku vyhledávání.

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

4. Sledování první chyby

Například jsem použil jednoduchou hudební aplikaci s API Deezer. Můžete to vidět zde. Musíme vytvořit chybu. Jedním způsobem je pokusit se přistoupit k vlastnosti "undefined"

Musíme vytvořit tlačítko, které vyvolá console.log s user.email. Po této akci bychom měli obdržet chybovou zprávu: Uncaught TypeError (nelze přečíst vlastnost z undefined email) kvůli neexistujícímu objektu uživatele. Můžete také použít JavaScriptovou výjimku.

Celý kontejner vypadá takto:

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;Nahlásit zpětnou vazbu1</div>
        <h1>Hledač hudby</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 integraci tohoto tlačítka byste měli otestovat jeho funkčnost v prohlížeči.

Máme první chybu

Hurá!

Když kliknete na chybu v hlavičce, uvidíte trasování zásobníku.

Zprávy vypadají špatně. Samozřejmě jsme viděli zprávy o chybách, aniž bychom chápali, kde se tento kód nachází. Ve výchozím nastavení se jedná o mapu zdrojů v ReactJS, protože nejsou nastaveny.

Také bych rád poskytl pokyny k nastavení mapy zdrojů, ale to by tuto zprávu značně prodloužilo.

Toto téma můžete prozkoumat zde. Pokud vás tento článek zajímá, Dmitry Nozhenko publikuje druhou část o integraci mapy zdrojů. Tak dejte více lajků a přihlaste se k odběru, Dmitry Nozhenkoabyste nezmeškali druhou část.

5. Použití Sentry s koncovým bodem API

Takže, probrali jsme JavaScriptové výjimky v předchozích bodech. Co však uděláme s chybami XHR?

Sentry také má vlastní zpracování chyb. Použil jsem jej k sledování chyb API.

Sentry.captureException(err)

Můžete nastavit název chyby, úroveň, přidat data, unikátní uživatelské údaje pomocí vaší aplikace, e-mailu atd.

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));
    }
  });

Rád bych použil společnou funkci pro 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(); - Pokud chcete získat zpětnou vazbu od uživatelů o chybě
  return Sentry.captureException(error);
};

Importujte tuto funkci do volání 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));
      }
    });
};

Pojďme zkontrolovat metody:

setLevel umožňuje vložit chybu na úroveň do panelu sledování sentry. Má vlastnosti - 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser pomáhá uchovávat jakékoli uživatelské údaje (id, e-mailovou adresu, platební plán atd.).
setExtra umožňuje nastavit jakékoli údaje, které potřebujete, například obchod.

Pokud chcete získat zpětnou vazbu od uživatelů o chybě, měli byste použít funkci showReportDialog.

Sentry.showReportDialog();

Výstup:

Dnes jsme popsali jeden ze způsobů integrace Sentry do aplikace React.

→ Telegram chat o Sentry

Zdroj: habr.com