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

हामी प्रतिक्रियाको साथ Sentry प्रयोग गरेर अन्वेषण गर्दैछौं।

यो लेख एउटा उदाहरण प्रयोग गरेर सेन्ट्री त्रुटिहरू रिपोर्ट गर्न सुरु हुने श्रृंखलाको अंश हो: 1 भाग.

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

पहिले हामीले यो अनुप्रयोगको लागि नयाँ सेन्ट्री परियोजना थप्न आवश्यक छ; सेन्ट्री वेबसाइटबाट। यस अवस्थामा हामी प्रतिक्रिया छान्छौं।

हामी हाम्रा दुई बटनहरू, हेलो र एरर, प्रतिक्रियाको साथ एउटा अनुप्रयोगमा पुन: लागू गर्नेछौं। हामी हाम्रो स्टार्टर अनुप्रयोग सिर्जना गरेर सुरु गर्छौं:

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 पृष्ठहरू भण्डारमा (GitHub बाट) कागजात फोल्डर प्रयोग गर्न मास्टर शाखाहरू

3. GitHub मा परिवर्तनहरू पुश गर्नुहोस्

भन्नु: मैले के प्रयोग गर्न आवश्यक छ भनेर बुझे पछि सिर्जना-सिर्जना-एप अनुप्रयोग सुरु गर्न गृह पृष्ठ प्रकार्य। package.json मा निम्न थप्न तल आयो:

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

चलिरहेको अनुप्रयोगको अन्तिम संस्करण यहाँ उपलब्ध छ:

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

समातिएका बगहरूको चित्रण

नमस्ते बटन क्लिक गरेर हिंडौं।

यस प्रकार देखिने त्रुटि संग:

अवलोकनहरू:

• यो बग रिपोर्ट स्पष्ट हुन सकेन, औंठी.

त्रुटिहरूको लागि बेहिसाबको चित्रण

त्यस्तै गरी, बटन क्लिक मार्फत जाऔं त्रुटि.

यस प्रकार देखिने त्रुटि संग:

बेहिसाब त्रुटिहरूको राम्रो ह्यान्डलिङ (रेन्डरिङ)

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

प्रयोगकर्ता इन्टरफेसको भागमा JavaScript त्रुटिले सम्पूर्ण अनुप्रयोगलाई तोड्नु हुँदैन। प्रतिक्रिया प्रयोगकर्ताहरूको लागि यो समस्या समाधान गर्न, प्रतिक्रिया 16 ले "त्रुटि सीमा" भनिने नयाँ अवधारणा प्रस्तुत गर्दछ।

त्रुटि सीमाहरू प्रतिक्रिया कम्पोनेन्टहरू हुन् जसले जाभास्क्रिप्ट त्रुटिहरू उनीहरूको बाल कम्पोनेन्ट ट्रीमा कहीं पनि समात्छन्, ती त्रुटिहरू लगाउँछन्, र क्र्यास भएको कम्पोनेन्ट रूखको सट्टा फलब्याक UI रेन्डर गर्दछ। त्रुटि सीमाहरू रेन्डरिङको समयमा, जीवनचक्र विधिहरूमा, र तिनीहरूको तल सम्पूर्ण रूखको निर्माणकर्ताहरूमा त्रुटिहरू समात्छन्।

...

पत्ता नलागेका त्रुटिहरूको लागि नयाँ व्यवहार

यो परिवर्तन महत्वपूर्ण छ। प्रतिक्रिया 16 को अनुसार, त्रुटिहरू जुन कुनै त्रुटि सीमाद्वारा समातिएनन् जसको परिणाम सम्पूर्ण प्रतिक्रिया घटक ट्री अनमाउन्ट हुनेछ।

- दान अब्रामोभ - प्रतिक्रिया 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,
    });
  }
}

अवलोकन:

• बटन थिच्दा, प्रतिक्रिया प्रदर्शित हुनेछ flag.busted.bogus, जसले त्रुटि उत्पन्न गर्छ

• त्रुटि सीमा बिना, सम्पूर्ण घटक रूख अनमाउन्ट हुनेछ

त्यसपछि हामी हाम्रो त्रुटि सीमा कोड लेख्छौं (नयाँ जीवनचक्र विधि प्रयोग गर्दछ 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 मूल लिङ्क

सेन्ट्री मार्फत PS टेलिग्राम च्याट https://t.me/sentry_ru

स्रोत: www.habr.com