🥇Iimpazamo zokulandela umkhondo kwi-React App ngeSentry

Namhlanje ndiza kukuxelela malunga nokulandela impazamo yexesha lokwenyani kwisicelo seReact. Usetyenziso lwesiphelo sangaphambili aluqhelekanga ukusetyenziselwa ukujonga iimpazamo. Ezinye iinkampani zihlala zibekel' ecaleni ukulandelwa kwe-bug, zibuyela kuyo emva koxwebhu, iimvavanyo, njl. Nangona kunjalo, ukuba ungayitshintsha imveliso yakho ibe ngcono, yenza nje!

1. Kutheni ufuna iSentry?

Ndicinga ukuba unomdla wokulandelela iibugs ngexesha lemveliso

Ucinga ukuba oku akwanele?

Kulungile, makhe sijonge iinkcukacha.

Izizathu eziphambili zokuba abaphuhlisi basebenzise iSentry:

Ikuvumela ukuba uphephe imingcipheko xa usebenzisa ikhowudi ngeempazamo
Nceda i-QA ngovavanyo lwekhowudi
Fumana izaziso ngokukhawuleza malunga neengxaki
Ukukwazi ukulungisa ngokukhawuleza iimpazamo
Ukufumana umboniso ofanelekileyo weempazamo kwiqela lolawulo
Hlela iimpazamo ngokwecandelo lomsebenzisi/lebhrawuza

Izizathu eziphambili zeCEO / iprojekthi yokuKhokela

Gcina imali (uMmeli unokufakwa kwiiseva zakho)
Ukufumana ingxelo yomsebenzisi
Ukuqonda ukuba yintoni engalunganga ngeprojekthi yakho ngexesha langempela
Ukuqonda inani leengxaki abantu abanazo nge-app yakho
Nceda ufumane iindawo apho abaphuhlisi bakho benze iimpazamo

Ndicinga ukuba abaphuhlisi baya kuba nomdla kweli nqaku kuqala. Unokusebenzisa olu luhlu lwezizathu zokuqinisekisa umphathi wakho ukuba adibanise iSentry.

Qaphela into yokugqibela kuluhlu lwamashishini.

Ngaba sele unomdla?

Yintoni iSentry?

I-Sentry sisicelo sokujonga ibug esivulelekileyo esinceda abaphuhlisi balandele kwaye balungise iingozi ngexesha lokwenyani. Ungalibali ukuba isicelo sikuvumela ukuba ukwandise ukusebenza kakuhle kunye nokuphucula amava omsebenzisi. I-Sentry ixhasa iJavaScript, iNode, iPython, i-PHP, iRuby, iJava kunye nezinye iilwimi zeprogram.

2. Ngena kwaye wenze iprojekthi

Vula iakhawunti yakho yeSentry. Kusenokufuneka ungene. (Nceda uqaphele ukuba iSentry inokufakwa kwiiseva zakho)
Inyathelo elilandelayo kukudala iprojekthi
Khetha ulwimi lwakho kuluhlu. (Siza kukhetha React. Cofa "Yenza iProjekthi")

Lungisa isicelo sakho. Umzekelo osisiseko wendlela yokudibanisa iSentry kwisikhongozeli unokubonwa ngezantsi:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://63bbb258ca4346139ee533576e17ac46@sentry.io/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;
        }
    }
}

I-Sentry ineWizard eluncedo ukukunceda ufumanise ukuba yintoni omawuyenze ngokulandelayo. Ungalandela la manyathelo. Ndifuna ukukubonisa indlela yokwenza isiphatho sakho sokuqala sempazamo. Kulungile, senze iprojekthi! Masiqhubele phambili kwinyathelo elilandelayo

3. Ukusabela kunye nokudityaniswa kweSentry

Kufuneka ufake iphakheji ye-npm kwiprojekthi yakho.

npm i @sentry/browser

Qalisa iSentry kwisikhongozeli sakho:

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

I-DSN ifumaneka kwiiProjekthi -> Useto -> amaqhosha oMxumi. Ungafumana izitshixo zabathengi kwibar yokukhangela.

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

4. Ukulandelela impazamo yokuqala

Umzekelo, ndisebenzise usetyenziso olulula lomculo ngeDeezer API. Ungayibona apha. Kufuneka senze impazamo. Enye indlela kukufikelela kwipropathi "engachazwanga".

Kufuneka senze iqhosha elibizayo console.log с umsebenzisi.imeyile. Emva kwesi senzo kufuneka sifumane umyalezo wemposiso: Uncaught TypeError (ayinakufunda ipropathi ukusuka engachazwanga email) ngenxa yento yomsebenzisi engekhoyo. Ungasebenzisa kwakhona Javascript ngaphandle.

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

Isikhongozeli siphela sijongeka ngolu hlobo:

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://fc0edcf6927a4397855797a033f04085@sentry.io/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);

Emva kokudibanisa eli qhosha, kufuneka ulivavanye kwisikhangeli.

Sinempazamo yethu yokuqala

Yhooo!

Ukuba ucofa kwimpazamo yeheader, uya kubona umkhondo wesitaki.

Imiyalezo ibonakala imbi. Ewe siyibonile imiyalezo yempazamo ngaphandle kokuqonda ukuba iphi na ikhowudi. Ngokungagqibekanga sithetha ngemephu yemvelaphi kwi-ReactJS kuba ayibunjwanga.

Ndingathanda kwakhona ukunika imiyalelo yokuseta imephu yomthombo, kodwa oko kuya kwenza eli nqaku libe lide kakhulu kunokuba bendinenjongo.

Ungasifunda esi sihloko apha. Ukuba unomdla kweli nqaku, NguDmitry Nozhenko izakupapasha indawo yesibini malunga nodibaniso lwemephu yemvelaphi. Ke, betha ukuthanda ngakumbi kwaye ubhalisele NguDmitry Nozhenkoukuze ungaphoswa yinxalenye yesibini.

5. Ukusetyenziswa Ukuthunyelwa ngenqaku lokugqibela API

KULUNGILE. Siyigubungele ngaphandle kwejavascript kwimihlathi yangaphambili. Nangona kunjalo, siya kwenza ntoni malunga neempazamo ze-XHR?

Umthumeli kwakhona unemposiso yokuphatha. Ndiyisebenzise ukulandelela iimpazamo ze-api.

Sentry.captureException(err)

Unokwenza igama lempazamo, inqanaba, ungeze idatha, idatha yomsebenzisi ekhethekileyo usebenzisa isicelo sakho, i-imeyile, njl.

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

Ndingathanda ukusebenzisa umsebenzi wegeneric kwi-API yokubamba.

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

Ngenisa lo msebenzi kwifowuni yakho ye-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));
      }
    });
};

Makhe sijonge iindlela:

setLevel ikuvumela ukuba ufake imposiso yomgangatho kwideshibhodi yomthumeli. Ineempawu - 'ezibulalayo', 'impazamo', 'isilumkiso', 'log', 'ingcaciso, 'debug', 'critical').
misela uMsebenzisi inceda ukugcina nayiphi na idatha yomsebenzisi (id, idilesi ye-imeyile, isicwangciso sokuhlawula, njl.).
setOngeziweyo ikuvumela ukuba uchaze nayiphi na idatha oyifunayo, umzekelo, gcina.

Ukuba ufuna ukufumana ingxelo yomsebenzisi malunga negciwane, kufuneka usebenzise umsebenzi we showReportDialog.