React frontend အပလီကေးရှင်း

Sentry ဖြင့် React ကို အသုံးပြု၍ ကျွန်ုပ်တို့ ရှာဖွေနေပါသည်။

ဤဆောင်းပါးသည် နမူနာတစ်ခုကို အသုံးပြု၍ Sentry အမှားများကို အစီရင်ခံခြင်းဖြင့် စတင်သည့် စီးရီးတစ်ခု၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်- စိတျအပိုငျး 1.

တုံ့ပြန်မှုကို အကောင်အထည်ဖော်ခြင်း။

ပထမဦးစွာ ဤအပလီကေးရှင်းအတွက် Sentry ပရောဂျက်အသစ်တစ်ခုကို ထည့်သွင်းရန် လိုအပ်ပါသည်။ Sentry ဝဘ်ဆိုဒ်မှ ဤကိစ္စတွင်ကျွန်ုပ်တို့သည် React ကိုရွေးချယ်သည်။

React ဖြင့် အပလီကေးရှင်းတစ်ခုတွင် ကျွန်ုပ်တို့၏ ခလုတ်နှစ်ခုဖြစ်သည့် Hello နှင့် Error ကို ပြန်လည်အသုံးပြုပါမည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ starter application ကို ဖန်တီးခြင်းဖြင့် စတင်သည် ။

npx create-react-app react-app

ထို့နောက် Sentry ပက်ကေ့ဂျ်ကို တင်သွင်းသည်-

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

လေ့လာတွေ့ရှိချက်များ-

ဖွံ့ဖြိုးတိုးတက်မှုကာလအတွင်း ကျွန်ုပ်တို့တွင် ကွန်ဆိုးလ်ကဲ့သို့သော ပြဿနာများကို စောင့်ကြည့်ရန် အခြားယန္တရားများ ရှိသည်၊ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ထုတ်လုပ်မှုတည်ဆောက်မှုအတွက် Sentry ကိုသာ ဖွင့်ထားပါသည်

ထို့နောက် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Hello နှင့် Error ခလုတ်များကို အကောင်အထည်ဖော်ပြီး ၎င်းတို့ကို အပလီကေးရှင်းတွင် ထည့်သွင်းပါ-

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;

ပြဿနာ (အရင်းအမြစ်မြေပုံများ)

ဝင်ရောက်ခြင်းဖြင့် Sentry ကို ထုတ်လုပ်မှုတည်ဆောက်မှုဖြင့် စမ်းသပ်နိုင်သည်-

yarn build

နှင့် build folder မှ enter:

npx http-server -c-1

ကျွန်ုပ်တို့ချက်ချင်းကြုံတွေ့ရသည့်ပြဿနာမှာ Sentry ၏အမှားမှတ်တမ်းများသည် minified batch ရှိ လိုင်းနံပါတ်များကိုရည်ညွှန်းခြင်းဖြစ်သည်။ သိပ်အသုံးမဝင်ပါဘူး။

Sentry ဝန်ဆောင်မှုသည် အမှားတစ်ခုလက်ခံရရှိပြီးနောက် လျှော့စျေးပက်ကတ်အတွက် အရင်းအမြစ်မြေပုံများကို ဆွဲထုတ်ခြင်းဖြင့် ၎င်းကိုရှင်းပြသည်။ ဤအခြေအနေတွင် ကျွန်ုပ်တို့သည် localhost မှ လုပ်ဆောင်နေပါသည် (Sentry ဝန်ဆောင်မှုမှ အသုံးပြု၍မရပါ)။

ဖြေရှင်းချက်များ (အရင်းအမြစ်မြေပုံများ)

ဤပြဿနာအတွက် ဖြေရှင်းချက်မှာ အများသူငှာ ဝဘ်ဆာဗာတစ်ခုမှ အပလီကေးရှင်းကို run ရန်ဖြစ်သည်။ GitHub Pages ဝန်ဆောင်မှုကို အသုံးပြုရန် ရိုးရှင်းသော စာပြန်ခလုတ်တစ်ခု (အခမဲ့)။ အသုံးပြုရန် အဆင့်များသည် အများအားဖြင့် အောက်ပါအတိုင်းဖြစ်သည်။

ဖိုင်တွဲ၏ အကြောင်းအရာများကို ကူးယူပါ။ တည်ဆောက် folder သို့ စာရွက်စာတမ်းများ repository ၏ root directory တွင်။
ဖွင့်သည် GitHub စာမျက်နှာများ docs folder ကိုအသုံးပြုရန် repository (GitHub မှ) မာစတာ အကိုင်းအခက်
ပြောင်းလဲမှုများကို GitHub သို့ တွန်းပါ။

ပွောဆို: ငါဘာကိုသုံးရမယ်ဆိုတာကို တွေးပြီးရင် ဖန်တီး-ဖန်တီး-အက်ပ် အပလီကေးရှင်းကိုဖွင့်ရန် ပင်မစာမျက်နှာလုပ်ဆောင်ချက်။ package.json တွင် အောက်ပါတို့ကို ပေါင်းထည့်ရန် ဆင်းလာခဲ့သည်။

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

လုပ်ဆောင်နေသည့် အပလီကေးရှင်း၏ နောက်ဆုံးဗားရှင်းကို အောက်ပါနေရာတွင် ရနိုင်ပါသည်။

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

Caught Bugs ၏သရုပ်ဖော်ပုံ

Hello ခလုတ်ကို နှိပ်လိုက်ကြရအောင်။

ဤကဲ့သို့ ပေါ်လာသော အမှားတစ်ခုနှင့်

လေ့လာတွေ့ရှိချက်များ-

ဤချွတ်ယွင်းချက်အစီရင်ခံစာသည် ပိုမိုရှင်းလင်း၍မရနိုင်ပါ၊ Bravo.

အမှားများအတွက် စာရင်းမဝင်သော ပုံဥပမာ

ဒီလိုပဲ ခလုပ်ကိုနှိပ်လိုက်ကြရအောင် အမှား.

ဤကဲ့သို့ ပေါ်လာသော အမှားတစ်ခုနှင့်

စာရင်းမဝင်သော အမှားများကို ပိုမိုကောင်းမွန်စွာ ကိုင်တွယ်ခြင်း (ပုံဖေါ်ခြင်း)

Error Limits ၏နိဒါန်း

အသုံးပြုသူအင်တာဖေ့စ်၏တစ်စိတ်တစ်ပိုင်းရှိ JavaScript အမှားတစ်ခုသည် အပလီကေးရှင်းတစ်ခုလုံးကို မချိုးဖျက်သင့်ပါ။ React အသုံးပြုသူများအတွက် ဤပြဿနာကို ဖြေရှင်းရန်အတွက် React 16 သည် "error bounds" ဟုခေါ်သော အယူအဆအသစ်ကို မိတ်ဆက်ပေးပါသည်။

အမှားနယ်နိမိတ်များသည် ၎င်းတို့၏ကလေးအစိတ်အပိုင်းသစ်ပင်ရှိ မည်သည့်နေရာတွင်မဆို JavaScript အမှားများကို ဖမ်းယူနိုင်ပြီး အဆိုပါအမှားများကို မှတ်တမ်းတင်ကာ ပျက်ကျသွားသော အစိတ်အပိုင်းသစ်အစား အစားထိုး UI ကို ပြန်ပေးသည့် တုံ့ပြန်သည့်အစိတ်အပိုင်းများဖြစ်သည်။ အမှားနယ်နိမိတ်များသည် တင်ဆက်နေစဉ်၊ ဘဝသံသရာနည်းလမ်းများနှင့် ၎င်းတို့အောက်ရှိ သစ်ပင်တစ်ခုလုံး၏ တည်ဆောက်သူများတွင် အမှားအယွင်းများကို ဖမ်းမိပါသည်။

...

မတွေ့နိုင်သော အမှားများအတွက် အပြုအမူအသစ်

ဤပြောင်းလဲမှုသည် သိသာထင်ရှားပါသည်။ React 16 အရ၊ မည်သည့် error အပိုင်းမှ ဖမ်းမမိသော အမှားများသည် React အစိတ်အပိုင်းသစ်ပင်တစ်ခုလုံးကို unmount လုပ်ခြင်းဖြစ်လိမ့်မည်။

- Dan Abramov - React 16 တွင် အမှားအယွင်းများကို ကိုင်တွယ်ခြင်း။

အဲဒါကို မရိပ်မိခင် အချိန်အတော်ကြာအောင် အရေးကြီးတဲ့ ရှင်းလင်းချက်တစ်ခုပါ။ အထက်ပါအပြုအမူသည် render method (သို့) lifecycle method တစ်ခုခုတွင် ဖြစ်နိုင်ချေရှိသော အမှားများနှင့်သာ အလုပ်လုပ်သည်. ဥပမာအားဖြင့်၊ error boundaries ကိုအသုံးပြုခြင်းဖြင့် ကျွန်ုပ်တို့၏ခလုတ်ကို ကောင်းကောင်းလုပ်ဆောင်နိုင်မည်မဟုတ်ပေ။ အမှား; ဤအမှားသည် click handler တွင်ရှိခဲ့သည်။

ဥပမာ တင်ဆက်ခြင်း error တစ်ခုဖန်တီးပြီး အမှားကို ပိုမိုချောမွေ့စွာ ကိုင်တွယ်ရန် အမှားဘောင်များကို အသုံးပြုကြပါစို့။

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အမှားတစ်ခုထုတ်ပေးသည်။
အမှားအယွင်းမရှိ၊ အစိတ်အပိုင်းသစ်ပင်တစ်ခုလုံးကို ပြန်ဖြုတ်လိုက်ပါမည်။

ထို့နောက် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အမှားနယ်နိမိတ်ကုဒ်ကို ရေးသားပါ (ဘဝသံသရာနည်းလမ်းသစ်ကို အသုံးပြုသည်။ အစိတ်အပိုင်းDidCatch); ဤသည်မှာ Dan Abramov ၏ဆောင်းပါးတွင်ဖော်ပြထားသောအခြေခံအားဖြင့်ဥပမာဖြစ်သည်။

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>
    );
  }
}
...

သို့သော်လည်း၊ Render Error ခလုတ်ကို နှိပ်ခြင်းသည် ကျောဘက် UI ကို ပြသပြီး Sentry သို့ အမှားအယွင်းတစ်ခုဖြစ်ကြောင်း သတင်းပို့သည်။

ပြည့်စုံခြင်း

ဒါကို အထောက်အကူဖြစ်မယ်လို့ မျှော်လင့်ပါတယ်။

PS မူရင်းလင့်ခ်

Sentry မှတဆင့် PS Telegram ချတ် https://t.me/sentry_ru

source: www.habr.com

React frontend အပလီကေးရှင်းများရှိ bug များကို Sentry remote စောင့်ကြည့်ခြင်း။

မှတ်ချက် Add

React frontend အပလီကေးရှင်းများရှိ bug များကို Sentry remote စောင့်ကြည့်ခြင်း။

မှတ်ချက် Add ပြန်ကြားချက်ကိုပယ်ဖျက်

မှတ်ချက် Add