🥇 প্রতিক্রিয়া ফ্রন্টএন্ড অ্যাপ্লিকেশনে বাগগুলির সেন্ট্রি রিমোট মনিটরিং

আমরা প্রতিক্রিয়া সহ 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 পেজ পরিষেবা ব্যবহার করার জন্য একটি সহজ উত্তর বোতাম (বিনামূল্যে)। ব্যবহার করার পদক্ষেপগুলি সাধারণত নিম্নরূপ:

ফোল্ডারের বিষয়বস্তু কপি করুন নির্মাণ করা ফোল্ডারে ডক্স সংগ্রহস্থলের রুট ডিরেক্টরিতে।
চালু করা গিটহাব পৃষ্ঠাগুলি রিপোজিটরিতে (GitHub থেকে) ডক্স ফোল্ডারটি ব্যবহার করতে মালিক শাখা
GitHub এ পরিবর্তনগুলি পুশ করুন

মন্তব্য: আমি কি ব্যবহার করতে হবে তা বের করার পরে তৈরি-তৈরি-অ্যাপ অ্যাপ্লিকেশন চালু করতে হোম পেজ ফাংশন। package.json-এ নিম্নলিখিত যোগ করার জন্য নেমে এসেছি:

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

চলমান অ্যাপ্লিকেশনের চূড়ান্ত সংস্করণ এখানে উপলব্ধ:

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

ধরা পড়া বাগগুলির দৃষ্টান্ত

হ্যালো বোতামে ক্লিক করে চলুন।

এই মত প্রদর্শিত একটি ত্রুটি সঙ্গে:

পর্যবেক্ষণ:

এই বাগ রিপোর্ট পরিষ্কার হতে পারে না, বলিহারি.

ত্রুটির জন্য হিসাবহীনের চিত্র

অনুরূপভাবে, এর বাটন ক্লিক মাধ্যমে যান ভুল.

এই মত প্রদর্শিত একটি ত্রুটি সঙ্গে:

হিসাববিহীন ত্রুটিগুলির আরও ভাল পরিচালনা (রেন্ডারিং)

ত্রুটি সীমা পরিচিতি

ইউজার ইন্টারফেসের একটি অংশে একটি জাভাস্ক্রিপ্ট ত্রুটি সমগ্র অ্যাপ্লিকেশনটি ভাঙ্গা উচিত নয়। প্রতিক্রিয়া ব্যবহারকারীদের জন্য এই সমস্যাটি সমাধান করার জন্য, প্রতিক্রিয়া 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 দেখায় এবং সেন্ট্রিকে একটি ত্রুটি রিপোর্ট করে।

পরিপূরণ

আমি আশা করি আপনি এই সহায়ক পাওয়া গেছে.

দ্রষ্টব্য মূল লিঙ্ক

সেন্ট্রির মাধ্যমে পিএস টেলিগ্রাম চ্যাট https://t.me/sentry_ru

উত্স: www.habr.com

প্রতিক্রিয়া ফ্রন্টএন্ড অ্যাপ্লিকেশনগুলিতে বাগগুলির সেন্ট্রি দূরবর্তী পর্যবেক্ষণ

একটি মন্তব্য জুড়ুন উত্তর বাতিল