रिअॅक्ट फ्रंटएंड ऍप्लिकेशन्समधील बग्सचे सेंट्री रिमोट मॉनिटरिंग

आम्ही Sentry with React वापरून एक्सप्लोर करत आहोत.

हा लेख उदाहरणाचा वापर करून सेंट्रीच्या चुका नोंदवण्यापासून सुरू होणाऱ्या मालिकेचा भाग आहे: एक्सएनयूएमएक्स भाग.

प्रतिक्रिया अंमलबजावणी

प्रथम आम्हाला या अनुप्रयोगासाठी एक नवीन सेंटरी प्रकल्प जोडण्याची आवश्यकता आहे; सेन्ट्री वेबसाइटवरून. या प्रकरणात आम्ही प्रतिक्रिया निवडतो.

आम्ही आमची दोन बटणे, हॅलो आणि एरर, रिअॅक्टसह अॅप्लिकेशनमध्ये पुन्हा लागू करू. आम्ही आमचे स्टार्टर ऍप्लिकेशन तयार करून सुरुवात करतो:

npx create-react-app react-app

मग आम्ही सेंटरी पॅकेज आयात करतो:

yarn add @sentry/browser

आणि प्रारंभ करा:

react-app/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,
  });
}
...

निरीक्षणे:

• विकासादरम्यान, आमच्याकडे कन्सोलसारख्या समस्यांचे निरीक्षण करण्यासाठी इतर यंत्रणा आहेत, म्हणून आम्ही केवळ उत्पादन बिल्डसाठी सेन्ट्री सक्षम करतो

पुढे आम्ही आमची हॅलो आणि एरर बटणे लागू करतो आणि त्यांना ऍप्लिकेशनमध्ये जोडतो:

react-app/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);
    }
  }
}

react-app/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');
  }
}

react-app/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 वरून). मास्टर शाखा

3. GitHub मध्ये बदल पुश करा

शेरा: मला काय वापरायचे आहे हे समजल्यानंतर तयार करा-अ‍ॅप तयार करा ऍप्लिकेशन लॉन्च करण्यासाठी होम पेज फंक्शन. package.json मध्ये खालील जोडण्यासाठी खाली आले:

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

चालू असलेल्या अनुप्रयोगाची अंतिम आवृत्ती येथे उपलब्ध आहे:

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

पकडलेल्या बग्सचे चित्रण

हॅलो बटणावर क्लिक करून चला.

यासारखे दिसणार्‍या त्रुटीसह:

निरीक्षणे:

• हा दोष अहवाल अधिक स्पष्ट होऊ शकला नाही, ब्रावो.

त्रुटींसाठी बेहिशेबीचे उदाहरण

त्याचप्रमाणे, बटण क्लिक करून जाऊ या त्रुटी.

यासारखे दिसणार्‍या त्रुटीसह:

बेहिशेबी त्रुटींची उत्तम हाताळणी (रेंडरिंग)

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

वापरकर्ता इंटरफेसच्या काही भागामध्ये JavaScript त्रुटीमुळे संपूर्ण अनुप्रयोग खंडित होऊ नये. प्रतिक्रिया वापरकर्त्यांसाठी या समस्येचे निराकरण करण्यासाठी, प्रतिक्रिया 16 ने "एरर बाउंड" नावाची नवीन संकल्पना सादर केली आहे.

एरर बाउंडरीज हे रिअॅक्ट घटक आहेत जे त्यांच्या चाइल्ड कंपोनंट ट्रीमध्ये कुठेही JavaScript एरर पकडतात, त्या एरर लॉग करतात आणि क्रॅश झालेल्या घटक ट्रीऐवजी फॉलबॅक UI रेंडर करतात. एरर बाउंडरीज रेंडरिंग दरम्यान, लाइफसायकल पद्धतींमध्ये आणि त्यांच्या खाली असलेल्या संपूर्ण झाडाच्या कन्स्ट्रक्टरमध्ये त्रुटी पकडतात.

...

न सापडलेल्या त्रुटींसाठी नवीन वर्तन

हा बदल लक्षणीय आहे. React 16 नुसार, कोणत्याही त्रुटी सीमारेषेने पकडलेल्या त्रुटींमुळे संपूर्ण React घटक ट्री अनमाउंट केली जाईल.

- डॅन अब्रामोव्ह - प्रतिक्रिया 16 मध्ये हाताळण्यात त्रुटी

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

चला एक उदाहरण प्रस्तुतीकरण त्रुटी तयार करू आणि नंतर त्रुटी अधिक सुंदरपणे हाताळण्यासाठी त्रुटी सीमा वापरू.

react-app/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,
    });
  }
}

निरिक्षण:

• जेव्हा तुम्ही बटण दाबाल, प्रतिक्रिया द्या प्रदर्शित केले जाईल ध्वज.बस्टड.बोगस, जे त्रुटी निर्माण करते

• एरर सीमेशिवाय, संपूर्ण घटक वृक्ष अनमाउंट केला जाईल

मग आम्ही आमचा एरर सीमा कोड लिहितो (नवीन लाइफसायकल पद्धत वापरते componentDidCatch); हे मूलत: डॅन अब्रामोव्हच्या लेखात दिलेले उदाहरण आहे:

react-app/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;
  }
}

शेवटी आम्ही हा घटक वापरतो:

react-app/src/App.js

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

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

तथापि, रेंडर एरर बटणावर क्लिक केल्याने फॉलबॅक UI प्रदर्शित होते आणि सेन्ट्रीला त्रुटी कळवते.

पूर्ण करणे

मला आशा आहे की तुम्हाला हे उपयुक्त वाटले.

PS मूळ लिंक

सेंट्री द्वारे पीएस टेलीग्राम चॅट https://t.me/sentry_ru

स्त्रोत: www.habr.com