🥇 Vigade jälgimine React rakenduses Sentry abil

Täna räägin teile veaparanduse jälgimisest reaalajas Reacti rakenduses. Kasutajaliidese rakendust tavaliselt ei kasutata veaprobleemide jälgimiseks. Paljud ettevõtted lükkavad veaparanduse jälgimise pigem edasi, kuni nad jõuavad dokumentatsiooni, testimise ja muu juurde. Kuid kui saate oma toodet paremaks muuta, siis tehke seda kindlasti!

1. Miks vajate Sentryd?

Oletan, et olete huvitatud veaparanduse jälgimisest tootmisprotsessi käigus.

Kas arvate, et seda on liiga vähe?

Hästi, vaatame üksikasju.

Peamised põhjused Sentry kasutamiseks arendajatele:

Vähendab riske, kui juurutatakse vigadega koodi.
Aitab QA-l koodi testida.
Saada kiireid teateid probleemidest.
Võimalus kiiresti vigu parandada.
Lihtne vigade kuvamine haldashjälgimisliideses.
Vigade sorteerimine kasutaja/brauseri segmentide kaupa.

Peamised põhjused CEO/Projektijuhi jaoks.

Rahaliste säästude saavutamine (Sentry saab paigaldada teie serveritesse).
Kasutajate tagasiside kogumine.
Reaalajas mõistmine, mis teie projektiga valesti on.
Arusaamine probleemide arvust, millega inimesed teie rakenduses kokku puutuvad
Aitamine leida kohti, kus teie arendajad eksisid

Ma arvan, et arendajad oleksid sellest artiklist esmajärjekorras huvitatud. Samuti võite seda põhjuseid kasutada, et veenda juhtkonda Sentry integreerimisel.

Olge viimase punkti suhtes ettevaatlik, kui tegemist on äriga.

Kas olete juba huvitatud?

Mis on Sentry?

Sentry on avatud lähtekoodiga veateavitusrakendus, mis aitab arendajatel jälgida ja reaalajas parandada kokkuvarisemisi. Ärge unustage, et rakendus aitab suurendada tõhusust ja parandada kasutaja kasutamist. Sentry toetab JavaScripti, Node'i, Pythonit, PHP-d, Ruby't, Java't ja muid programmeerimiskeeli.

2. Logige sisse ja looge projekt

Avage oma Sentry konto. Võib-olla peate sisse logima. (Pange tähele, et Sentryt saab installida teie serveritesse)
Järgmine samm on projekti loomine
Valige oma keel nimekirjast. (Me kavatseme valida Reacti. Klõpsake "Loo projekt")

Seadistage oma rakendus. Allpool on välja toodud põhijuhend, kuidas integreerida Sentry konteinerisse:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// peaks pidi oleks kutsutud enne, kui seda siin kasutama asute
// ideaalne oleks isegi enne teie React rakenduse renderdamist

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;Raporteeri tagasisidet</a>
            );
        } else {
            //kui viga pole, renderda lapsed muutmata
            return this.props.children;
        }
    }
}

Sentry-l on kasulik Meistri juhend, mis aitab teil mõista, mida järgmine teha. Saate järgneda järgmistele sammudele. Soovin näidata, kuidas luua esimest veateadet. Suurepärane, oleme projekti loonud! Liigume järgmise sammu juurde.

3. Reacti ja Sentry integreerimine

Peate installima npm paketi oma projekti.

npm i @sentry/browser

Initsialiseerige Sentry oma konteineris:

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

DSN leiate Projects -> Settings -> Client Keys. Saate kliendi võtmed otsinguribalt.

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

4. Esimese vea jälgimine

Näiteks kasutasin lihtsat muusika rakendust, mis kasutab Deezeri API-t. Saate seda näha siit. Peame looma vea. Üks viis selleks on pöörduda "undefined" omaduse poole.

Me peame looma nupu, mis kutsub esile console.log koos user.email. Pärast seda toimingut peaksime saama veateate: Uncaught TypeError (ei saa lugeda omadust undefined'ist) email) kasutaja objekti puudumise tõttu. Samuti saate kasutada JavaScripti erandit.

Kogu konteiner näeb välja järgmine:

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>Muusika Otsija</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);

Pärast selle nupu integreerimist peate seda testima brauseris.

Meil on esimene viga

Väga hea!

Kui klõpsate pealkirja veal, näete virna jälgimist.

Teated näevad halvad välja. Loomulikult oleme näinud veateateid, ilma et oleksime teadnud, kus see kood asub. Vaikimisi räägime ReactJS-i allikakaardist, kuna need ei ole seadistatud.

Sooviksin samuti anda juhiseid allikakaardi seadistamiseks, kuid see teeks selle artikli palju pikemaks, kui kavandasin.

Saate seda teemat uurida siit. Kui see artikkel teid huvitab, Dmitry Nozhenko avaldab teise osa allikakaardi integreerimisest. Nii et vajutage rohkem nagu ja tellige Dmitry Nozhenko, et mitte jääda ilma teisest osast.

5. Kasutamine Sentry lõpp-punkti API

Okei. Oleme eelnevates punktides vaadanud JavaScripti erandeid. Kuid mida me teeme XHR vigadega?

Sentryl on ka kohandatud veahaldus. Olen kasutanud seda API vigade jälgimiseks.

Sentry.captureException(err)

Saate oma rakenduse, e-posti jne kaudu seadistada vea nime, taseme, lisada andmeid ja unikaalseid kasutajaandmeid.

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

Soovin kasutada API catch jaoks ühist funktsiooni.

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(); - Kui soovite kasutajate tagasisidet veast
  return Sentry.captureException(error);
};

Importige see funktsioon API kutses.

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

Kontrollime meetodeid:

setLevel võimaldab sisestada veateate taseme Sentry juhtpaneelile. Sellel on omadused — ‘fataalne’, ‘vead’, ‘hoiatus’, ‘logi’, ‘info’, ‘debug’, ‘kriitiline’.
setUser aitab salvestada mingeid kasutajaandmeid (id, e-posti aadress, makseplaan jne).
setExtra võimaldab määrata mistahes andmeid, mida vajate, näiteks pood.

Kui soovite saada kasutaja tagasisidet vea kohta, peaksite kasutama funktsiooni showReportDialog.