🥇Klaidų stebėjimas programoje React naudojant Sentry

Šiandien aš jums papasakosiu apie klaidų stebėjimą realiuoju laiku „React“ programoje. Priekinė programa paprastai nenaudojama klaidų stebėjimui. Kai kurios įmonės dažnai atideda klaidų sekimą, grįžta prie jo po dokumentų, testų ir pan. Tačiau jei galite pakeisti savo produktą į geresnę pusę, tiesiog padarykite tai!

1. Kodėl jums reikia Sentry?

Manau, kad jus domina klaidų sekimas gamybos metu

Ar manote, kad to nepakanka?

Gerai, pažiūrėkime į detales.

Pagrindinės priežastys, kodėl kūrėjai naudoja „Sentry“:

Leidžia išvengti rizikos diegiant kodą su klaidomis
Padėkite QA atlikti kodo testavimą
Gaukite greitus pranešimus apie problemas
Gebėjimas greitai ištaisyti klaidas
Patogus klaidų rodymas administratoriaus skydelyje
Rūšiuoti klaidas pagal vartotojo / naršyklės segmentą

Pagrindinės CEO/Lead projekto priežastys

Sutaupykite pinigų (Sentry gali būti įdiegtas jūsų serveriuose)
Naudotojų atsiliepimų gavimas
Supraskite, kas negerai su jūsų projektu realiuoju laiku
Suprasti, kiek problemų žmonėms kyla dėl jūsų programos
Padėkite rasti vietas, kuriose kūrėjai padarė klaidų

Manau, kad kūrėjai pirmiausia susidomėtų šiuo straipsniu. Taip pat galite naudoti šį priežasčių sąrašą, kad įtikintumėte savo viršininkus integruoti Sentry.

Būkite atsargūs su paskutiniu verslo sąrašo elementu.

Ar jau susidomėjai?

Kas yra Sentry?

Sentry yra atvirojo kodo klaidų sekimo programa, kuri padeda kūrėjams stebėti ir ištaisyti gedimus realiuoju laiku. Nepamirškite, kad programa leidžia padidinti efektyvumą ir pagerinti vartotojo patirtį. Sentry palaiko JavaScript, Node, Python, PHP, Ruby, Java ir kitas programavimo kalbas.

2. Prisijunkite ir sukurkite projektą

Atidarykite „Sentry“ paskyrą. Gali tekti prisijungti. (Atkreipkite dėmesį, kad „Sentry“ gali būti įdiegtas jūsų serveriuose)
Kitas žingsnis – sukurti projektą
Iš sąrašo pasirinkite savo kalbą. (Pasirinksime Reaguoti. Spustelėkite „Sukurti projektą“)

Tinkinkite savo programą. Pagrindinį pavyzdį, kaip integruoti Sentry į konteinerį, galite pamatyti toliau:

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 turi naudingą vedlį, kuris padės išsiaiškinti, ką daryti toliau. Galite atlikti šiuos veiksmus. Noriu parodyti, kaip sukurti pirmąją klaidų tvarkyklę. Puiku, sukūrėme projektą! Pereikime prie kito žingsnio

3. React ir Sentry integracija

Savo projekte turite įdiegti npm paketą.

npm i @sentry/browser

Inicijuoti „Sentry“ savo konteineryje:

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

DSN yra projektuose -> Nustatymai -> Kliento raktai. Kliento raktus galite rasti paieškos juostoje.

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

4. Pirmosios klaidos sekimas

Pavyzdžiui, naudojau paprastą muzikos programą su Deezer API. Jūs galite tai pamatyti čia. Turime sukurti klaidą. Vienas iš būdų yra pasiekti „neapibrėžtą“ nuosavybę

Turime sukurti mygtuką, kuris skambintų console.log с user.email. Po šio veiksmo turėtume gauti klaidos pranešimą: Nepagauta tipo klaida (negalima nuskaityti nuosavybės iš neapibrėžtos email) dėl trūkstamo vartotojo objekto. Taip pat galite naudoti Javascript išimtis.

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

Visas konteineris atrodo taip:

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

Integravę šį mygtuką, turėtumėte jį išbandyti naršyklėje.

Turime pirmąją klaidą

Oho!

Jei spustelėsite antraštės klaidą, pamatysite krūvos pėdsaką.

Žinutės atrodo prastai. Žinoma, mes matėme klaidų pranešimus, nesuprasdami, kur yra kodas. Pagal numatytuosius nustatymus mes kalbame apie šaltinio žemėlapį ReactJS, nes jie nėra sukonfigūruoti.

Taip pat norėčiau pateikti instrukcijas, kaip nustatyti šaltinio žemėlapį, bet dėl to šis straipsnis taptų daug ilgesnis, nei planavau.

Galite studijuoti šią temą čia. Jei jus domina šis straipsnis, Dmitrijus Noženko išleis antrąją dalį apie šaltinio žemėlapio integravimą. Taigi, spauskite daugiau patinka ir prenumeruokite Dmitrijus Noženkokad nepraleistų antros dalies.

5. jos naudojimas Sargybinis su galutiniu tašku API

GERAI. „Javascript“ išimtį aptarėme ankstesnėse pastraipose. Tačiau ką darysime dėl XHR klaidų?

„Sentry“ taip pat turi tinkintą klaidų tvarkymą. Naudojau jį api klaidoms stebėti.

Sentry.captureException(err)

Galite tinkinti klaidos pavadinimą, lygį, pridėti duomenis, unikalius vartotojo duomenis naudodami programą, el. paštą ir kt.

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

Norėčiau naudoti bendrąją gaudymo API funkciją.

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

Importuokite šią funkciją į savo API skambutį.

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

Pažiūrėkime metodus:

setLevel leidžia į sargybinio prietaisų skydelį įterpti lygio klaidą. Jis turi savybių – 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
setUser padeda išsaugoti bet kokius vartotojo duomenis (ID, el. pašto adresą, mokėjimo planą ir kt.).
setExtra leidžia nurodyti bet kokius reikalingus duomenis, pavyzdžiui, saugoti.

Jei norite gauti vartotojų atsiliepimų apie klaidą, turėtumėte naudoti funkciją showReportDialog.

Sentry.showReportDialog();

Išvada:

Šiandien aprašėme vieną būdą, kaip integruoti „Sentry“ į „React“ programą.

→ Telegramos pokalbis Sargybinis

Šaltinis: www.habr.com

Klaidų stebėjimas „React“ programoje naudojant „Sentry“.

1. Kodėl jums reikia Sentry?

Kas yra Sentry?

2. Prisijunkite ir sukurkite projektą

3. React ir Sentry integracija

4. Pirmosios klaidos sekimas

Добавить комментарий Atšaukti atsakymą