🥇Kutsata Zolakwika mu React App yokhala ndi Sentry

Lero ndikuwuzani za kutsata zolakwika zenizeni mu pulogalamu ya React. Kutsogolo sikumagwiritsidwa ntchito potsata zolakwika. Makampani ena nthawi zambiri amasiya kutsatira zolakwika, kubwereranso pambuyo polemba, kuyesa, ndi zina. Komabe, ngati mutha kusintha malonda anu kuti akhale abwino, ingochitani!

1. Chifukwa chiyani muyenera Sentry?

Ndikuganiza kuti mukufuna kutsatira nsikidzi panthawi yopanga

Kodi mukuganiza kuti izi sizokwanira?

Chabwino, tiyeni tiwone mwatsatanetsatane.

Zifukwa zazikulu zomwe opanga agwiritse ntchito Sentry:

Imakulolani kuti mupewe zoopsa mukatumiza ma code okhala ndi zolakwika
Thandizani QA poyesa ma code
Landirani zidziwitso mwachangu zamavuto
Kutha kukonza zolakwika mwachangu
Kupeza mawonekedwe osavuta a zolakwika mu gulu la admin
Sinthani zolakwika ndi gawo la ogwiritsa ntchito/osatsegula

Zifukwa zazikulu za projekiti ya CEO/Lead

Sungani ndalama (Sentry ikhoza kukhazikitsidwa pa maseva anu)
Kupeza mayankho a ogwiritsa ntchito
Kumvetsetsa zomwe zili zolakwika ndi polojekiti yanu munthawi yeniyeni
Kumvetsetsa kuchuluka kwamavuto omwe anthu amakhala nawo ndi pulogalamu yanu
Thandizani kupeza malo omwe opanga anu adalakwitsa

Ndikuganiza kuti oyambitsa angakonde chidwi ndi nkhaniyi poyamba. Mutha kugwiritsanso ntchito mndandanda wazifukwa zotsimikizira abwana anu kuti aphatikize Sentry.

Samalani ndi chinthu chomaliza pamndandanda wamabizinesi.

Kodi mumakonda kale?

Kodi Sentry ndi chiyani?

Sentry ndi pulogalamu yotsegula gwero la bug yomwe imathandizira opanga kutsata ndi kukonza zowonongeka munthawi yeniyeni. Musaiwale kuti pulogalamuyi imakupatsani mwayi wowonjezera luso ndikuwongolera luso la ogwiritsa ntchito. Sentry imathandizira JavaScript, Node, Python, PHP, Ruby, Java ndi zilankhulo zina zamapulogalamu.

2. Lowani ndikupanga pulojekiti

Tsegulani akaunti yanu ya Sentry. Mutha kulowa. (Chonde dziwani kuti Sentry ikhoza kukhazikitsidwa pa maseva anu)
Chotsatira ndicho kupanga polojekiti
Sankhani chinenero chanu pamndandanda. (Tisankha React. Dinani "Pangani Ntchito").

Sinthani makonda anu. Chitsanzo choyambirira chamomwe mungaphatikizire Sentry mu chidebe chikuwoneka pansipa:

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 ali ndi Wizard wothandiza kuti akuthandizeni kudziwa zomwe muyenera kuchita kenako. Mutha kutsatira izi. Ndikufuna kukuwonetsani momwe mungapangire chothandizira chanu choyamba. Zabwino, tapanga projekiti! Tiyeni tipitirire ku sitepe yotsatira

3. Chitani ndi Sentry kuphatikiza

Muyenera kukhazikitsa phukusi la npm mu polojekiti yanu.

npm i @sentry/browser

Yambitsani Sentry mu chidebe chanu:

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

DSN ili mu Projects -> Settings -> Client Keys. Mutha kupeza makiyi a kasitomala mu bar yofufuzira.

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

4. Kutsata cholakwika choyamba

Mwachitsanzo, ndinagwiritsa ntchito nyimbo yosavuta ndi Deezer API. Inu mukhoza kuziwona izo apa. Tiyenera kupanga cholakwika. Njira imodzi ndiyo kupeza katundu wa "undefined".

Tiyenera kupanga batani loyimba console.log с user.imelo. Pambuyo pakuchita izi tiyenera kulandira uthenga wolakwika: Uncaught TypeError (singathe kuwerenga katundu kuchokera ku undefined email) chifukwa chosowa chogwiritsa ntchito. Mukhozanso kugwiritsa ntchito Javascript kupatula.

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

Chophimba chonse chikuwoneka motere:

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

Mukaphatikiza batani ili, muyenera kuyesa mu msakatuli.

Tili ndi cholakwika chathu choyamba

Uwu-uwu!

Mukadina pamutu wolakwika, mudzawona kusaka.

Mauthenga akuwoneka oyipa. Inde tawona mauthenga olakwika osamvetsetsa komwe code ili. Mwachikhazikitso tikukamba za mapu oyambira mu ReactJS chifukwa sanasanjidwe.

Ndikufunanso kupereka malangizo okhazikitsa mapu oyambira, koma izi zipangitsa kuti nkhaniyi ikhale yayitali kuposa momwe ndimafunira.

Mukhoza kuphunzira mutuwu apa. Ngati mumakonda nkhaniyi, Dmitry Nozhenko adzafalitsa gawo lachiwiri lokhudza kuphatikizika kwa mapu. Chifukwa chake, menyani zokonda zambiri ndikulembetsa Dmitry Nozhenkokuti musaphonye gawo lachiwiri.

5. Kugwiritsa ntchito Sentry ndi mapeto API

CHABWINO. Tafotokoza kupatula javascript m'ndime zam'mbuyomu. Komabe, titani pa zolakwika za XHR?

Sentry ilinso ndi zowongolera zolakwika. Ndidagwiritsa ntchito kutsatira zolakwika za api.

Sentry.captureException(err)

Mutha kusintha dzina lolakwika, mulingo, kuwonjezera deta, deta yapaderadera pogwiritsa ntchito pulogalamu yanu, imelo, ndi zina.

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

Ndikufuna kugwiritsa ntchito generic API yogwira.

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

Lowetsani izi mu foni yanu 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));
      }
    });
};

Tiyeni tiwone njira:

setLevel amakulolani kuti muyike cholakwika cha mlingo mu sentry dashboard. Lili ndi katundu - 'zakufa', 'zolakwika', 'chenjezo', 'log', 'info, 'debug', 'critical').
setUser zimathandiza kusunga deta iliyonse ya ogwiritsa ntchito (id, imelo adilesi, ndondomeko yolipira, etc.).
setExtra amakulolani kuti mutchule deta iliyonse yomwe mukufuna, mwachitsanzo, kusunga.

Ngati mukufuna kupeza mayankho a ogwiritsa ntchito pa cholakwika, muyenera kugwiritsa ntchito chiwonetsero chaReportDialog.

Sentry.showReportDialog();

Kutsiliza:

Lero tafotokoza njira imodzi yophatikizira Sentry mu pulogalamu ya React.

→ Macheza a Telegraph ndi Sentry

Source: www.habr.com

Kutsata zolakwika mu pulogalamu ya React pogwiritsa ntchito Sentry

1. Chifukwa chiyani muyenera Sentry?

Kodi Sentry ndi chiyani?

2. Lowani ndikupanga pulojekiti

3. Chitani ndi Sentry kuphatikiza

4. Kutsata cholakwika choyamba

Kuwonjezera ndemanga kuletsa reply