🥇Veakinnituse jälgimine Reacti rakenduses Sentry abil

Täna räägin teile vigade jälgimisest reaalajas React rakenduses. Väline kasutajaliidese rakendus ei ole tavaliselt vigade jälgimiseks mõeldud. Mõned ettevõtted lükkavad sageli vigade jälgimise edasi, naastes sellele alles pärast dokumentatsiooni, testimist ja muud. Siiski, kui saate oma toodet paremaks muuta, siis tehke seda lihtsalt!

1. Miks vajate Sentry-d?

Eeldan, et olete huvitatud vigade jälgimisest tootmisprotsessis.

Kas arvestate, et seda on liiga vähe?

Hästi, vaatame detaile.

Peamised põhjused, miks arendajad peaksid Sentry-d kasutama:

Vähendab riske vigase koodi juurutamisel.
Aitab QA-l koodi testida.
Kiire probleemide teavitamine.
Võime vigade kiireks parandamiseks.
Mugav vigade kuvamine administraatori paneelis.
Vigade sorteerimine kasutaja/brauseri segmentide järgi.

Peamised põhjused CEO-le/projekti juhile.

Raha kokkuhoid (Sentry saab paigaldada teie serveritesse).
Kasutajate tagasiside saamine.
Mõistmine, mis teie projektiga reaalajas valesti on.
Mõistmine, kui palju probleeme inimestel teie rakendusega on.
Aitab leida kohti, kus teie arendajad on eksinud.

Arvan, et arendajad oleksid sellest artiklist eelkõige huvitatud. Samuti võite seda põhjuste loetelu kasutada, et veenda juhtkonda Sentry integreerima.

Olge äritegevuse jaoks viimase punkti osas ettevaatlik.

Kas olete juba huvitatud?

Mis on Sentry?

Sentry on avatud lähtekoodiga vigade jälgimise rakendus, mis aitab arendajatel realajas tõrkeid jälgida ja parandada. Ärge unustage, et rakendus aitab tõhusust suurendada ja kasutajakogemust parandada. Sentry toetab JavaScripti, Node'i, Pythoni, PHP-d, Ruby't, Java't ja teisi programmeerimiskeeli.

2. Logige sisse ja looge projekt.

Avage oma Sentry konto. Võib-olla peate sisse logima. (Märgin, et Sentry saab paigaldada teie serveritesse.)
Järgmiseks sammuks on projekti loomine.
Valige oma keel loendist. (Kavatseme valida Reacti. Klõpsake "Loo projekt".)

Konfigureerige oma rakendus. Alustuseks näete, kuidas Sentryt konteinersse integreerida:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// oleks olnud kutsutud enne, kui seda siin kasutatakse
// ideaalis enne isegi 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;Esitama tagasisidet</a>
            );
        } else {
            //kui viga ei esine, renderdage lapsed muutumatuna
            return this.props.children;
        }
    }
}

Sentry-l on kasulik nõustaja, mis aitab teil mõista, mida edasi teha. Saate järgida järgmisi samme. Soovin näidata, kuidas luua oma esimene veakäsitleja. Suurepärane, projekt on loodud! Liigutame järgmisse etappi.

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 aadressilt Projects -> Settings -> Client Keys. Klientide võtmed on otsingureas.

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 muusikarakendust API Deezeriga. Saate seda näha. siin. Peame tekitama vea. Üks viis seda teha on pöörduda "undefined" omaduse poole.

Peame looma nupu, mis kutsub esile console.log jot user.email. Pärast seda toimingut peaksime saama veateate: Uncaught TypeError (ei suuda lugeda omadust undefined email) puuduvate objekti kasutaja tõttu. Samuti saate kasutada Javascripti erandit.

Kogu konteiner näeb välja selline:

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;Teata tagasiside1</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

Whoo-hoo!

Kui klõpsate veatiitel, näete kallutust.

Sõnumid näevad halvad välja. Loomulikult oleme näinud veateateid, mõistmata, kust see kood pärineb. Vaikimisi tegemist on ReactJS allika kaardiga, sest need ei ole seadistatud.

Soovin samuti pakkuda juhiseid allika kaardi seadistamiseks, kuid see pikendaks seda artiklit oluliselt.

Saate seda teemat edasi uurida siin. Kui see artikkel teid huvitab, Dmitry Nozhenko avab teise osa allika kaardi integreerimisest. Nii et vajutage rohkem meeldimisnuppe ja registreeruge Dmitry Nozhenko, et mitte jääda ilma teisest osast.

5. Kasutamine Sentry lõpp-punktiga API

Olgu. Oleme varasemates punktides arutanud javascripti erandi. Kuid mida me teeme XHR vigadega?

Sentryl on samuti kohandatud vigade töötlemine. Olen seda kasutanud API vigade jälgimiseks.

Sentry.captureException(err)

Saate kohandada vea nime, taset, lisada andmeid, ainulaadseid kasutajateavet oma rakenduse, e-posti jne kaudu.

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

Sooviksin kasutada API catch jaoks ühiseid funktsioone.

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 vea kohta
  return Sentry.captureException(error);
};

Impordige see funktsioon API kutsumisse.

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 taseme vea painutisse. Sellel on omadused - 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser aitab salvestada kõik kasutajateave (id, e-posti aadress, makseplaan jne).
setExtra võimaldab määrata mis tahes vajalikud andmed, näiteks poe.

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