Pagsubay sa mga sayup sa usa ka React app nga adunay Sentry

Karon isulti ko kanimo ang bahin sa real-time nga pagsubay sa sayup sa usa ka aplikasyon sa React. Ang usa ka front-end nga aplikasyon dili kasagarang gigamit alang sa pagsubay sa sayop. Ang pipila ka mga kompanya kanunay nga nagpugong sa pagsubay sa bug, nga gibalik kini pagkahuman sa dokumentasyon, mga pagsulay, ug uban pa. Bisan pa, kung mahimo nimong usbon ang imong produkto alang sa labi ka maayo, buhata lang kini!

1. Nganong kinahanglan nimo ang Sentry?

Nagtuo ko nga interesado ka sa pagsubay sa mga bug sa panahon sa produksiyon

Sa imong hunahuna kini ba dili igo?

Okay, atong tan-awon ang mga detalye.

Panguna nga mga hinungdan sa paggamit sa mga developer sa Sentry:

• Gitugotan ka nga malikayan ang mga peligro kung nag-deploy sa code nga adunay mga sayup
• Tabangi ang QA sa pagsulay sa code
• Makadawat ug dali nga mga pahibalo bahin sa mga problema
• Abilidad sa dali nga pagtul-id sa mga sayop
• Pagkuha usa ka dali nga pagpakita sa mga sayup sa admin panel
• Pagsunud sa mga sayup pinaagi sa bahin sa tiggamit / browser

Pangunang mga rason alang sa CEO/Lead nga proyekto

• Pagtipig salapi (Ang Sentry mahimong ma-install sa imong mga server)
• Pagkuha og feedback sa user
• Ang pagsabut kung unsa ang sayup sa imong proyekto sa tinuud nga oras
• Ang pagsabut sa gidaghanon sa mga problema sa mga tawo sa imong app
• Tabangi ka nga makit-an ang mga lugar diin nasayop ang imong mga developer

Sa akong hunahuna ang mga nag-develop mahimong interesado sa kini nga artikulo una. Mahimo usab nimo gamiton kini nga lista sa mga hinungdan aron makombinsir ang imong boss nga i-integrate ang Sentry.

Pag-amping sa katapusang aytem sa lista sa negosyo.

Interesado ka na ba?

Unsa ang Sentry?

Ang Sentry usa ka bukas nga gigikanan nga aplikasyon sa pagsubay sa bug nga nagtabang sa mga developer sa pagsubay ug pag-ayo sa mga pag-crash sa tinuud nga oras. Ayaw kalimti nga gitugotan ka sa aplikasyon nga madugangan ang kahusayan ug mapaayo ang kasinatian sa gumagamit. Gisuportahan sa Sentry ang JavaScript, Node, Python, PHP, Ruby, Java ug uban pang mga programming language.

2. Pag-login ug paghimo og proyekto

• Ablihi ang imong Sentry account. Mahimong kinahanglan ka nga mag-log in. (Palihug timan-i nga ang Sentry mahimong ma-install sa imong mga server)
• Ang sunod nga lakang mao ang paghimo og proyekto
• Pilia ang imong pinulongan gikan sa listahan. (Atong pilion ang React. I-klik ang "Create Project")

Ipasibo ang imong aplikasyon. Usa ka sukaranan nga pananglitan kung giunsa ang pag-integrate sa Sentry sa usa ka sudlanan makita sa ubos:

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

Ang Sentry adunay makatabang nga Wizard aron matabangan ka nga mahibal-an kung unsa ang sunod nimong buhaton. Mahimo nimong sundon kini nga mga lakang. Gusto nako ipakita kanimo kung giunsa paghimo ang imong una nga tigdumala sa sayup. Maayo, naghimo kami usa ka proyekto! Mopadayon kita sa sunod nga lakang

3. React ug Sentry integration

Kinahanglan nimo nga i-install ang npm package sa imong proyekto.

npm i @sentry/browser

Pagsugod sa Sentry sa imong sudlanan:

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

Ang DSN nahimutang sa Projects -> Settings -> Client Keys. Makita nimo ang mga yawe sa kliyente sa search bar.

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

4. Pagsubay sa unang sayop

Pananglitan, migamit ko og yano nga aplikasyon sa musika sa Deezer API. Makita nimo kini dinhi. Kinahanglan namon nga maghimo usa ka sayup. Usa ka paagi mao ang pag-access sa "undefined" property

Kinahanglan namon nga maghimo usa ka buton nga nagtawag log sa console с user.email. Pagkahuman niini nga aksyon kinahanglan nga makadawat kami usa ka mensahe sa sayup: Uncaught TypeError (dili makabasa sa property gikan sa undefined email) tungod sa nawala nga butang sa user. Mahimo usab nimo gamiton Eksepsiyon sa Javascript.

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

Ang tibuok sudlanan ingon niini:

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

Human mahiusa kini nga buton, kinahanglan nimo nga sulayan kini sa browser.

Naa tay unang sayop

Whoo-hoo!

Kung nag-klik ka sa sayup sa header, makakita ka og stack trace.

Dili maayo ang mga mensahe. Siyempre nakakita kami og mga mensahe sa sayup nga wala makasabut kung asa ang code. Pinaagi sa default naghisgot kami bahin sa gigikanan nga mapa sa ReactJS tungod kay wala sila gi-configure.

Gusto usab nako nga maghatag mga panudlo alang sa pag-set up sa gigikanan nga mapa, apan kana maghimo niini nga artikulo nga labi ka taas kaysa sa akong gusto.

Mahimo nimong tun-an kini nga hilisgutan dinhi. Kung interesado ka niini nga artikulo, Dmitry Nozhenko imantala ang ikaduhang bahin bahin sa integrasyon sa mapa sa tinubdan. Busa, pag-hit sa daghang mga gusto ug pag-subscribe sa Dmitry Nozhenkoaron dili masipyat ang ikaduhang bahin.

5. Paggamit Sentry uban sa katapusan nga punto API

OK ra. Gitabonan namo ang eksepsiyon sa javascript sa miaging mga parapo. Bisan pa, unsa ang atong buhaton bahin sa mga sayup sa XHR?

Ang Sentry usab adunay naandan nga pagdumala sa sayup. Gigamit nako kini aron masubay ang mga sayup sa api.

Sentry.captureException(err)

Mahimo nimong ipasibo ang ngalan sa sayup, lebel, pagdugang data, talagsaon nga datos sa tiggamit gamit ang imong aplikasyon, email, ug uban pa.

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

Gusto nakong mogamit og generic function para sa 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);
};

I-import kini nga function sa imong api nga tawag.

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

Atong susihon ang mga pamaagi:

• setLevel nagtugot kanimo sa pagsal-ot sa usa ka lebel nga sayup sa dashboard sa sentri. Kini adunay mga kabtangan - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
• setUser makatabang sa pagluwas sa bisan unsa nga data sa user (id, email address, plano sa pagbayad, ug uban pa).
• setExtra nagtugot kanimo sa pagtino sa bisan unsang datos nga imong gikinahanglan, pananglitan, tindahan.

Kung gusto nimo makakuha og feedback sa user bahin sa usa ka bug, kinahanglan nimo gamiton ang showReportDialog function.

Sentry.showReportDialog();

Panapos:

Karon among gihulagway ang usa ka paagi aron maapil ang Sentry sa usa ka aplikasyon sa React.

→ Telegram chat ni Sentry

Source: www.habr.com