ProHoster > Blog > uprava > Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Danas ću vam reći o praćenju grešaka u stvarnom vremenu u React aplikaciji. Front-end aplikacija obično se ne koristi za praćenje pogrešaka. Neke tvrtke često odgađaju praćenje bugova, vraćajući se na njega nakon dokumentacije, testova itd. Međutim, ako možete promijeniti svoj proizvod na bolje, onda to učinite!

1. Zašto vam je potreban Sentry?

Pretpostavljam da ste zainteresirani za praćenje grešaka tijekom proizvodnje

Mislite li da ovo nije dovoljno?

U redu, pogledajmo detalje.

Glavni razlozi zašto programeri koriste Sentry:

  • Omogućuje izbjegavanje rizika prilikom implementacije koda s pogreškama
  • Pomozite QA-u s testiranjem koda
  • Primajte brze obavijesti o problemima
  • Sposobnost brzog ispravljanja grešaka
  • Dobivanje prikladnog prikaza pogrešaka na administrativnoj ploči
  • Sortiraj pogreške prema segmentu korisnika/preglednika

Glavni razlozi za CEO/Lead projekt

  • Uštedite novac (Sentry se može instalirati na vaše poslužitelje)
  • Dobivanje povratnih informacija od korisnika
  • Razumijevanje što nije u redu s vašim projektom u stvarnom vremenu
  • Razumijevanje broja problema koje ljudi imaju s vašom aplikacijom
  • Pomoći vam da pronađete mjesta gdje su vaši programeri pogriješili

Mislim da bi programeri prvo bili zainteresirani za ovaj članak. Također možete koristiti ovaj popis razloga da uvjerite svog šefa da integrira Sentry.

Budite oprezni s posljednjom stavkom na poslovnom popisu.

Jeste li već zainteresirani?

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Što je Sentry?

Sentry je aplikacija otvorenog koda za praćenje bugova koja pomaže programerima da prate i popravljaju rušenja u stvarnom vremenu. Ne zaboravite da aplikacija omogućuje povećanje učinkovitosti i poboljšanje korisničkog iskustva. Sentry podržava JavaScript, Node, Python, PHP, Ruby, Java i druge programske jezike.

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

2. Prijavite se i kreirajte projekt

  • Otvorite svoj Sentry račun. Možda ćete se morati prijaviti. (Imajte na umu da se Sentry može instalirati na vaše poslužitelje)
  • Sljedeći korak je izrada projekta
  • Odaberite svoj jezik s popisa. (Odabrat ćemo React. Kliknite "Create Project")

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Prilagodite svoju aplikaciju. Osnovni primjer kako integrirati Sentry u spremnik može se vidjeti ispod:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

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

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

Sentry ima korisnog čarobnjaka koji vam pomaže da shvatite što trebate učiniti sljedeće. Možete slijediti ove korake. Želim vam pokazati kako stvoriti svoj prvi rukovatelj greškama. Super, napravili smo projekt! Prijeđimo na sljedeći korak

3. React i Sentry integracija

Morate instalirati npm paket u svoj projekt.

npm i @sentry/browser

Inicijalizirajte Sentry u svom spremniku:

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

DSN se nalazi u Projekti -> Postavke -> Ključevi klijenta. Ključeve klijenta možete pronaći u traci za pretraživanje.

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

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

4. Praćenje prve pogreške

Na primjer, koristio sam jednostavnu glazbenu aplikaciju s Deezer API-jem. Možeš vidjeti здесь. Moramo napraviti grešku. Jedan od načina je pristup svojstvu "undefined".

Moramo stvoriti gumb koji poziva konzola.log с korisnik.e-pošta. Nakon ove radnje trebali bismo primiti poruku pogreške: Uncaught TypeError (ne može se pročitati svojstvo iz nedefiniranog email) zbog nedostatka korisničkog objekta. Također možete koristiti Javascript iznimka.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

Cijeli spremnik izgleda ovako:

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://[email protected]/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)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Nakon integracije ovog gumba trebali biste ga testirati u pregledniku.

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Imamo prvu grešku

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Vau-hu!

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Ako kliknete na grešku u zaglavlju, vidjet ćete trag hrpe.

Praćenje pogrešaka u React aplikaciji pomoću Sentryja

Poruke izgledaju loše. Naravno, vidjeli smo poruke o pogrešci, a da nismo razumjeli gdje je kod. Prema zadanim postavkama govorimo o izvornoj mapi u ReactJS jer oni nisu konfigurirani.

Također bih želio pružiti upute za postavljanje izvorne karte, ali to bi ovaj članak učinilo mnogo dužim nego što sam namjeravao.

Možete proučavati ovu temu здесь. Ako ste zainteresirani za ovaj članak, Dmitrij Noženko objavit će drugi dio o integraciji mape izvora. Dakle, pritisnite više lajkova i pretplatite se Dmitrij Noženkoda ne propustim drugi dio.

5. korištenje Dežurni s krajnjom točkom API

U REDU. Iznimku javascripta pokrili smo u prethodnim paragrafima. Međutim, što ćemo učiniti s XHR pogreškama?

Sentry također ima prilagođeno rukovanje pogreškama. Koristio sam ga za praćenje grešaka API-ja.

Sentry.captureException(err)

Možete prilagoditi naziv pogreške, razinu, dodati podatke, jedinstvene korisničke podatke koristeći svoju aplikaciju, e-poštu itd.

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": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Želio bih koristiti generičku funkciju za catch 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(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

Uvezite ovu funkciju u svoj API poziv.

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

Provjerimo metode:

  • setLevel omogućuje umetanje pogreške razine u nadzornu ploču stražara. Ima svojstva - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
  • setUser pomaže u spremanju svih korisničkih podataka (id, adresa e-pošte, plan plaćanja itd.).
  • setExtra omogućuje vam da navedete bilo koje podatke koji su vam potrebni, na primjer, pohranite.

Ako želite dobiti povratne informacije od korisnika o bugu, trebali biste koristiti funkciju showReportDialog.

Sentry.showReportDialog();

Zaključak:

Danas smo opisali jedan način kako integrirati Sentry u React aplikaciju.

→ Telegram chat by Dežurni

Izvor: www.habr.com

Dodajte komentar