Ndjekja e gabimeve në aplikacionin React me ndihmën e Sentry

Sot do t'ju tregoj për ndjekjen e gabimeve në kohë reale në aplikacionin React. Aplikacioni i ndërfaqes së jashtme zakonisht nuk përdoret për ndjekjen e gabimeve. Disa kompani shpesh e shtyjnë ndjekjen e gabimeve, duke u kthyer tek ajo pas dokumentacionit, testeve dhe kështu me radhë. Megjithatë, nëse mund të përmirësoni produktin tuaj, thjesht bëni këtë!

1. Pse ju nevojitet Sentry?

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

Mendoni se është e pamjaftueshme?

Mirë, le të shohim detajet.

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

• Lejon të eliminoni rreziqet gjatë shpërndarjes së kodit me gabime
• Ndihma e QA në testimin e kodit
• Marrja e njoftimeve të shpejta për problemet
• Mundësia për korrigjimin e shpejtë të gabimeve
• Marrja e një pamjeje të Qartë të gabimeve në panelin e administratorit
• Kategorizimi i gabimeve sipas segmenteve të përdoruesve / shfletuesit

Arsyet kryesore për CEO / Drejtuesin e projektit

• Kursimi i parave (Sentry mund të instalohet në serverët tuaj)
• Marrja e feedback-ut nga përdoruesit
• Të kuptuarit e asaj që nuk shkon me projektin tuaj në kohë reale
• Kuptimi i numrit të problemeve që paraqesin njerëzit me aplikacionin tuaj
• Ndihma për të gjetur vendet ku zhvilluesit tuaj patën lëshime

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 menaxhmentin të integrojë Sentry.

Bëni kujdes me pikën e fundit në listë për biznesin.

A jeni tani të interesuar?

Çfarë është Sentry?

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

2. Hyni dhe krijoni një projekt

• Hapni llogarinë tuaj në Sentry. Ndoshta duhet të hyni në sistem. (Vërej se Sentry mund të instalohet në serverët tuaj)
• Hapi tjetër është krijimi i një projekti
• Zgjidhni gjuhën tuaj nga lista. (Ne po planifikojmë 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ë ishte thirrur para se ta përdorni këtu
// idealisht para se të renderizoni aplikacionin tuaj reagues 

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 ndonjë gabim, renderizoni fëmijët pa ndryshime
            return this.props.children;
        }
    }
}

Në Sentry ka një Mjeshtër të dobishëm që do t'ju ndihmojë të kuptoni se çfarë duhet të bëni më pas. Mund të ndiqni këto hapa. Dua t'ju tregoj si të krijoni trajtuesin e parë të gabimeve. Shkëlqyeshëm, krijuam projektin! 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ë Projects -> Settings -> Client Keys. Mund ta gjeni çelësin e klientit në linjën 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ë

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ë referohemi në pronën "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 undefined) email) për shkak të mungesës së objektit të përdoruesit. Mund ta përdorni gjithashtu përjashtimin Javascript.

 console.log(user.email)}>
  Testo butonin e gabimit

I gjithë kontenieri 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;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);

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

Kemi një gabim të parë

Bravo!

Nëse klikoni në gabimin e titullit, do të shihni gjurmën e stack-ut.

Mesazhet duken keq. Sigurisht, kemi parë mesazhe gabimi të paqarta, pa kuptuar se ku ndodhet ky kod. Në mënyrë të parazgjedhur, kjo është për hartën e burimeve në ReactJS, sepse ato nuk janë të konfigurueshme.

Do të doja gjithashtu të ofroja udhëzime për konfigurimin e hartës së burimeve, por kjo do e bënte këtë artikull shumë më të gjatë se sa kisha planifikuar.

Mund të eksploroni këtë temë këtu. Nëse jeni të interesuar në këtë artikull, Dmitry Nozhenko do të publikojë pjesën e dytë mbi integrimin e hartës së burimeve. Pra, bëni më shumë like dhe regjistrohuni në Dmitry Nozhenko, që të mos humbisni pjesën e dytë.

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

Ok. E kemi shqyrtuar përjashtimin e javascript në pikat e mëparshme. Megjithatë, çfarë do të bëjmë me gabimet XHR?

Sentry gjithashtu ka përpunim të personalizuar të gabimeve. E kam përdorur për të ndjekur gabimet e API.

Sentry.captureException(err)

Mund të konfiguroni emrin e gabimit, nivelin, të shtoni të dhëna, të dhëna unike për përdoruesin me aplikacionin tuaj, emailin 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ë zakonshëm për kapjen e 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(); - Nëse dëshiron të marrësh reagimin e përdoruesve mbi gabimin
  return Sentry.captureException(error);
};

Importoni këtë funksion në thirrjen e 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));
      }
    });
};

Le të kontrollojmë metodat:

• setLevel lejon një mesazh gabimi në panelin e monitorimit Sentry. Ajo ka pronësi — 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
• setUser ndihmon në ruajtjen e çdo të dhëne përdoruesi (id, adresë emaili, plan pagese, etj.).
• setExtra lejon të caktosh çdo të dhënë që të nevojitet, si p.sh. dyqani.

Nëse dëshiron të marrësh komente nga përdoruesit për gabimin, duhet të përdorësh funksionin showReportDialog.

Sentry.showReportDialog();

Dalja:

Sot kemi përshkruar një nga mënyrat për të integruar Sentry në një aplikacion React.

→ Biseda në Telegram për Sentry

Burimi: habr.com