रिएक्ट फ्रंटएंड अनुप्रयोगों में बग की संतरी दूरस्थ निगरानी

हम रिएक्ट के साथ सेंट्री का उपयोग करके खोज कर रहे हैं।

यह आलेख एक उदाहरण का उपयोग करके सेंट्री त्रुटियों की रिपोर्टिंग से शुरू होने वाली श्रृंखला का हिस्सा है: Часть 1.

प्रतिक्रिया का कार्यान्वयन

सबसे पहले हमें इस एप्लिकेशन के लिए एक नया सेंट्री प्रोजेक्ट जोड़ना होगा; संतरी वेबसाइट से. इस मामले में हम रिएक्ट चुनते हैं।

हम रिएक्ट वाले एप्लिकेशन में अपने दो बटन, हैलो और एरर को फिर से लागू करेंगे। हम अपना स्टार्टर एप्लिकेशन बनाकर शुरुआत करते हैं:

npx create-react-app react-app

फिर हम सेंट्री पैकेज आयात करते हैं:

yarn add @sentry/browser

और इसे प्रारंभ करें:

प्रतिक्रिया-ऐप/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

टिप्पणियाँ:

• विकास के दौरान, हमारे पास मुद्दों की निगरानी के लिए कंसोल जैसे अन्य तंत्र हैं, इसलिए हम केवल उत्पादन निर्माण के लिए सेंट्री को सक्षम करते हैं

इसके बाद हम अपने हैलो और एरर बटन लागू करते हैं और उन्हें एप्लिकेशन में जोड़ते हैं:

प्रतिक्रिया-ऐप/src/Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

प्रतिक्रिया-ऐप/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

प्रतिक्रिया-ऐप/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

समस्या (स्रोत मानचित्र)

हम निम्न दर्ज करके प्रोडक्शन बिल्ड के साथ सेंट्री का परीक्षण कर सकते हैं:

yarn build

और बिल्ड फ़ोल्डर से दर्ज करें:

npx http-server -c-1

जिस समस्या का हमें तुरंत सामना करना पड़ता है वह यह है कि सेंट्री के त्रुटि रिकॉर्ड छोटे बैच में लाइन नंबरों को संदर्भित करते हैं; बहुत उपयोगी नहीं.

सेंट्री सेवा त्रुटि प्राप्त होने के बाद कम किए गए पैकेट के लिए स्रोत मानचित्र खींचकर इसे समझाती है। इस मामले में हम लोकलहोस्ट से चल रहे हैं (सेंट्री सेवा द्वारा पहुंच योग्य नहीं)।

समाधान (स्रोत मानचित्र)

इस समस्या का समाधान सार्वजनिक वेब सर्वर से एप्लिकेशन को चलाना है। GitHub पेज सेवा (निःशुल्क) का उपयोग करने के लिए एक सरल उत्तर बटन। उपयोग के चरण आमतौर पर इस प्रकार हैं:

1. फ़ोल्डर की सामग्री कॉपी करें निर्माण एक फ़ोल्डर में डॉक्स रिपॉजिटरी की मूल निर्देशिका में।

2. चालू करें GitHub पेज डॉक्स फ़ोल्डर का उपयोग करने के लिए रिपॉजिटरी में (GitHub से)। मास्टर शाखाओं

3. GitHub में परिवर्तन पुश करें

नोट: जब मुझे पता चला कि मुझे क्या उपयोग करना है क्रिएट-क्रिएट-ऐप एप्लिकेशन लॉन्च करने के लिए होम पेज फ़ंक्शन। निम्नलिखित को package.json में जोड़ने के लिए नीचे आया:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

चल रहे एप्लिकेशन का अंतिम संस्करण यहां उपलब्ध है:

https://larkintuckerllc.github.io/hello-sentry/

पकड़े गए कीड़ों का चित्रण

चलिए हेलो बटन पर क्लिक करके चलते हैं।

इस तरह दिखने वाली त्रुटि के साथ:

टिप्पणियाँ:

• यह बग रिपोर्ट स्पष्ट नहीं हो सकी, ब्रावो.

बेहिसाब त्रुटियों का चित्रण

इसी तरह, चलिए बटन क्लिक के माध्यम से चलते हैं त्रुटि.

इस तरह दिखने वाली त्रुटि के साथ:

बेहिसाब त्रुटियों का बेहतर प्रबंधन (प्रतिपादन)

त्रुटि सीमा का परिचय

उपयोगकर्ता इंटरफ़ेस के हिस्से में एक जावास्क्रिप्ट त्रुटि से संपूर्ण एप्लिकेशन बाधित नहीं होना चाहिए। रिएक्ट उपयोगकर्ताओं के लिए इस समस्या को हल करने के लिए, रिएक्ट 16 "त्रुटि सीमा" नामक एक नई अवधारणा पेश करता है।

त्रुटि सीमाएँ रिएक्ट घटक हैं जो अपने चाइल्ड घटक ट्री में कहीं भी जावास्क्रिप्ट त्रुटियों को पकड़ते हैं, उन त्रुटियों को लॉग करते हैं, और दुर्घटनाग्रस्त घटक ट्री के बजाय फ़ॉलबैक यूआई प्रस्तुत करते हैं। त्रुटि सीमाएँ रेंडरिंग के दौरान, जीवनचक्र विधियों में और उनके नीचे पूरे पेड़ के कंस्ट्रक्टर्स में त्रुटियों को पकड़ती हैं।

...

अज्ञात त्रुटियों के लिए नया व्यवहार

यह बदलाव महत्वपूर्ण है. रिएक्ट 16 के अनुसार, जो त्रुटियाँ किसी त्रुटि सीमा द्वारा नहीं पकड़ी गईं, उनके परिणामस्वरूप संपूर्ण रिएक्ट घटक ट्री अनमाउंट हो जाएगा।

- डैन अब्रामोव - प्रतिक्रिया 16 में त्रुटि प्रबंधन

एक महत्वपूर्ण स्पष्टीकरण जिसके बारे में मुझे एहसास होने से पहले मुझे थोड़ा समय लगा वह यह है उपरोक्त व्यवहार केवल रेंडर विधि में उत्पन्न त्रुटियों के साथ काम करता है (या किसी भी जीवनचक्र विधि में अधिक संभावना है). उदाहरण के लिए, त्रुटि सीमाओं का उपयोग करने से हमारे बटन का कोई भला नहीं होगा त्रुटि; यह त्रुटि क्लिक हैंडलर में थी.

आइए रेंडर एरर का एक उदाहरण बनाएं और फिर त्रुटि को अधिक खूबसूरती से संभालने के लिए एरर बाउंड का उपयोग करें।

प्रतिक्रिया-ऐप/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

निरीक्षण:

• जब आप बटन दबाते हैं, प्रतिक्रिया प्रदर्शित किया जाएगा झंडा.पर्दाफाश.फर्जी, जो एक त्रुटि उत्पन्न करता है

• त्रुटि सीमा के बिना, संपूर्ण घटक वृक्ष अनमाउंट किया जाएगा

फिर हम अपना त्रुटि सीमा कोड लिखते हैं (नई जीवनचक्र पद्धति का उपयोग करते हैं कंपोनेंटडिडकैच); यह मूलतः डैन अब्रामोव के लेख में दिया गया उदाहरण है:

प्रतिक्रिया-ऐप/src/ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

अंत में हम इस घटक का उपयोग करते हैं:

प्रतिक्रिया-ऐप/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

हालाँकि, रेंडर एरर बटन पर क्लिक करने से फ़ॉलबैक यूआई प्रदर्शित होता है और सेंट्री को एक त्रुटि रिपोर्ट होती है।

समापन

मुझे आशा है कि आपको यह उपयोगी लगा होगा।

पुनश्च मूल से लिंक करें

सेंट्री के माध्यम से पीएस टेलीग्राम चैट https://t.me/sentry_ru

स्रोत: www.habr.com