🥇Felkodning i en React-app med Sentry

Idag kommer jag att berätta om realtidsfelspårning i en React-applikation. Gränssnittsapplikationen används vanligtvis inte för felspårning. Många företag skjuter ofta upp felspårning och återkommer till det efter dokumentation, tester och så vidare. Men om du kan förbättra din produkt, gör bara det!

1. Varför behöver du Sentry?

Jag antar att du är intresserad av att spåra fel i produktionsprocessen.

Tycker du att det är otillräckligt?

Bra, låt oss titta på detaljerna.

Huvudskälen till att använda Sentry för utvecklare:

Minskar riskerna vid distribution av kod med fel.
Hjälper QA att testa koden.
Får snabba aviseringar om problem.
Möjlighet att snabbt åtgärda fel.
Får en användarvänlig visualisering av fel i administrationspanelen.
Sortera fel efter användarsegment / webbläsare.

Huvudskälen för CEO / projektledare.

Spara pengar (Sentry kan installeras på era servrar).
Få användarfeedback.
Förstå vad som går fel med ditt projekt i realtid.
Förstå hur många problem användare har med din applikation.
Hjälper till att identifiera områden där dina utvecklare har gjort misstag.

Jag tror att utvecklare skulle vara särskilt intresserade av den här artikeln. Du kan också använda denna lista med skäl för att övertyga ledningen att integrera Sentry.

Var försiktig med den sista punkten på listan för företaget.

Är du redan intresserad?

Vad är Sentry?

Sentry är en felspårningsapplikation med öppen källkod som hjälper utvecklare att spåra och åtgärda krascher i realtid. Tänk också på att applikationen kan öka effektiviteten och förbättra användarupplevelsen. Sentry stöder JavaScript, Node, Python, PHP, Ruby, Java och andra programmeringsspråk.

2. Logga in och skapa ett projekt.

Öppna ditt Sentry-konto. Du kanske måste logga in. (Observera att Sentry kan installeras på era servrar.)
Det nästa steget är att skapa ett projekt.
Välj ditt språk från listan. (Vi kommer att välja React. Klicka på 'Skapa projekt.')

Ställ in din applikation. Ett grundläggande exempel på hur man integrerar Sentry i en behållare kan ses nedan:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// skulle ha anropats innan det används här
// helst innan din React-app ens renderas

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;Rapportera feedback</a>
            );
        } else {
            //när det inte finns något fel, rendera barnen oförändrade
            return this.props.children;
        }
    }
}

I Sentry finns det en användbar guide som hjälper dig att förstå vad du bör göra härnäst. Du kan följa dessa steg. Jag vill visa dig hur du skapar din första felhanterare. Utmärkt, vi har skapat ett projekt! Låt oss gå vidare till nästa steg.

3. Integration av React och Sentry

Du måste installera npm-paketet i ditt projekt.

npm i @sentry/browser

Initiera Sentry i din behållare:

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

DSN finns under Projekt -> Inställningar -> Klientnycklar. Du kan hitta klientnycklarna i sökfältet.

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

4. Spåra det första felet

Jag använde till exempel en enkel musikapplikation med Deezer API. Du kan se det. här. Vi behöver skapa ett fel. Ett sätt att göra detta är att åtkomma egenskapen "undefined".

Vi måste skapa en knapp som anropar. console.log med user.email. Efter detta åtgärd bör vi få ett felmeddelande: Uncaught TypeError (kan inte läsa egenskap från undefined e-post) på grund av att användarobjektet saknas. Du kan också använda Javascript-undantag.

Hela behållaren ser ut så här:

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;Rapportera feedback1</div>
        <h1>Musik Sökare</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 att ha integrerat denna knapp bör du testa den i webbläsaren.

Vi har vårt första fel.

Whoo-hoo!

Om du klickar på felrubriken kommer du att se stacktraceringen.

Meddelandena ser dåliga ut. Självklart har vi sett felmeddelanden utan att förstå var denna kod är. Som standard handlar det om källkartan i ReactJS, eftersom de inte är konfigurerade.

Jag skulle också vilja ge instruktioner om hur man konfigurerar källkartan, men det skulle göra denna artikel mycket längre än jag hade planerat.

Du kan utforska detta ämne. här. Om du är intresserad av denna artikel, Dmitry Nozhenko kommer att publicera del två om integration av källkartan. Så tryck gärna på fler gilla-markeringar och prenumerera på Dmitry Nozhenko, så att du inte missar del två.

5. Användning Sentry med slutpunkt API

Okej. Vi har gått igenom Javascript-undantaget i de tidigare punkterna. Men vad ska vi göra med XHR-fel?

Sentry har också anpassad felhantering. Jag har använt den för att spåra API-fel.

Sentry.captureException(err)

Du kan konfigurera felnamn, nivå, lägga till data, unika användardata med din app, e-post etc.

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

Jag skulle vilja använda en gemensam funktion för 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(); - Om du vill få återkoppling från användare om fel
  return Sentry.captureException(error);
};

Importera denna funktion i api-anropet.

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

Låt oss kolla metoderna:

setLevel låter dig infoga en fel nivå i Sentrys instrumentbräda. Den har egenskaper – 'fatal', 'error', 'warning', 'log', 'info', 'debug', 'critical'.
setUser hjälper till att spara alla användardata (id, e-postadress, betalningsplan etc.).
setExtra låter dig ange vilken data du behöver, till exempel butiken.

Om du vill få användarfeedback om ett fel bör du använda funktionen showReportDialog.