🥇Fejlhåndtering i React-applikation med Sentry

I dag vil jeg fortælle dig om fejlhåndtering i realtid i en React-app. En frontend-applikation bruges normalt ikke til fejlhåndtering. Nogle virksomheder udsætter ofte fejlhåndtering og vender tilbage til det efter dokumentation, test og så videre. Men hvis du kan forbedre dit produkt, så gør det blot!

1. Hvorfor har du brug for Sentry?

Jeg antager, at du er interesseret i fejlhåndtering i produktionsprocessen.

Mener du, at det ikke er nok?

Okay, lad os se på detaljerne.

De vigtigste grunde til at bruge Sentry for udviklere:

Giver dig mulighed for at undgå risici ved at implementere fejlbehæftet kode.
Hjælper QA med at teste koden.
Modtag hurtige notifikationer om problemer.
Mulighed for hurtigt at rette fejl.
Få et brugervenligt overblik over fejl i administrationspanelet.
Sortér fejl efter bruger / browser-segmenter.

De vigtigste grunde for CEO / projektleder.

Spar penge (Sentry kan installeres på dine servere).
Modtag brugertilbagemeldinger.
Forstå, hvad der er galt med dit projekt i realtid.
Forstå antallet af problemer, folk har med din applikation.
Hjælp med at finde steder, hvor dine udviklere har lavet fejl.

Jeg mener, at udviklere først og fremmest ville være interesseret i denne artikel. Du kan også bruge denne liste over grunde til at overbevise ledelsen om at integrere Sentry.

Vær forsigtig med det sidste punkt på listen for virksomheder.

Er du allerede interesseret?

Hvad er Sentry?

Sentry er en open source-app til fejlhåndtering, der hjælper udviklere med at spore og rette nedbrud i realtid. Husk også, at appen kan forbedre effektiviteten og brugervenligheden. Sentry understøtter JavaScript, Node, Python, PHP, Ruby, Java og andre programmeringssprog.

2. Log ind og opret et projekt.

Åbn din Sentry-konto. Du skal muligvis logge ind. (Bemærk, at Sentry kan installeres på dine servere).
Næste skridt er at oprette et projekt.
Vælg dit sprog fra listen. (Vi vil vælge React. Klik på 'Opret projekt').

Konfigurer din applikation. Et grundlæggende eksempel på, hvordan du integrerer Sentry i en container, kan ses nedenfor:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// skulle have været kaldt før brug her
// ideelt set før du overhovedet gengiver din react-app 

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) {
            // gengiv fallback UI
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Rapportér feedback</a>
            );
        } else {
            // når der ikke er en fejl, gengiv børn uændret
            return this.props.children;
        }
    }
}

Sentry har en nyttig guide, der hjælper dig med at forstå, hvad du skal gøre næste gang. Du kan følge disse trin. Jeg vil vise dig, hvordan du opretter din første fejlbehandler. Godt, vi har oprettet projektet! Lad os gå videre til næste trin.

3. Integration af React og Sentry

Du skal installere npm pakken i dit projekt.

npm i @sentry/browser

Initialiser Sentry i din container:

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

DSN findes under Projects -> Settings -> Client Keys. Du kan finde klientnøglerne i søgefeltet.

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

4. Sporing af den første fejl

Jeg har for eksempel brugt en simpel musikapp med Deezer API. Du kan se det her. Vi skal skabe en fejl. En måde at gøre dette på er ved at tilgå en "undefined" egenskab.

Vi skal lave en knap, der kalder console.log med user.email. Efter denne handling skal vi modtage en fejlmeddelelse: Uncaught TypeError (kan ikke læse egenskaben fra udefineret email) fordi brugerobjektet mangler. Du kan også bruge JavaScript undtagelse.

Hele containeren ser således ud:

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;Rapporter feedback1</div>
        <h1>Musik 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);

Efter integrationen af denne knap skal du teste den i din browser.

Vi har den første fejl

Whoo-hoo!

Hvis du klikker på fejloverskriften, vil du se staksporet.

Fejlmeddelelserne ser dårlige ud. Selvfølgelig har vi set fejlmeddelelser, men uden at forstå, hvor denne kode er. Som standard handler det om kildekortet i ReactJS, fordi de ikke er konfigureret.

Jeg ville også gerne give instruktioner til opsætning af kildekortet, men det ville gøre denne artikel meget længere, end jeg havde planlagt.

Du kan udforske dette emne her. Hvis du er interesseret i denne artikel, Dmitry Nozhenko vil publicere del to om integration af kildekort. Så tryk på flere likes og tilmeld dig Dmitry Nozhenko, så du ikke går glip af del to.

5. Brug Sentry med slutpunktet API

Okay. Vi har behandlet JavaScript-undtagelsen i de foregående punkter. Men hvad skal vi gøre med XHR-fejlene?

Sentry har også brugerdefineret fejlbehandling. Jeg har brugt det til at spore API-fejl.

Sentry.captureException(err)

Du kan konfigurere fejlens navn, niveau, tilføje data, unikke brugerdata med din applikation, e-mail osv.

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

Jeg vil gerne bruge en fælles funktion til API catch.

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(); - Hvis du vil have feedback fra brugerne om fejlen
  return Sentry.captureException(error);
};

Importer denne funktion i api-kaldet.

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

Lad os tjekke metoderne:

setLevel gør det muligt at indsætte en fejlniveau i Sentry-dashboardet. Den har egenskaberne - ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’.
setUser hjælper med at gemme eventuelle brugerdata (id, e-mailadresse, abonnementsplan osv.).
setExtra gør det muligt at angive enhver data, du har brug for, såsom butikken.

Hvis du ønsker at få feedback fra brugerne om en fejl, bør du bruge funktionen showReportDialog.