सेंट्री का उपयोग करके रिएक्ट एप्लिकेशन में त्रुटियों को ट्रैक करना

आज मैं आपको रिएक्ट एप्लिकेशन में रीयल-टाइम त्रुटि ट्रैकिंग के बारे में बताऊंगा। फ्रंट-एंड एप्लिकेशन का उपयोग आमतौर पर त्रुटि ट्रैकिंग के लिए नहीं किया जाता है। कुछ कंपनियाँ अक्सर बग ट्रैकिंग, दस्तावेज़ीकरण, परीक्षण आदि के बाद उस पर वापस लौटना बंद कर देती हैं। हालाँकि, यदि आप अपने उत्पाद को बेहतरी के लिए बदल सकते हैं, तो बस ऐसा करें!

1. आपको संतरी की आवश्यकता क्यों है?

मैं मानता हूं कि आप उत्पादन के दौरान बग्स को ट्रैक करने में रुचि रखते हैं

क्या आपको लगता है कि यह पर्याप्त नहीं है?

ठीक है, आइए विवरण देखें।

डेवलपर्स द्वारा सेंट्री का उपयोग करने के प्रमुख कारण:

• त्रुटियों के साथ कोड तैनात करते समय आपको जोखिमों से बचने की अनुमति मिलती है
• कोड परीक्षण में QA की सहायता करें
• समस्याओं के बारे में त्वरित सूचनाएं प्राप्त करें
• त्रुटियों को शीघ्रता से ठीक करने की क्षमता
• व्यवस्थापक पैनल में त्रुटियों का सुविधाजनक प्रदर्शन प्राप्त करना
• त्रुटियों को उपयोगकर्ता/ब्राउज़र खंड के अनुसार क्रमित करें

सीईओ/लीड प्रोजेक्ट के मुख्य कारण

• पैसे बचाएं (संतरी आपके सर्वर पर स्थापित किया जा सकता है)
• उपयोगकर्ता प्रतिक्रिया प्राप्त करना
• वास्तविक समय में यह समझना कि आपके प्रोजेक्ट में क्या गड़बड़ है
• आपके ऐप से लोगों को होने वाली समस्याओं की संख्या को समझना
• उन स्थानों को ढूंढने में आपकी सहायता करें जहां आपके डेवलपर्स ने गलतियां की हैं

मुझे लगता है कि डेवलपर्स को सबसे पहले इस लेख में दिलचस्पी होगी। आप अपने बॉस को सेंट्री को एकीकृत करने के लिए मनाने के लिए कारणों की इस सूची का भी उपयोग कर सकते हैं।

व्यवसाय सूची के अंतिम आइटम से सावधान रहें।

क्या आप पहले से ही रुचि रखते हैं?

संतरी क्या है?

सेंट्री एक ओपन सोर्स बग ट्रैकिंग एप्लिकेशन है जो डेवलपर्स को वास्तविक समय में क्रैश को ट्रैक करने और ठीक करने में मदद करता है। यह न भूलें कि एप्लिकेशन आपको दक्षता बढ़ाने और उपयोगकर्ता अनुभव में सुधार करने की अनुमति देता है। सेंट्री जावास्क्रिप्ट, नोड, पायथन, पीएचपी, रूबी, जावा और अन्य प्रोग्रामिंग भाषाओं का समर्थन करता है।

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. पहली त्रुटि को ट्रैक करना

उदाहरण के लिए, मैंने डीज़र एपीआई के साथ एक साधारण संगीत एप्लिकेशन का उपयोग किया। आप इसे देख सकते हैं यहां. हमें एक त्रुटि बनाने की आवश्यकता है. एक तरीका "अपरिभाषित" संपत्ति तक पहुंचना है

हमें एक बटन बनाना होगा जो कॉल करे दिलासा देना с उपयोगकर्ता.ईमेल. इस क्रिया के बाद हमें एक त्रुटि संदेश प्राप्त होना चाहिए: ध्यान में न आया लेखन त्रुटि (अपरिभाषित से संपत्ति नहीं पढ़ सकता 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 त्रुटियों के बारे में क्या करेंगे?

सेंट्री में कस्टम एरर हैंडलिंग भी है। मैंने इसका उपयोग एपीआई त्रुटियों को ट्रैक करने के लिए किया।

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

मैं कैच एपीआई के लिए एक सामान्य फ़ंक्शन का उपयोग करना चाहूंगा।

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

इस फ़ंक्शन को अपने एपीआई कॉल में आयात करें।

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