🥇Hibák nyomon követése React alkalmazásban a Sentry segítségével

Ma bemutatok egy valós idejű hibafigyelést a React alkalmazásban. A felhasználói felületet általában nem használják hibafigyelésre. Egyes cégek gyakran késlekednek a hibafigyeléssel, és csak a dokumentáció, tesztelés és egyéb teendők után térnek vissza rá. Azonban, ha tudja javítani a termékét, akkor egyszerűen tegye meg!

1. Miért van szüksége a Sentry-re?

Feltételezem, hogy érdekli a hibafigyelés a gyártási folyamat során.

Úgy gondolja, hogy ez nem elég?

Rendben, nézzük meg a részleteket.

A Sentry használatának fő okai a fejlesztők számára:

Csökkenti a kockázatokat a hibás kód telepítésekor.
Segítség a QA-nak a kód tesztelésében.
Gyors értesítések a problémákról.
Lehetővé teszi a hibák gyors javítását.
Kényelmes hibajelentések megjelenítése az admin panelen.
Hibák szegmentálása felhasználó / böngésző szerint.

A CEO-k / Projektvezetők főbb okai.

Pénzmegtakarítás (a Sentry-t a saját szerverein is telepítheti).
Felhasználói visszajelzések beszerzése.
Valós idejű megértése annak, hogy mi a probléma a projektjével.
Azt is megérteni, hogy hány problémával találkoznak az emberek az alkalmazásával.
Segít megtalálni azokat a helyeket, ahol a fejlesztők hiba majd.

Azt hiszem, elsősorban a fejlesztők érdeklődnének ez iránt a cikk iránt. Ezen kívül ezt a lista okát használhatja arra, hogy meggyőzze a felsővezetést a Sentry integrálásáról.

Legyen óvatos az utolsó ponttal a vállalkozások számára.

Már érdeklődik?

Mi az a Sentry?

A Sentry egy nyílt forráskódú hibafigyelő alkalmazás, amely segít a fejlesztőknek a hibák valós idejű nyomon követésében és javításában. Ne feledkezzen meg arról sem, hogy az alkalmazás elősegíti a hatékonyság növelését és a felhasználói élmény javítását. A Sentry támogatja a JavaScript, Node, Python, PHP, Ruby, Java és más programozási nyelveket.

2. Jelentkezzen be és hozzon létre projektet.

Nyissa meg a Sentry fiókját. Lehet, hogy be kell jelentkeznie. (Ne feledje, hogy a Sentry-t a saját szerverein is telepítheti.)
A következő lépés egy projekt létrehozása.
Válassza ki a nyelvét a listából. (Mi a React-ot fogjuk választani. Kattintson a 'Projekt létrehozása' gombra.)

Állítsa be az alkalmazását. Az alábbiakban láthatja a Sentry konténerbe való integrálásának alapvető példáját:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// Ezt ideje lett volna hívni, mielőtt itt használnánk
// lehetőleg még a React alkalmazásod renderelése előtt

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) {
            //hiba esetén a visszatérő UI renderelése
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Visszajelzés jelentése</a>
            );
        } else {
            //ha nincs hiba, a gyermekek változatlanul renderelése
            return this.props.children;
        }
    }
}

A Sentry rendelkezik egy hasznos varázslóval, amely segít megérteni, mit kell tennie következő lépésként. Az alábbi lépéseket hajthatja végre. Szeretném megmutatni, hogyan lehet létrehozni az első hibakezelőt. Remek, létrehoztuk a projektet! Térjünk át a következő lépésre.

3. React és Sentry integrálása

Telepítenie kell az npm csomagot a projektjébe.

npm i @sentry/browser

Inicializálja a Sentry-t a konténerében:

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

A DSN a Projektek -> Beállítások -> Kliensek kulcsai alatt található. A kliens kulcsokat a keresősávból találhatja meg.

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

4. Az első hiba nyomon követése

Például egy egyszerű zenei alkalmazást használtam a Deezer API-jával. Ezt láthatja. itt. Hiba létrehozására van szükségünk. Az egyik módja az, hogy megpróbálunk hozzáférni az "undefined" tulajdonsághoz.

Létre kell hoznunk egy gombot, amely meghívja a console.log a user.email. Ezt követően hibaüzenetet kell kapnunk: Uncaught TypeError (nem tudja elérni a tulajdonságot a definálatlan email) mert hiányzik a felhasználói objektum. Használhatja az JavaScript kivételt is..

<button type="button" onClick={() => console.log(user.email)}>   
  Hiba teszt gomb 
<\/button>

A teljes konténer így néz ki:

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;
          teszt hiba1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Visszajelzés jelentése1</div>
        <h1>Zene Kereső</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);

A gomb integrálása után tesztelnie kell azt a böngészőben.

Megvan az első hiba.

Hurrá!

Ha rákattint a hiba fejlécére, láthatja a stack trace-t.

Az üzenetek rosszul néznek ki. Természetesen láttunk hibaüzeneteket anélkül, hogy tudnánk, hol van ez a kód. Alapértelmezés szerint ez a ReactJS forrásképéről van szó, mert azok nincsenek beállítva.

Azt is szeretném megadni az utasításokat a forráskép beállításához, de ez sokkal hosszabbá tenné ezt a cikket, mint amit terveztem.

Ezt a témát megismerheti itt. Ha érdekli ez a cikk, Dmitry Nozhenko a forráskép integrációjáról szóló második részt fogja közölni. Tehát nyomd meg a több lájkot és iratkozz fel a Dmitry Nozhenko, hogy ne maradj le a második részről.

5. Használat Sentry végponttal API

Rendben. Az előző pontokban átbeszéltük a Javascript kivételt. De mit fogunk tenni az XHR hibákkal?

A Sentry lehetőséget biztosít a felhasználói hibakezelésre is. Használtam az API hibáinak nyomon követésére.

Sentry.captureException(err)

Beállíthatja a hiba nevét, szintet, hozzáadhat adatokat, egyedi felhasználói adatokat az alkalmazása, e-mailje stb. segítségével.

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

Szeretném általános funkcióként használni az API catch-t.

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(); - Ha szeretné, hogy a felhasználók visszajelzést adjanak a hibáról
  return Sentry.captureException(error);
};

Importálja ezt a funkciót az API hívásába.

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

Nézzük meg a módszereket:

setLevel lehetővé teszi a hiba szintjének beillesztését a Sentry irányítópultjára. Tulajdonságai: 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser segít megőrizni bármilyen felhasználói adatot (id, e-mail cím, előfizetési csomag stb.).
setExtra lehetővé teszi bármilyen szükséges adat megadását, például a bolt adatait.

Ha visszajelzéseket szeretne kapni a felhasználóktól a hibáról, használja a showReportDialog funkciót.