🥇Monitorizarea erorilor în aplicația React cu ajutorul Sentry

Astăzi vă voi vorbi despre monitorizarea erorilor în timp real în aplicația React. Aplicațiile interfeței nu sunt de obicei folosite pentru monitorizarea erorilor. Unele companii întârzie frecvent monitorizarea erorilor, revenind la aceasta după documentație, teste și altele. Cu toate acestea, dacă puteți îmbunătăți produsul dvs., faceți-o pur și simplu!

1. De ce aveți nevoie de Sentry?

Presupun că sunteți interesat de monitorizarea erorilor în procesul de producție

Credeți că este insuficient?

Bine, hai să vedem detaliile.

Principalele motive pentru utilizarea Sentry de către dezvoltatori:

Permite eliminarea riscurilor la desfășurarea codului cu erori
Ajutor QA în testarea codului
Primirea instantanee a notificărilor despre probleme
Posibilitatea de a remedia rapid erorile
Primirea unei vizualizări convenabile a erorilor în panoul de administrare
Clasificarea erorilor pe segmente de utilizator / browser

Principalele motive pentru CEO / liderul proiectului

Economia de bani (Sentry poate fi instalat pe serverele dvs.)
Obținerea de feedback din partea utilizatorilor
Înțelegerea a ce nu merge cu proiectul dvs. în timp real
Înțelegerea numărului de probleme cu care se confruntă utilizatorii aplicației dvs.
Ajutor în găsirea locurilor unde dezvoltatorii dvs. au greșit

Cred că dezvoltatorii ar fi interesați în primul rând de acest articol. De asemenea, puteți folosi această listă de motive pentru a convinge conducerea să integreze Sentry.

Fiți atenți la ultimul punct din lista pentru afaceri.

Sunteți deja interesat?

Ce este Sentry?

Sentry este o aplicație de monitorizare a erorilor cu sursă deschisă, care ajută dezvoltatorii să monitorizeze și să repare problemele în timp real. Nu uitați că aplicația ajută la creșterea eficienței și îmbunătățirea utilizării de către utilizatori. Sentry suportă JavaScript, Node, Python, PHP, Ruby, Java și alte limbaje de programare.

2. Conectați-vă și creați un proiect

Deschideți contul dvs. Sentry. Este posibil să trebuie să vă conectați. (Rețineți că Sentry poate fi instalat pe serverele dvs.)
Pasul următor este să creați un proiect
Selectați limba dvs. din listă. (Vom alege React. Faceți clic pe „Creează proiect”)

Configurați aplicația dumneavoastră. Un exemplu de bază despre cum să integrați Sentry în container este prezentat mai jos:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// ar fi trebuit să fie apelat înainte de a-l folosi aici
// ideal înainte chiar de a reda aplicația ta React 

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) {
            //generează UI alternativ
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Raportează feedback</a>
            );
        } else {
            //când nu există o eroare, randează copiii netransformați
            return this.props.children;
        }
    }
}

Sentry are un asistent util care vă va ajuta să înțelegeți ce trebuie să faceți în continuare. Puteți urma pașii următori. Vreau să vă arăt cum să creați primul handler de erori. Excelent, am creat proiectul! Să trecem la pasul următor.

3. Integrarea React și Sentry

Trebuie să instalați pachetul npm în proiectul dumneavoastră.

npm i @sentry/browser

Inițializați Sentry în containerul dumneavoastră:

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

DSN-ul se află în Projects -> Settings -> Client Keys. Puteți găsi cheile clientului în bara de căutare.

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

4. Monitorizarea primei erori

De exemplu, am folosit o aplicație muzicală simplă cu API-ul Deezer. Puteți vedea asta. aiciTrebuie să generăm o eroare. Unul dintre moduri este să accesăm proprietatea "undefined".

Trebuie să creăm un buton care să invoce console.log de user.email. După această acțiune, ar trebui să primim un mesaj de eroare: Uncaught TypeError (nu se poate citi proprietatea din indefinit) email) din cauza lipsei obiectului utilizator. Puteți folosi de asemenea excepția Javascript..

Întregul container arată astfel:

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;Raportează feedback1</div>
        <h1>Căutător de Muzică</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);

După integrarea acestui buton, ar trebui să-l testați în browser.

Avem prima eroare.

Whoo-hoo!

Dacă faceți clic pe eroarea din header, veți vedea traseul stivei.

Mesajele arată rău. Desigur, am văzut mesaje de eroare, fără a înțelege unde este acest cod. În mod implicit, este vorba despre harta sursă în ReactJS, deoarece acestea nu sunt configurate.

De asemenea, aș dori să ofer instrucțiuni pentru configurarea hărții sursă, dar ar face ca acest articol să fie mult mai lung decât am planificat.

Puteți explora acest subiect. aiciDacă sunteți interesat de acest articol, Dmitry Nozhenko va publica partea a doua despre integrarea hărții sursă. Așadar, apăsați mai multe like-uri și abonați-vă la Dmitry Nozhenko, pentru a nu rata partea a doua.

5. Utilizarea Sentry cu punctul final API

Bine. Am discutat despre excepția javascript în punctele anterioare. Cu toate acestea, ce vom face cu erorile XHR?

Sentry are, de asemenea, o gestionare personalizată a erorilor. L-am folosit pentru a urmări erorile API.

Sentry.captureException(err)

Puteți configura numele erorii, nivelul, adăuga date, date de utilizator unice prin aplicația dvs., e-mail etc.

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

Aș dori să folosesc o funcție comună pentru captura API.

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(); - Dacă doriți să obțineți feedback de la utilizatori cu privire la eroare
  return Sentry.captureException(error);
};

Importați această funcție în apelul 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));
      }
    });
};

Hai să verificăm metodele:

setLevel permete inserarea unei erori de nivel în panoul de control Sentry. Are proprietăți - 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser ajută la păstrarea oricăror date de utilizator (id, adresă de e-mail, plan de plată etc.).
setExtra permete să specificați orice date de care aveți nevoie, cum ar fi magazinul.

Dacă doriți să primiți feedback de la utilizatori cu privire la eroare, ar trebui să folosiți funcția showReportDialog.