🥇Kufuatilia Hitilafu katika Programu ya React na Mtumaji

Leo nitakuambia juu ya ufuatiliaji wa makosa ya wakati halisi katika programu ya React. Programu ya mbele haitumiki kwa kawaida kufuatilia makosa. Kampuni zingine mara nyingi huahirisha ufuatiliaji wa hitilafu, kurudi kwake baada ya uwekaji hati, majaribio, n.k. Walakini, ikiwa unaweza kubadilisha bidhaa yako kuwa bora, basi fanya tu!

1. Kwa nini unahitaji Sentry?

Nadhani ungependa kufuatilia hitilafu wakati wa uzalishaji

Je, unadhani hii haitoshi?

Sawa, hebu tuangalie maelezo.

Sababu kuu za wasanidi programu kutumia Sentry:

Hukuruhusu kuepuka hatari wakati wa kupeleka msimbo wenye hitilafu
Saidia QA kwa majaribio ya msimbo
Pokea arifa za haraka kuhusu matatizo
Uwezo wa kurekebisha makosa haraka
Kupata onyesho rahisi la makosa kwenye paneli ya msimamizi
Panga makosa kwa sehemu ya mtumiaji/kivinjari

Sababu kuu za Mkurugenzi Mtendaji / Mradi wa Kiongozi

Okoa pesa (Sentry inaweza kusakinishwa kwenye seva zako)
Kupata maoni ya mtumiaji
Kuelewa nini kibaya na mradi wako kwa wakati halisi
Kuelewa idadi ya matatizo ambayo watu wanayo na programu yako
Kukusaidia kupata maeneo ambayo wasanidi wako walifanya makosa

Nadhani watengenezaji wangependezwa na nakala hii kwanza. Unaweza pia kutumia orodha hii ya sababu kuwashawishi wakubwa wako kujumuisha Sentry.

Kuwa mwangalifu na bidhaa ya mwisho kwenye orodha ya biashara.

Je, tayari una nia?

Sentry ni nini?

Sentry ni programu huria ya kufuatilia hitilafu ambayo husaidia wasanidi programu kufuatilia na kurekebisha matukio ya kuacha kufanya kazi kwa wakati halisi. Usisahau kwamba programu hukuruhusu kuongeza ufanisi na kuboresha uzoefu wa mtumiaji. Sentry inasaidia JavaScript, Node, Python, PHP, Ruby, Java na lugha zingine za programu.

2. Ingia na uunda mradi

Fungua akaunti yako ya Sentry. Huenda ukahitaji kuingia. (Tafadhali kumbuka kuwa Sentry inaweza kusakinishwa kwenye seva zako)
Hatua inayofuata ni kuunda mradi
Chagua lugha yako kutoka kwenye orodha. (Tutachagua React. Bofya "Unda Mradi").

Geuza kukufaa maombi yako. Mfano wa msingi wa jinsi ya kujumuisha Sentry kwenye chombo unaweza kuonekana hapa chini:

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 ana Mchawi anayesaidia kukusaidia kujua unachopaswa kufanya baadaye. Unaweza kufuata hatua hizi. Ninataka kukuonyesha jinsi ya kuunda kidhibiti chako cha kwanza cha makosa. Mkuu, tumeunda mradi! Hebu tuendelee kwenye hatua inayofuata

3. React na Sentry ushirikiano

Lazima usakinishe kifurushi cha npm kwenye mradi wako.

npm i @sentry/browser

Anzisha Sentry kwenye chombo chako:

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

DSN iko katika Miradi -> Mipangilio -> Vifunguo vya Wateja. Unaweza kupata funguo za mteja kwenye upau wa utafutaji.

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

4. Kufuatilia kosa la kwanza

Kwa mfano, nilitumia programu rahisi ya muziki na API ya Deezer. Unaweza kuiona hapa. Tunahitaji kuunda hitilafu. Njia moja ni kupata mali "isiyoelezewa".

Tunahitaji kuunda kitufe kinachoita console.log с mtumiaji.barua pepe. Baada ya kitendo hiki tunapaswa kupokea ujumbe wa hitilafu: Uncaught TypeError (haiwezi kusoma mali kutoka kwa undefined email) kwa sababu ya kukosa kitu cha mtumiaji. Unaweza pia kutumia Isipokuwa Javascript.

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

Chombo kizima kinaonekana kama hii:

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

Baada ya kuunganisha kifungo hiki, unapaswa kukijaribu kwenye kivinjari.

Tuna makosa yetu ya kwanza

Whoo-hoo!

Ukibofya kwenye hitilafu ya kichwa, utaona ufuatiliaji wa rafu.

Ujumbe unaonekana mbaya. Bila shaka tumeona ujumbe wa makosa bila kuelewa kanuni iko wapi. Kwa chaguo-msingi tunazungumza kuhusu ramani chanzo katika ReactJS kwa sababu haijasanidiwa.

Ningependa pia kutoa maagizo ya kusanidi ramani ya chanzo, lakini hiyo ingefanya nakala hii kuwa ndefu zaidi kuliko nilivyokusudia.

Unaweza kujifunza mada hii hapa. Ikiwa una nia ya makala hii, Dmitry Nozhenko itachapisha sehemu ya pili kuhusu ujumuishaji wa ramani chanzo. Kwa hivyo, gonga likes zaidi na ujiandikishe Dmitry Nozhenkoili usikose sehemu ya pili.

5. Matumizi Sentry yenye ncha ya mwisho API

SAWA. Tumeshughulikia ubaguzi wa javascript katika aya zilizopita. Hata hivyo, tutafanya nini kuhusu makosa ya XHR?

Sentry pia ina ushughulikiaji wa makosa maalum. Niliitumia kufuatilia makosa ya api.

Sentry.captureException(err)

Unaweza kubinafsisha jina la hitilafu, kiwango, kuongeza data, data ya kipekee ya mtumiaji kwa kutumia programu yako, barua pepe, n.k.

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

Ningependa kutumia kazi ya kawaida kwa API ya kukamata.

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

Ingiza chaguo hili la kukokotoa katika simu yako ya api.

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

Wacha tuangalie mbinu:

setLevel hukuruhusu kuingiza hitilafu ya kiwango kwenye dashibodi ya watumaji. Ina sifa - 'mbaya', 'kosa', 'onyo', 'logi', 'maelezo, 'suluhisha', 'muhimu').
setUser husaidia kuhifadhi data yoyote ya mtumiaji (kitambulisho, anwani ya barua pepe, mpango wa malipo, n.k.).
setExtra inakuwezesha kutaja data yoyote unayohitaji, kwa mfano, kuhifadhi.

Ikiwa ungependa kupata maoni ya mtumiaji kuhusu hitilafu, unapaswa kutumia kitendakazi cha showReportDialog.

Sentry.showReportDialog();

Hitimisho:

Leo tumeelezea njia moja ya kuunganisha Sentry kwenye programu ya React.

→ Gumzo la Telegraph Sentry

Chanzo: mapenzi.com

Kufuatilia makosa katika programu ya React kwa kutumia Sentry

1. Kwa nini unahitaji Sentry?

Sentry ni nini?

2. Ingia na uunda mradi

3. React na Sentry ushirikiano

4. Kufuatilia kosa la kwanza

Kuongeza maoni Kufuta kujibu