సెంట్రీని ఉపయోగించి రియాక్ట్ అప్లికేషన్‌లో ఎర్రర్‌లను ట్రాక్ చేయడం

రియాక్ట్ అప్లికేషన్‌లో రియల్ టైమ్ ఎర్రర్ ట్రాకింగ్ గురించి ఈరోజు నేను మీకు చెప్తాను. ఫ్రంట్-ఎండ్ అప్లికేషన్ సాధారణంగా ఎర్రర్ ట్రాకింగ్ కోసం ఉపయోగించబడదు. కొన్ని కంపెనీలు తరచుగా బగ్ ట్రాకింగ్‌ను నిలిపివేస్తాయి, డాక్యుమెంటేషన్, పరీక్షలు మొదలైన తర్వాత దానికి తిరిగి వస్తాయి. అయితే, మీరు మీ ఉత్పత్తిని మంచిగా మార్చగలిగితే, దీన్ని చేయండి!

1. మీకు సెంట్రీ ఎందుకు అవసరం?

ఉత్పత్తి సమయంలో బగ్‌లను ట్రాక్ చేయడంలో మీకు ఆసక్తి ఉందని నేను భావిస్తున్నాను

ఇది సరిపోదని మీరు అనుకుంటున్నారా?

సరే, వివరాలు చూద్దాం.

డెవలపర్‌లు సెంట్రీని ఉపయోగించడానికి ప్రధాన కారణాలు:

• లోపాలతో కోడ్‌ని అమలు చేస్తున్నప్పుడు ప్రమాదాలను నివారించడానికి మిమ్మల్ని అనుమతిస్తుంది
• కోడ్ పరీక్షతో QAకి సహాయం చేయండి
• సమస్యల గురించి త్వరిత నోటిఫికేషన్‌లను స్వీకరించండి
• లోపాలను త్వరగా సరిదిద్దగల సామర్థ్యం
• నిర్వాహక పానెల్‌లో లోపాల యొక్క అనుకూలమైన ప్రదర్శనను పొందడం
• వినియోగదారు/బ్రౌజర్ సెగ్మెంట్ వారీగా లోపాలను క్రమబద్ధీకరించండి

CEO/లీడ్ ప్రాజెక్ట్‌కు ప్రధాన కారణాలు

• డబ్బు ఆదా చేయండి (సెంట్రీని మీ సర్వర్‌లలో ఇన్‌స్టాల్ చేయవచ్చు)
• వినియోగదారు అభిప్రాయాన్ని పొందడం
• నిజ సమయంలో మీ ప్రాజెక్ట్‌లో ఏమి తప్పు ఉందో అర్థం చేసుకోవడం
• మీ యాప్‌తో వ్యక్తులు ఎదుర్కొంటున్న సమస్యల సంఖ్యను అర్థం చేసుకోవడం
• మీ డెవలపర్లు తప్పులు చేసిన స్థలాలను కనుగొనడంలో మీకు సహాయపడండి

డెవలపర్లు మొదట ఈ కథనంపై ఆసక్తి చూపుతారని నేను భావిస్తున్నాను. సెంట్రీని ఏకీకృతం చేయడానికి మీ ఉన్నతాధికారులను ఒప్పించడానికి మీరు ఈ కారణాల జాబితాను కూడా ఉపయోగించవచ్చు.

వ్యాపార జాబితాలోని చివరి అంశంతో జాగ్రత్తగా ఉండండి.

మీకు ఇప్పటికే ఆసక్తి ఉందా?

సెంట్రీ అంటే ఏమిటి?

సెంట్రీ అనేది ఓపెన్ సోర్స్ బగ్ ట్రాకింగ్ అప్లికేషన్, ఇది డెవలపర్‌లకు క్రాష్‌లను నిజ సమయంలో ట్రాక్ చేయడంలో మరియు పరిష్కరించడంలో సహాయపడుతుంది. అప్లికేషన్ సామర్థ్యాన్ని పెంచడానికి మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి మిమ్మల్ని అనుమతిస్తుంది అని మర్చిపోవద్దు. సెంట్రీ జావాస్క్రిప్ట్, నోడ్, పైథాన్, PHP, రూబీ, జావా మరియు ఇతర ప్రోగ్రామింగ్ భాషలకు మద్దతు ఇస్తుంది.

2. లాగిన్ చేసి ప్రాజెక్ట్‌ను సృష్టించండి

• మీ సెంట్రీ ఖాతాను తెరవండి. మీరు లాగిన్ అవ్వవలసి రావచ్చు. (దయచేసి మీ సర్వర్‌లలో సెంట్రీని ఇన్‌స్టాల్ చేయవచ్చని గమనించండి)
• తదుపరి దశ ప్రాజెక్ట్‌ను రూపొందించడం
• జాబితా నుండి మీ భాషను ఎంచుకోండి. (మేము ప్రతిచర్యను ఎంచుకోబోతున్నాము. "ప్రాజెక్ట్ సృష్టించు" క్లిక్ చేయండి)

మీ అప్లికేషన్‌ను అనుకూలీకరించండి. సెంట్రీని కంటైనర్‌లో ఎలా సమగ్రపరచాలో ప్రాథమిక ఉదాహరణ క్రింద చూడవచ్చు:

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

మీరు తదుపరి ఏమి చేయాలో గుర్తించడంలో మీకు సహాయం చేయడానికి సెంట్రీకి సహాయక విజార్డ్ ఉంది. మీరు ఈ దశలను అనుసరించవచ్చు. మీ మొదటి ఎర్రర్ హ్యాండ్లర్‌ని ఎలా సృష్టించాలో నేను మీకు చూపించాలనుకుంటున్నాను. గొప్పది, మేము ప్రాజెక్ట్‌ని సృష్టించాము! తదుపరి దశకు వెళ్దాం

3. రియాక్ట్ మరియు సెంట్రీ ఏకీకరణ

మీరు మీ ప్రాజెక్ట్‌లో తప్పనిసరిగా npm ప్యాకేజీని ఇన్‌స్టాల్ చేయాలి.

npm i @sentry/browser

మీ కంటైనర్‌లో సెంట్రీని ప్రారంభించండి:

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

DSN ప్రాజెక్ట్‌లు -> సెట్టింగ్‌లు -> క్లయింట్ కీలలో ఉంది. మీరు శోధన పట్టీలో క్లయింట్ కీలను కనుగొనవచ్చు.

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

4. మొదటి లోపాన్ని ట్రాక్ చేయడం

ఉదాహరణకు, నేను డీజర్ APIతో ఒక సాధారణ సంగీత అప్లికేషన్‌ని ఉపయోగించాను. మీరు చూడగలరు ఇక్కడ. మనం లోపాన్ని సృష్టించాలి. "నిర్వచించబడని" ఆస్తిని యాక్సెస్ చేయడం ఒక మార్గం

మేము కాల్ చేసే బటన్‌ను సృష్టించాలి console.log с user.email. ఈ చర్య తర్వాత మేము దోష సందేశాన్ని అందుకుంటాము: గుర్తించబడని టైప్‌ఎర్రర్ (నిర్వచించబడని నుండి ఆస్తిని చదవలేరు email) వినియోగదారు ఆబ్జెక్ట్ తప్పిపోయిన కారణంగా. మీరు కూడా ఉపయోగించవచ్చు జావాస్క్రిప్ట్ మినహాయింపు.

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

మొత్తం కంటైనర్ ఇలా కనిపిస్తుంది:

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

ఈ బటన్‌ను ఏకీకృతం చేసిన తర్వాత, మీరు దీన్ని బ్రౌజర్‌లో పరీక్షించాలి.

మా మొదటి లోపం ఉంది

హూ-హూ!

మీరు హెడర్ ఎర్రర్‌పై క్లిక్ చేస్తే, మీకు స్టాక్ ట్రేస్ కనిపిస్తుంది.

సందేశాలు చెడుగా కనిపిస్తున్నాయి. వాస్తవానికి కోడ్ ఎక్కడ ఉందో అర్థం చేసుకోకుండా ఎర్రర్ మెసేజ్‌లను చూశాము. డిఫాల్ట్‌గా మేము ReactJSలో సోర్స్ మ్యాప్ గురించి మాట్లాడుతున్నాము ఎందుకంటే అవి కాన్ఫిగర్ చేయబడవు.

నేను సోర్స్ మ్యాప్‌ను సెటప్ చేయడానికి సూచనలను కూడా అందించాలనుకుంటున్నాను, కానీ అది ఈ కథనాన్ని నేను ఉద్దేశించిన దాని కంటే చాలా ఎక్కువ సమయం చేస్తుంది.

మీరు ఈ అంశాన్ని అధ్యయనం చేయవచ్చు ఇక్కడ. మీకు ఈ వ్యాసంపై ఆసక్తి ఉంటే, డిమిత్రి నోజెంకో సోర్స్ మ్యాప్ ఇంటిగ్రేషన్ గురించి రెండవ భాగాన్ని ప్రచురిస్తుంది. కాబట్టి, మరిన్ని లైక్‌లను నొక్కండి మరియు సభ్యత్వం పొందండి డిమిత్రి నోజెంకోకాబట్టి రెండవ భాగాన్ని మిస్ చేయకూడదు.

5. వాడుక సెంట్రీ ముగింపు పాయింట్ తో API

అలాగే. మేము మునుపటి పేరాల్లో జావాస్క్రిప్ట్ మినహాయింపును కవర్ చేసాము. అయితే, XHR లోపాల గురించి మనం ఏమి చేస్తాము?

సెంట్రీకి అనుకూల ఎర్రర్ హ్యాండ్లింగ్ కూడా ఉంది. నేను API లోపాలను ట్రాక్ చేయడానికి ఉపయోగించాను.

Sentry.captureException(err)

మీరు మీ అప్లికేషన్, ఇమెయిల్ మొదలైనవాటిని ఉపయోగించి ఎర్రర్ పేరు, స్థాయి, డేటాను జోడించడం, ప్రత్యేకమైన వినియోగదారు డేటాను అనుకూలీకరించవచ్చు.

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

నేను క్యాచ్ 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);
};

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

పద్ధతులను తనిఖీ చేద్దాం:

• సెట్ స్థాయి సెంట్రీ డాష్‌బోర్డ్‌లో స్థాయి లోపాన్ని చొప్పించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇది లక్షణాలను కలిగి ఉంది - 'ప్రాణాంతకం', 'ఎర్రర్', 'హెచ్చరిక', 'లాగ్', 'సమాచారం, 'డీబగ్', 'క్రిటికల్').
• సెట్యూజర్ ఏదైనా వినియోగదారు డేటా (ఐడి, ఇమెయిల్ చిరునామా, చెల్లింపు ప్రణాళిక మొదలైనవి) సేవ్ చేయడంలో సహాయపడుతుంది.
• సెట్ ఎక్స్‌ట్రా మీకు అవసరమైన ఏదైనా డేటాను పేర్కొనడానికి మిమ్మల్ని అనుమతిస్తుంది, ఉదాహరణకు, స్టోర్.

మీరు బగ్ గురించి వినియోగదారు అభిప్రాయాన్ని పొందాలనుకుంటే, మీరు showReportDialog ఫంక్షన్‌ని ఉపయోగించాలి.

Sentry.showReportDialog();

తీర్మానం:

ఈరోజు మేము సెంట్రీని రియాక్ట్ అప్లికేషన్‌లో ఇంటిగ్రేట్ చేయడానికి ఒక మార్గాన్ని వివరించాము.

→ టెలిగ్రామ్ చాట్ ద్వారా సెంట్రీ

మూలం: www.habr.com