ريڪٽ فرنٽ اينڊ ايپليڪيشنن ۾ بگ جي سينٽري ريموٽ مانيٽرنگ

اسان استعمال ڪري رهيا آهيون Sentry with React.

هي آرٽيڪل هڪ سيريز جو حصو آهي جيڪو هڪ مثال استعمال ڪندي سينٽري غلطين جي رپورٽ ڪرڻ سان شروع ٿئي ٿو: 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

اهو مسئلو جنهن ۾ اسان فوري طور تي هلون ٿا اهو آهي ته سينٽري جي غلطي جي رڪارڊ کي مائنس ٿيل بيچ ۾ لائن نمبرن جو حوالو ڏنو ويو آهي؛ تمام مفيد نه.

سينٽري سروس هن کي وضاحت ڪري ٿي ماخذ نقشن کي ڇڪڻ کان پوءِ غلطي حاصل ڪرڻ کان پوءِ گھٽيل پيڪٽ لاءِ. انهي صورت ۾ اسان هلندا آهيون لوڪل هوسٽ (سنٽري سروس طرفان دستياب ناهي).

حل (ذريعو نقشا)

هن مسئلي جو حل عوامي ويب سرور کان ايپليڪيشن کي هلائڻ آهي. GitHub Pages سروس استعمال ڪرڻ لاءِ ھڪڙو سادو جوابي بٽڻ (مفت). استعمال ڪرڻ جا قدم عام طور تي ھيٺ ڏنل آھن:

1. فولڊر جي مواد کي نقل ڪريو کپن فولڊر ڏانهن Docs مخزن جي روٽ ڊاريڪٽري ۾.

2. هلايو گٽب صفحا مخزن ۾ (GitHub کان) ڊاڪس فولڊر کي استعمال ڪرڻ لاءِ رکن ٿا شاخون

3. GitHub ۾ تبديلين کي ڇڪيو

ويچاري: بعد ۾ مون کي معلوم ڪيو ته مون کي ڇا استعمال ڪرڻ جي ضرورت آهي ٺاھڻ-بنائڻ-ايپ ايپليڪيشن لانچ ڪرڻ لاءِ هوم پيج فنڪشن. هيٺ ڏنل شامل ڪرڻ لاء هيٺ آيو package.json:

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

هلندڙ ايپليڪيشن جو آخري نسخو دستياب آهي:

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

پکڙيل بگڙن جو مثال

اچو ته هيلو بٽڻ تي ڪلڪ ڪري هلون.

هڪ غلطي سان هن طرح ظاهر ٿئي ٿو:

مشاهدو:

• هي بگ رپورٽ واضح نه ٿي سگهي، براوو.

بي حساب غلطين جو مثال

اهڙي طرح، اچو ته بٽڻ تي ڪلڪ ڪريو ذريعي وڃو مسئلو.

هڪ غلطي سان هن طرح ظاهر ٿئي ٿو:

بي حساب غلطين کي بهتر سنڀالڻ (ريڊرنگ)

غلطي جي حدن جو تعارف

يوزر انٽرفيس جي حصي ۾ جاوا اسڪرپٽ جي غلطي پوري ايپليڪيشن کي ٽوڙڻ نه گهرجي. React استعمال ڪندڙن لاءِ هن مسئلي کي حل ڪرڻ لاءِ، React 16 هڪ نئون تصور متعارف ڪرايو آهي جنهن کي "error bounds" سڏيو ويندو آهي.

نقص جون حدون React اجزاء آهن جيڪي JavaScript جي غلطين کي پڪڙيندا آهن انهن جي ٻار جي جزو جي وڻ ۾ ڪٿي به، انهن غلطين کي لاگ ان ڪريو، ۽ جزو جي وڻ جي بدران هڪ فال بيڪ 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,
    });
  }
}

مشاهدو:

• جڏهن توهان بٽڻ کي دٻايو، تصديق ڪريو ڏيکاريو ويندو جھنڊو. ڦاٽيل. ڪوڙو، جيڪو هڪ غلطي پيدا ڪري ٿو

• بغير ڪنهن غلطي جي حد کان سواء، سڄي جزو جي وڻ کي اڻڄاتل ڪيو ويندو

پوء اسان لکندا آهيون اسان جي غلطي جي حد جو ڪوڊ (نئين لائف سائيڪل جو طريقو استعمال ڪري ٿو 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 ڏيکاري ٿو ۽ سينٽري کي غلطي جي رپورٽ ڪري ٿو.

چڪاس

مون کي اميد آهي ته توهان هن کي مددگار ثابت ڪيو.

پي ايس اصل ڏانهن لنڪ

سينٽري ذريعي پي ايس ٽيليگرام چيٽ https://t.me/sentry_ru

جو ذريعو: www.habr.com