🥇Sledenje napakam v React aplikacijah s pomočjo Sentry

Danes vam bom povedal o sledenju napakam v realnem času v aplikaciji React. Aplikacijo za uporabniški vmesnik običajno ne uporabljamo za sledenje napakam. Nekatera podjetja pogosto odlagajo sledenje napakam in se vrnejo k temu po dokumentaciji, testih in drugim. Vendar, če lahko svoj izdelek izboljšate, to preprosto storite!

1. Zakaj potrebujete Sentry?

Predvidevam, da vas zanima sledenje napakam v proizvodnem procesu.

Mislite, da tega ni dovolj?

Dobro, poglejmo podrobnosti.

Glavni razlogi za uporabo Sentry za razvijalce:

Omogoča zmanjševanje tveganj pri izvajanju kode z napakami.
Pomoč QA pri testiranju kode.
Prejema hitra obvestila o težavah.
Možnost hitrega popravila napak.
Prejema prijazen prikaz napak v administrativni plošči.
Razvrščanje napak po segmentih uporabnikov / brskalnikov.

Glavni razlogi za CEO / vodjo projekta.

Prihranek denarja (Sentry lahko namestite na svoje strežnike).
Prejemanje povratnih informacij uporabnikov.
Razumevanje, kaj ni v redu z vašim projektom v realnem času.
Razumevanje števila težav, s katerimi se srečujejo ljudje z vašo aplikacijo.
Pomoč pri iskanju krajev, kjer so vaši razvijalci naredili napako.

Mislim, da bi bili razvijalci najprej zainteresirani za ta članek. Lahko tudi uporabite ta seznam razlogov, da prepričate nadzorstvo za integracijo Sentry.

Bodite previdni pri zadnji točki na seznamu za podjetja.

Ste že zainteresirani?

Kaj je Sentry?

Sentry je odprtokodna aplikacija za sledenje napakam, ki pomaga razvijalcem slediti in popraviti napake v realnem času. Ne pozabite, da aplikacija pomaga izboljšati učinkovitost in uporabniško izkušnjo. Sentry podpira JavaScript, Node, Python, PHP, Ruby, Java in druge programske jezike.

2. Prijavite se in ustvarite projekt.

Odprite svoj Sentry račun. Morda se boste morali prijaviti. (Upoštevajte, da Sentry lahko namestite na svoje strežnike.)
Naslednji korak je ustvariti projekt.
Izberite svoj jezik s seznama. (Izbrali bomo React. Kliknite 'Ustvari projekt'.)

Konfigurirajte svojo aplikacijo. Osnovni primer, kako integrirati Sentry v kontejner, je prikazan spodaj:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// 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 =&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;Poročite o povratnih informacijah</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

V Sentry je koristen čarovnik, ki vam bo pomagal razumeti, kaj morate storiti naprej. Opravite naslednje korake. Želim vam pokazati, kako ustvariti prvi obdelovalec napak. Super, ustvarili smo projekt! Poglejmo naslednji korak.

3. Integracija React in Sentry

V vaš projekt morate namestiti npm paket.

npm i @sentry/browser

Inicializirajte Sentry v vašem kontejnerju:

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

DSN je na voljo v Projects -> Settings -> Client Keys. Klientne ključe lahko najdete v iskalni vrstici.

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

4. Sledenje prvi napaki

Npr. uporabil sem preprosto glasbeno aplikacijo z API Deezer. To lahko vidite ovde. Moramo ustvariti napako. Eden od načinov je klicanje lastnosti "undefined"

Ustvariti moramo gumb, ki pokliče console.log z user.email. Po tej akciji bi morali dobiti sporočilo o napaki: Uncaught TypeError (ne moremo prebrati lastnosti iz neobstoječega email) zaradi odsotnosti uporabniškega objekta. Uporabiti bi lahko tudi JavaScript napako.

Ves kontejner izgleda tako:

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>Music Finder</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 integraciji tega gumba ga morate preizkusiti v brskalniku.

Imamo prvo napako

Whoo-hoo!

Če kliknete na napako v naslovu, boste videli sledi staka.

Sporočila izgledajo slabo. Seveda, videli smo sporočila o napakah, ne da bi razumeli, kje je ta koda. Privzeto se nanaša na izvorno karto v ReactJS, ker niso nastavljene.

Prav tako bi želel ponuditi navodila za nastavitev izvorne karte, vendar bi to članek podaljšalo veliko bolj, kot sem načrtoval.

To temo lahko raziskujete ovde. Če vas ta članek zanima, Dmitry Nozhenko bo objavil drugi del o integraciji source map. Zato dajte več lajkov in se naročite na Dmitry Nozhenko, da ne zamudite drugega dela.

5. Uporaba Sentry z končno točko API

Okej. V prejšnjih točkah smo obravnavali JavaScript napake. Kaj bomo naredili z XHR napakami?

Sentry ima tudi lastno obdelavo napak. Uporabil sem ga za sledenje API napakam.

Sentry.captureException(err)

Lahko nastavite ime napake, raven, dodate podatke, edinstvene uporabniške podatke s svojim aplikacijo, e-pošto 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));
    }
  });

Rad bi uporabil splošno funkcijo za obravnavo API napak.

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(); - Če želite pridobiti povratne informacije uporabnikov o napaki
  return Sentry.captureException(error);
};

Uvozite to funkcijo v klic 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));
      }
    });
};

Poglejmo metode:

setLevel omogoča vstavljanje napake ravni v nadzorni plošči Sentry. Ima lastnosti – ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’).
setUser pomaga shraniti vse uporabniške podatke (id, e-poštni naslov, plačilni načrt itd.).
setExtra omogoča določitev kakršnih koli podatkov, ki jih potrebujete, na primer trgovina.

Če želite pridobiti povratne informacije uporabnikov o napaki, bi morali uporabiti funkcijo showReportDialog.