ری ایکٹ فرنٹ اینڈ ایپلی کیشنز میں کیڑے کی سنٹری ریموٹ مانیٹرنگ

ہم React کے ساتھ Sentry کا استعمال کر رہے ہیں۔

یہ مضمون اس سلسلے کا حصہ ہے جس کا آغاز سنتری کی غلطیوں کی رپورٹنگ کے ساتھ ایک مثال کا استعمال کرتے ہوئے: 1 حصہ.

رد عمل کا نفاذ

پہلے ہمیں اس ایپلی کیشن کے لیے ایک نیا سنٹری پروجیکٹ شامل کرنا ہوگا۔ سینٹری کی ویب سائٹ سے۔ اس صورت میں ہم React کا انتخاب کرتے ہیں۔

ہم 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

ہمیں فوری طور پر جس مسئلہ کا سامنا کرنا پڑتا ہے وہ یہ ہے کہ سینٹری کے ایرر ریکارڈز minified بیچ میں لائن نمبرز کا حوالہ دیتے ہیں۔ بہت مفید نہیں.

سینٹری سروس غلطی موصول ہونے کے بعد کم شدہ پیکٹ کے سورس میپس کو کھینچ کر اس کی وضاحت کرتی ہے۔ اس معاملے میں ہم لوکل ہوسٹ سے چل رہے ہیں (سینٹری سروس کے ذریعے قابل رسائی نہیں ہے)۔

حل (ماخذ نقشے)

اس مسئلے کا حل عوامی ویب سرور سے ایپلی کیشن کو چلانا ہے۔ GitHub Pages سروس (مفت) استعمال کرنے کے لیے ایک آسان جوابی بٹن۔ استعمال کرنے کے اقدامات عام طور پر درج ذیل ہیں:

1. فولڈر کے مواد کو کاپی کریں۔ تعمیر فولڈر میں دستاویزات ریپوزٹری کی روٹ ڈائرکٹری میں۔

2. آن کر دو گٹ ہب صفحات میں دستاویزات کے فولڈر کو استعمال کرنے کے لیے ذخیرہ میں (گٹ ہب سے) ماسٹر شاخوں

3. GitHub میں تبدیلیوں کو پش کریں۔

نوٹ: جب میں نے سوچا کہ مجھے کیا استعمال کرنے کی ضرورت ہے۔ create-create-app ایپلیکیشن لانچ کرنے کے لیے ہوم پیج فنکشن۔ پیکیج.json میں درج ذیل کو شامل کرنے کے لئے نیچے آیا:

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

چل رہی ایپلیکیشن کا آخری ورژن یہاں پر دستیاب ہے:

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

پکڑے گئے کیڑے کی مثال

آئیے ہیلو بٹن پر کلک کرکے چلتے ہیں۔

اس طرح ظاہر ہونے والی خرابی کے ساتھ:

مشاہدات:

• یہ بگ رپورٹ واضح نہیں ہو سکی، براوو.

غلطیوں کے لیے بے حساب کی مثال

اسی طرح، آئیے بٹن پر کلک کریں۔ خرابی.

اس طرح ظاہر ہونے والی خرابی کے ساتھ:

بے حساب غلطیوں کو بہتر طریقے سے ہینڈل کرنا (رینڈرنگ)

غلطی کی حدود کا تعارف

یوزر انٹرفیس کے ایک حصے میں جاوا اسکرپٹ کی خرابی پوری ایپلیکیشن کو نہیں توڑ سکتی۔ React صارفین کے لیے اس مسئلے کو حل کرنے کے لیے، React 16 نے ایک نیا تصور متعارف کرایا ہے جسے "error bounds" کہا جاتا ہے۔

ایرر باؤنڈریز ری ایکٹ اجزاء ہیں جو اپنے چائلڈ کمپوننٹ ٹری میں کہیں بھی جاوا اسکرپٹ کی خرابیوں کو پکڑتے ہیں، ان غلطیوں کو لاگ ان کرتے ہیں، اور کریش ہونے والے جزو کے درخت کی بجائے فال بیک 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,
    });
  }
}

مشاہدہ:

• جب آپ بٹن دبائیں گے، جواب دیں دکھایا جائے گا 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