Gjetja e gabimeve në aplikacionin React me Sentry

Sot mund të flas sot për ndjekjen e gabimeve në kohë reale në aplikacionin React. Aplikacioni i ndërfaqes përdoruesi zakonisht nuk përdoret për ndjekjen e gabimeve. Disa kompani shpesh vonojnë ndjekjen e gabimeve, duke u kthyer tek ajo pas dokumentimit, testeve dhe të tjera. Megjithatë, nëse mund të ndryshoni produktin tuaj për mirë, thjesht bëjeni këtë!

1. Pse ju nevojitet Sentry?

Supozoj se jeni të interesuar për ndjekjen e gabimeve në procesin e prodhimit.

Mendoni se kjo nuk është e mjaftueshme?

Mirë, le të shohim detajet.

Arsyet kryesore për përdorimin e Sentry për zhvilluesit:

• Lehtëson heqjen e rreziqeve gjatë implementimit të kodit me gabime.
• Ndihmon QA-në në testimin e kodit.
• Mundësia për të marrë njoftime të shpejta mbi problemet.
• Mundësia për të rregulluar gabimet shpejt.
• Mundësia për të marrë një pamje të favorshme të gabimeve në panelin e administratës.
• Klasifikimi i gabimeve sipas segmenteve të përdoruesve / shfletuesit.

Arsyet kryesore për CEO-në / Shefin e projektit.

• Kursimi i parave (Sentry mund të instalohet në serverët tuaj).
• Marrja e komenteve nga përdoruesit.
• Kuptimi se çfarë nuk shkon me projektin tuaj në kohë reale.
• Kuptimi i numrit të problemeve që hasin njerëzit me aplikacionin tuaj.
• Ndihmon në identifikimin e vendeve ku zhvilluesit tuaj kanë bërë gabime.

Mendoj se zhvilluesit do të ishin të interesuar për këtë artikull në radhë të parë. Ju gjithashtu mund të përdorni këtë listë arsyesh për të bindur menaxhimin të integrojë Sentry.

Kujdesuni shume me Pikën e fundit në listën për biznesin.

A jeni tashmë të interesuar?

Çfarë është Sentry?

Sentry është një aplikacion për ndjekjen e gabimeve me kod të hapur, i cili ndihmon zhvilluesit të ndjekin dhe rregullojnë dështimet në kohë reale. Mos harroni gjithashtu se aplikacioni ndihmon në rritjen e efikasitetit dhe përmirësimin e përdorimit nga ana e përdoruesve. Sentry mbështet JavaScript, Node, Python, PHP, Ruby, Java dhe gjuhë të tjera programimi.

2. Hyni dhe krijoni një projekt

• Hapni llogarinë tuaj Sentry. Ndoshta do t'ju duhet të kyçeni. (Kujdes që Sentry mund të instalohet në serverët tuaj.)
• Hapi tjetër është të krijoni një projekt.
• Zgjidhni gjuhën tuaj nga lista. (Ne do të zgjedhim React. Klikoni "Krijo projekt")

Konfiguroni aplikacionin tuaj. Një shembull bazë se si të integrohet Sentry në një kontejner mund ta shihni më poshtë:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// duhet të jetë thirrur para se ta përdorni këtu
// idealisht para renderimit të aplikacionit tuaj 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) {
            //render fallback UI
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Raporto feedback</a>
            );
        } else {
            //kur nuk ka gabim, renderoni fëmijët pa prekje
            return this.props.children;
        }
    }
}

Sentry ka një Asistent të dobishëm që do t'ju ndihmojë të kuptoni se çfarë duhet të bëni më pas. Mund të kryeni hapat e mëposhtëm. Dua t'ju tregoj se si të krijoni trajtuesin tuaj të parë të gabimeve. Shkëlqyeshëm, ne krijuam projektin! Le të kalojmë në hapin tjetër.

3. Integrimi i React dhe Sentry

Duhet të instaloni paketën npm në projektin tuaj.

npm i @sentry/browser

Inicializoni Sentry në kontejnerin tuaj:

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

DSN ndodhet në Projekte -> Cilësimet -> Çelësat e Klientit. Mund të gjeni çelësat e klientit në vijen e kërkimit.

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

4. Ndjekja e gabimit të parë

Unë, për shembull, kam përdorur një aplikacion muzikor të thjeshtë me API Deezer. Mund ta shihni këtë. këtu. Na nevojitet të krijojmë një gabim. Një nga mënyrat është të ndërmarrim një pronë "undefined".

Duhet të krijojmë një buton që thërret console.log me user.email. Pas këtij veprimi, duhet të marrim një mesazh gabimi: Uncaught TypeError (nuk mund të lexoj pronën nga e pa definuar email) për shkak të mungesës së objektit të përdoruesit. Mund të përdorni gjithashtu përjashtimin Javascript.

 console.log(user.email)}>
  Test Error button 

I gjithë kontejneri duket kështu:

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 => ({
  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 => {
      Object.keys(errorInfo).forEach(key => {
        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;Raporto feedback1</div>
        <h1>Gjej Muzik</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);

Pas integrimit të këtij butoni, duhet ta testoni atë në shfletues.

Kemi gabimin tonë të parë

Whoo-hoo!

Nëse klikoni mbi gabimin e titullit, do të shihni gjurmimin e grumbullit.

Mesazhet duken keq. Sigurisht, kemi parë mesazhe gabimesh pa e kuptuar se ku ndodhet ky kod. Për default, flasim për hartën origjinale në ReactJS, sepse ato nuk janë të configuruar.

Unë gjithashtu do të doja të ofroja udhëzime për konfigurimin e hartës origjinale, por kjo do ta bënte këtë artikull shumë më të gjatë sesa e kisha planifikuar.

Mund ta studioni këtë temë këtu. Nëse jeni të interesuar për këtë artikull, Dmitry Nozhenko do të publikojë pjesën e dytë mbi integrimin e hartës origjinale. Pra, klikoni më shumë pëlqime dhe abonohuni në Dmitry Nozhenko, për të mos humbur pjesën e dytë.

5. Përdorimi Sentry me pikën e fundit API

Mirë. Ne kemi trajtuar përjashtimin javascript në pikat e mëparshme. Megjithatë, çfarë do të bëjmë me gabimet XHR?

Sentry ka gjithashtu përpunim të personalizuar të gabimeve. Unë e kam përdorur atë për të ndjekur gabimet e api.

Sentry.captureException(err)

Ju mund t'i konfiguroni emrat e gabimeve, nivelin, të shtoni të dhëna, të dhëna unike të përdoruesve përmes aplikacionit tuaj, emailit, etj.

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

Do doja të përdor një funksion të përbashkët për kapjen e API-ve.

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(); - Nëse dëshiron të marrësh feedback nga përdoruesit për gabimin
  return Sentry.captureException(error);
};

Importoni këtë funksion në thirrjen e API-së.

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

Le t'i kontrollojmë metodat:

• setLevel lejon futjen e një gabimi në nivelin e panelit të monitorimit Sentry. Ka pronat — ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’).
• setUser ndihmon në ruajtjen e çdo të dhëne të përdoruesit (id, adresë elektrike, plan pagesa, etj.).
• setExtra lejon përcaktimin e çdo të dhëne që ju nevojitet, për shembull, tregu.

Nëse dëshiron të marrësh reagime nga përdoruesit mbi një gabim, duhet të përdorësh funksionin showReportDialog.

Sentry.showReportDialog();

Përfundimi:

Sot përshkruam një nga mënyrat për të integruar Sentry në aplikacionin React.

→ Biseda në Telegram mbi Sentry

Burimi: habr.com