🥇Sledovanie chýb v aplikácii React pomocou Sentry

Dnes vám poviem o sledovaní chýb v reálnom čase v aplikácii React. Aplikácie pre používateľské rozhranie sa zvyčajne nepoužívajú na sledovanie chýb. Niektoré spoločnosti často odkladajú sledovanie chýb, vracajú sa k tomu až po dokumentácii, testoch a podobne. Avšak, ak môžete svoj produkt zlepšiť, urobte to hneď!

1. Prečo potrebujete Sentry?

Predpokladám, že máte záujem o sledovanie chýb počas výroby.

Myslíte si, že to nie je dosť?

Dobre, pozrime sa na detaily.

Hlavné dôvody použitia Sentry pre vývojárov:

Umožňuje zbaviť sa rizika nasadenia chybného kódu.
Pomoc QA pri testovaní kódu.
Rýchle upozornenia na problémy.
Možnosť rýchlo opraviť chyby.
Získanie prehľadného zobrazenia chýb v administrátorskej paneli.
Triedenie chýb podľa segmentov používateľa / prehliadača.

Hlavné dôvody pre CEO / vedúceho projektu.

Úspora peňazí (Sentry môžete nainštalovať na svoje servery).
Získanie spätnej väzby od používateľov.
Pochopenie toho, čo nie je v poriadku s vaším projektom v reálnom čase.
Pochopenie počtu problémov, ktoré majú ľudia s vašou aplikáciou.
Pomoc pri hľadaní miest, kde vašich vývojári urobili chybu.

Myslím, že vývojári by sa o tento článok zaujímali predovšetkým. Tento zoznam dôvodov môžete tiež využiť na presviedčanie vedenia o integrácii Sentry.

Buďte opatrní s posledným bodom na zozname pre podniky.

Už vás to zaujalo?

Čo je Sentry?

Sentry je aplikácia na sledovanie chýb s otvoreným zdrojovým kódom, ktorá pomáha vývojárom sledovať a opravovať zlyhania v reálnom čase. Nezabúdajte na to, že aplikácia zvyšuje efektivitu a zlepšuje používateľské skúsenosti. Sentry podporuje JavaScript, Node, Python, PHP, Ruby, Java a ďalšie programovacie jazyky.

2. Prihláste sa a vytvorte projekt.

Otvorte svoj účet Sentry. Možno sa budete musieť prihlásiť. (Upozorňujem, že Sentry môžete nainštalovať na svojich serveroch.)
Nasledujúci krok je vytvoriť projekt.
Vyberte svoj jazyk zo zoznamu. (Ideme vybrať React. Kliknite na 'Vytvoriť projekt.')

Nastavte svoju aplikáciu. Základný príklad, ako integrovať Sentry do kontajnera, môžete vidieť nižšie:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// mal by sa to malo zavolať pred jeho použitím tu
// ideálne pred dokončením vašej react aplikácie 

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;Nahlásiť spätnú väzbu</a>
            );
        } else {
            // keď nie je chyba, renderujte deti nedotknuté
            return this.props.children;
        }
    }
}

V Sentry je užitočný Sprievodca, ktorý vám pomôže pochopiť, čo by ste mali robiť ďalej. Môžete vykonať nasledujúce kroky. Chcem vám ukázať, ako vytvoriť svoj prvý spracovateľ chýb. Skvelé, vytvorili sme projekt! Prejdime k ďalšiemu kroku

3. Integrácia React a Sentry

Musíte nainštalovať npm balík do svojho projektu.

npm i @sentry/browser

Inicializujte Sentry vo svojom kontajneri:

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

DSN sa nachádza v Projects -> Settings -> Client Keys. Klientske kľúče môžete nájsť v riadku vyhľadávania.

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

4. Sledovanie prvej chyby

Napríklad som použil jednoduchú hudobnú aplikáciu s API Deezer. Môžete to vidieť tu. Musíme vytvoriť chybu. Jedným zo spôsobov je pokúsiť sa o prístup k vlastnosti "undefined"

Musíme vytvoriť tlačidlo, ktoré vyvolá console.log s user.email. Po tomto kroku by sme mali dostať chybové hlásenie: Uncaught TypeError (nepodarilo sa prečítať vlastnosť z nedefinovaného email) kvôli chýbajúcemu používateľskému objektu. Môžete tiež použiť JavaScript výnimku.

Celý kontajner vyzerá 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;Report feedback1</div>
        <h1>Hľadanie 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 integrování tohto tlačidla by ste mali otestovať ho v prehliadači.

Máme prvú chybu

Whoo-hoo!

Ak kliknete na chybu hlavičky, uvidíte zásobník volaní.

Správy vyzerajú zle. Samozrejme, videli sme chybové hlásenia, nevediac, kde tento kód je. Predvolene ide o mapu zdrojov v ReactJS, pretože nie sú nastavené.

Rád by som poskytol pokyny na nastavenie mapy zdrojov, ale to by túto článok veľmi predĺžilo.

Môžete sa tejto téme venovať tu. Ak vás tento článok zaujíma, Dmitry Nozhenko publikuje druhú časť o integrácii mapy zdrojov. Tak neváhajte, dajte viac lajkov a prihláste sa na odber Dmitry Nozhenko, aby ste nezmeškali druhú časť.

5. Používanie Sentry s koncovým bodom API

Dobre. Rozobrali sme výnimku javascript v predchádzajúcich bodoch. Čo však urobíme s chybami XHR?

Sentry tiež má vlastné spracovanie chýb. Použil som ho na sledovanie chýb API.

Sentry.captureException(err)

Môžete nastaviť názov chyby, úroveň, pridať údaje, unikátne používateľské údaje pomocou vašej aplikácie, e-mailu atď.

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

Chcel by som použiť spoločnú funkciu pre 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(); - Ak chcete získať spätnú väzbu od používateľov na chybu
  return Sentry.captureException(error);
};

Importujte túto funkciu do volania 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));
      }
    });
};

Poďme skontrolovať metódy:

setLevel umožňuje vložiť chybu úrovne do panela na sledovanie Sentry. Má vlastnosti — ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info, ‘debug’, ‘critical’).
setUser pomáha uložiť akékoľvek používateľské údaje (id, e-mailová adresa, plán platby atď.).
setExtra umožňuje zadať akékoľvek údaje, ktoré potrebujete, napríklad obchod.

Ak chcete získať spätnú väzbu od používateľov na chybu, mali by ste použiť funkciu showReportDialog.

Sentry.showReportDialog();

Výstup:

Dnes sme opísali jeden zo spôsobov integrácie Sentry do aplikácie React.

→ Telegram chat o Sentry

Zdroj: habr.com