🥇Fouten volgen in een React-applicatie met Sentry

Vandaag ga ik je vertellen over het volgen van fouten in realtime in een React-applicatie. De user interface-applicatie wordt meestal niet gebruikt voor het volgen van fouten. Sommige bedrijven stellen het volgen van fouten vaak uit en keren hier later op terug na documentatie, tests en dergelijke. Maar als je je product kunt verbeteren, doe het dan gewoon!

1. Waarom heb je Sentry nodig?

Ik neem aan dat je geïnteresseerd bent in het volgen van fouten tijdens productie.

Denk je dat dit niet genoeg is?

Goed, laten we de details bekijken.

De belangrijkste redenen om Sentry te gebruiken voor ontwikkelaars:

Het vermindert de risico's bij het implementeren van foutieve code.
Hulp voor QA bij het testen van code.
Ontvang snel meldingen over problemen.
Mogelijkheid om snel fouten te verhelpen.
Een handige weergave van fouten in het beheerpaneel.
Fouten sorteren op gebruikerssegment/browser.

Belangrijkste redenen voor CEO/projectleider.

Bespaar geld (Sentry kan op jouw servers worden geïnstalleerd).
Ontvang feedback van gebruikers.
Inzicht in wat er mis is met je project in realtime.
Inzicht in het aantal problemen dat mensen met jouw applicatie ondervinden.
Helpt bij het vinden van plekken waar je ontwikkelaars fouten hebben gemaakt.

Ik denk dat ontwikkelaars in de eerste plaats geïnteresseerd zouden zijn in dit artikel. Je kunt deze lijst met redenen ook gebruiken om je leidinggevenden te overtuigen om Sentry te integreren.

Wees voorzichtig met het laatste punt op de lijst voor bedrijven.

Ben je al geïnteresseerd?

Wat is Sentry?

Sentry is een open-source foutopsporingsapplicatie die ontwikkelaars helpt om foutmeldingen in realtime te volgen en op te lossen. Vergeet niet dat de applicatie ook helpt om de efficiëntie te verbeteren en de gebruikerservaring te optimaliseren. Sentry ondersteunt JavaScript, Node, Python, PHP, Ruby, Java en andere programmeertalen.

2. Meld je aan en maak een project aan.

Open je Sentry-account. Mogelijk moet je inloggen. (Houd er rekening mee dat Sentry op jouw servers kan worden geïnstalleerd.)
De volgende stap is een project aanmaken.
Kies je taal uit de lijst. (We gaan React kiezen. Klik op 'Project aanmaken.')

Stel uw applicatie in. Een basisvoorbeeld van hoe u Sentry in een container kunt integreren, ziet u hieronder:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// moet zijn aangeroepen voordat het hier wordt gebruikt
// idealiter zelfs voordat je je react-app rendert 

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;Feedback rapporteren</a>
            );
        } else {
            // wanneer er geen fout is, render kinderen ongewijzigd
            return this.props.children;
        }
    }
}

Sentry heeft een handige Wizard die u helpt te begrijpen wat u vervolgens moet doen. U kunt de volgende stappen uitvoeren. Ik wil u laten zien hoe u uw eerste foutafhandelaar maakt. Geweldig, we hebben een project aangemaakt! Laten we verder gaan naar de volgende stap.

3. Integratie van React en Sentry

U moet het npm-pakket in uw project installeren.

npm i @sentry/browser

Initialiseer Sentry in uw container:

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

DSN bevindt zich in Projects -> Settings -> Client Keys. U kunt de clientkeys vinden in de zoekbalk.

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

4. Volgen van de eerste fout

Ik heb bijvoorbeeld een eenvoudige muziekapplicatie met de Deezer API gebruikt. U kunt dit zien. hier. We moeten een fout creëren. Een manier om dit te doen is door toegang te vragen tot een "undefined" eigenschap.

We moeten een knop maken die aanroept console.log met user.email. Na deze actie zouden we een foutmelding moeten ontvangen: Uncaught TypeError (kan eigenschap niet lezen van undefined e-mail) door een ontbrekend gebruikersobject. U kunt ook gebruikmaken van Javascript-exceptie..

De hele container ziet er als volgt uit:

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 fout1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Rapporteer feedback1</div>
        <h1>Muziek Zoekmachine</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);

Na het integreren van deze knop moet u deze in de browser testen.

We hebben onze eerste fout

Hoera!

Als u op de foutkop klikt, ziet u de stacktrace.

De berichten zien er niet goed uit. Natuurlijk hebben we foutberichten gezien zonder te begrijpen waar deze code zich bevindt. Standaard betreft dit de source map in ReactJS, omdat ze niet zijn ingesteld.

Ik zou ook instructies willen geven voor het instellen van de source map, maar dat zou dit artikel veel langer maken dan ik had gepland.

U kunt dit onderwerp verder onderzoeken. hier. Als u geïnteresseerd bent in dit artikel, Dmitry Nozhenko publiceert een tweede deel over de integratie van source maps. Dus klik op meer likes en abonneer je op Dmitry Nozhenko, zodat u het tweede deel niet mist.

5. Gebruik Sentry met een eindpunt API

Oké. We hebben de Javascript-exceptie in de vorige punten behandeld. Maar wat doen we met XHR-fouten?

Sentry heeft ook een gebruikersspecifieke foutverwerking. Ik heb het gebruikt om API-fouten te volgen.

Sentry.captureException(err)

U kunt de foutnaam, het niveau instellen en gegevens, unieke gebruikersgegevens via uw applicatie, e-mail, enz. toevoegen.

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

Ik wil een algemene functie gebruiken voor 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(); - Als u feedback van gebruikers over een fout wilt krijgen
  return Sentry.captureException(error);
};

Importeer deze functie in de API-aanroep.

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

Laten we de methoden controleren:

setLevel maakt het mogelijk om een fouteniveau in het sentry-dashboard in te voegen. Het heeft eigenschappen - 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser helpt om alle gebruikersgegevens (id, e-mailadres, abonnementsplan, enz.) op te slaan.
setExtra maakt het mogelijk om alle gegevens te specificeren die u nodig heeft, zoals de winkel.

Als u feedback van gebruikers over een fout wilt ontvangen, moet u de functie showReportDialog gebruiken.