Sentry ဖြင့် React အက်ပ်တွင် အမှားများကို ခြေရာခံခြင်း။

ယနေ့ React အက်ပ်တွင် အချိန်နှင့်တစ်ပြေးညီ အမှားအယွင်းများကို ခြေရာခံခြင်းမှတစ်ဆင့် သင့်အား လမ်းညွှန်ပေးမည်ဖြစ်ပါသည်။ Frontend အပလီကေးရှင်းကို ပုံမှန်အားဖြင့် bug ခြေရာခံခြင်းအတွက် အသုံးမပြုပါ။ အချို့သောကုမ္ပဏီများသည် စာရွက်စာတမ်းပြုစုခြင်း၊ စမ်းသပ်မှုများပြုလုပ်ပြီးနောက် ၎င်းကို မကြာခဏ ပိုးကောင်ခြေရာခံခြင်းကို ဘေးဖယ်ထားလေ့ရှိသည်။ ဒါပေမယ့် သင့်ထုတ်ကုန်ကို ပိုကောင်းအောင် ပြောင်းလဲနိုင်ရင် အဲဒါကို လုပ်လိုက်ပါ။

1. အဘယ်ကြောင့် Sentry လိုအပ်သနည်း။

ထုတ်လုပ်နေစဉ်အတွင်း သင်သည် bug ခြေရာခံခြင်းကို စိတ်ဝင်စားသည်ဟု ယူဆပါသည်။

ဒါက မလုံလောက်ဘူးလို့ မင်းထင်လား။

ကောင်းပြီ၊ အသေးစိတ်ကိုကြည့်ရအောင်။

Developers အတွက် Sentry ကို အသုံးပြုရသည့် ထိပ်တန်းအကြောင်းရင်းများ-

• ကုဒ်ကို အမှားအယွင်းများဖြင့် အသုံးချသည့်အခါ အန္တရာယ်များကို ဖယ်ရှားနိုင်စေပါသည်။
• ကုဒ်စမ်းသပ်ခြင်းတွင် QA ကိုကူညီပါ။
• ပြဿနာသတိပေးချက်များကို အမြန်ရယူပါ။
• အမှားအယွင်းများကို လျင်မြန်စွာ ပြင်ဆင်နိုင်စွမ်းရှိသည်။
• စီမံခန့်ခွဲသူအကန့်တွင် အဆင်ပြေသော အမှားများပြသမှုကို ရယူခြင်း။
• အသုံးပြုသူ/ဘရောက်ဆာ အပိုင်းအလိုက် အမှားများကို စီပါ။

CEO/Lead ပရောဂျက်အတွက် အဓိကအကြောင်းရင်းများ

• ငွေစုပါ (Sentry ကို သင့်ဆာဗာများတွင် ထည့်သွင်းနိုင်သည်)
• အသုံးပြုသူတုံ့ပြန်ချက်ရယူပါ။
• သင့်ပရောဂျက်တွင် အမှားအယွင်းများကို အချိန်နှင့်တပြေးညီ နားလည်ခြင်း။
• သင့်အက်ပ်တွင် လူများကြုံတွေ့ရသည့် ပြဿနာအရေအတွက်ကို နားလည်ခြင်း။
• သင့်ဆော့ဖ်ဝဲအင်ဂျင်နီယာများ အမှားလုပ်မိသည့်နေရာများကို ရှာဖွေရာတွင် ကူညီပေးပါ။

ဒီဆောင်းပါးကို developer တွေက အရင်ကတည်းက စိတ်ဝင်စားမယ်လို့ ထင်ပါတယ်။ Sentry ကို ပေါင်းစည်းရန် သင့်အထက်လူကြီးကို ဆွဲဆောင်ရန် ဤအကြောင်းပြချက်များစာရင်းကိုလည်း သင်အသုံးပြုနိုင်ပါသည်။

လုပ်ငန်းစာရင်းရှိ နောက်ဆုံးအကြောင်းအရာကို သတိထားပါ။

စိတ်ဝင်စားနေပြီလား။

Sentry ဆိုတာ ဘာလဲ။

Sentry သည် ဆော့ဖ်ဝဲရေးသားသူများ ပျက်ကျမှုများကို အချိန်နှင့်တပြေးညီ ခြေရာခံပြီး ပြုပြင်ရန် ကူညီပေးသည့် ပွင့်လင်းရင်းမြစ် ချွတ်ယွင်းမှု ခြေရာခံသည့် အပလီကေးရှင်းတစ်ခုဖြစ်သည်။ အပလီကေးရှင်းသည် သင့်အား ထိရောက်မှုနှင့် အသုံးပြုသူအတွေ့အကြုံကို မြှင့်တင်ပေးနိုင်သည်ကိုလည်း မမေ့ပါနှင့်။ Sentry သည် JavaScript၊ Node၊ Python၊ PHP၊ Ruby၊ Java နှင့် အခြားသော ပရိုဂရမ်းမင်းဘာသာစကားများကို ပံ့ပိုးပေးသည်။

2. ဝင်ရောက်ပြီး ပရောဂျက်တစ်ခုကို ဖန်တီးပါ။

• သင်၏ Sentry အကောင့်ကိုဖွင့်ပါ။ လက်မှတ်ထိုးဝင်ရန် လိုအပ်နိုင်သည်။ (Sentry ကို သင့်ဆာဗာများတွင် ထည့်သွင်းနိုင်သည်ကို သတိပြုပါ)
• နောက်တစ်ဆင့်မှာ ပရောဂျက်တစ်ခုကို ဖန်တီးရန်ဖြစ်သည်။
• စာရင်းထဲမှ သင့်ဘာသာစကားကို ရွေးပါ။ (ကျွန်ုပ်တို့ React ကို ရွေးပါမည်။ "Create Project" ကိုနှိပ်ပါ)

သင့်လျှောက်လွှာကို စနစ်ထည့်သွင်းပါ။ Sentry ကို အောက်ဖော်ပြပါ ကွန်တိန်နာတစ်ခုသို့ ပေါင်းစပ်နည်း၏ အခြေခံဥပမာကို သင်ကြည့်ရှုနိုင်သည်-

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

Sentry တွင် သင်ဘာဆက်လုပ်သင့်သည်ကို အဖြေရှာရာတွင် ကူညီရန် အထောက်အကူဖြစ်စေသော wizard တစ်ခုရှိသည်။ အောက်ပါအဆင့်များအတိုင်း လုပ်ဆောင်နိုင်ပါသည်။ မင်းရဲ့ ပထမဆုံး error handler ကို ဘယ်လိုဖန်တီးရမလဲဆိုတာ ပြချင်ပါတယ်။ ကောင်းပြီ၊ ကျွန်ုပ်တို့သည် ပရောဂျက်တစ်ခုကို ဖန်တီးထားသည်။ နောက်တစ်ဆင့်ကို ဆက်ကြရအောင်

3. တုံ့ပြန်မှုနှင့် Sentry ပေါင်းစပ်ခြင်း။

သင့်ပရောဂျက်တွင် npm ပက်ကေ့ဂျ်ကို ထည့်သွင်းရပါမည်။

npm i @sentry/browser

သင့်ကွန်တိန်နာတွင် Sentry ကို စတင်ပါ-

Sentry.init({
 // dsn: #dsnUrl,
});

DSN သည် Projects -> Settings -> Client Keys တွင် တည်ရှိသည်။ ရှာဖွေမှုဘားတွင် ကလိုင်းယင့်သော့များကို ရှာဖွေနိုင်သည်။

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. ပထမဆုံး အမှားကို ခြေရာခံပါ။

ဥပမာအားဖြင့်၊ ကျွန်ုပ်သည် Deezer API ဖြင့် ရိုးရှင်းသော တေးဂီတအက်ပ်ကို အသုံးပြုခဲ့သည်။ အဲဒါကို ကြည့်လို့ရတယ်။ ဒီမှာ. အမှားတစ်ခုဖန်တီးရန် လိုအပ်သည်။ နည်းလမ်းတစ်ခုမှာ "မသတ်မှတ်ထားသော" ပိုင်ဆိုင်မှုကိုဝင်ရောက်ရန်ဖြစ်သည်။

ခေါ်ဆိုနိုင်သော ခလုတ်တစ်ခု ဖန်တီးရန် လိုအပ်သည်။ console မှတ်တမ်း с user.email. ဤလုပ်ဆောင်ချက်ပြီးနောက်၊ ကျွန်ုပ်တို့သည် အမှားသတင်းစကားကို လက်ခံသင့်သည်- Uncaught TypeError (သတ်မှတ်မထားသောမှ ပစ္စည်းကို ဖတ်၍မရပါ။ email) အသုံးပြုသူအရာဝတ္တုမရှိခြင်းကြောင့်။ သုံးလို့လည်းရပါတယ်။ javascript ခြွင်းချက်.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

ကွန်တိန်နာတစ်ခုလုံးသည် ဤကဲ့သို့ ဖြစ်သည်-

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

ဤခလုတ်ကို ပေါင်းစပ်ပြီးနောက်၊ browser တွင် ၎င်းကို စမ်းသပ်သင့်သည်။

ငါတို့မှာ ပထမဆုံး အမှားရှိတယ်။

ဟူး ဟူး!

header error ကိုနှိပ်ပါက stack trace ကိုတွေ့ရပါမည်။

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

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

ဒီအကြောင်းအရာကို လေ့လာနိုင်ပါတယ်။ ဒီမှာ. ဒီဆောင်းပါးကို စိတ်ဝင်စားတယ်ဆိုရင်၊ Dmitry Nozhenko အရင်းအမြစ်မြေပုံပေါင်းစည်းခြင်းဆိုင်ရာ ဒုတိယအပိုင်းကို ထုတ်ဝေပါမည်။ ဒါကြောင့် နောက်ထပ် Like တွေကို နှိပ်ပြီး Subscribe လုပ်ထားလိုက်ပါ။ Dmitry Nozhenkoဒုတိယပိုင်းကို လက်လွတ်မခံပါနဲ့။

၂။ အသုံးပြုမှု ကင်းစောင့် အဆုံးမှတ်နှင့် API ကို

အိုကေတယ်နော်။ ယခင်စာပိုဒ်များတွင် javascript ခြွင်းချက်အား ကျွန်ုပ်တို့ ဖုံးအုပ်ထားသည်။ သို့သော်၊ XHR အမှားများနှင့် ကျွန်ုပ်တို့ ဘာလုပ်မည်နည်း။

Sentry တွင်လည်း စိတ်ကြိုက် အမှားအယွင်း ကိုင်တွယ်မှု ရှိသည်။ api bug ခြေရာခံခြင်းအတွက် ၎င်းကိုအသုံးပြုခဲ့သည်။

Sentry.captureException(err)

ချွတ်ယွင်းချက်အမည်၊ အဆင့်၊ ဒေတာထည့်ရန်၊ သင့်အက်ပ်၊ အီးမေးလ်၊ စသည်တို့မှတစ်ဆင့် သီးသန့်အသုံးပြုသူဒေတာကို စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

catch API အတွက် ယေဘူယျလုပ်ဆောင်ချက်ကို သုံးလိုပါတယ်။

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

ဤလုပ်ဆောင်ချက်ကို api ခေါ်ဆိုမှုတွင် ထည့်သွင်းပါ။

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

နည်းလမ်းများကို စစ်ဆေးကြည့်ရအောင်။

• သတ်မှတ်အဆင့် ကင်းဒက်ရှ်ဘုတ်တွင် အဆင့်အမှားတစ်ခုကို ထည့်သွင်းနိုင်စေပါသည်။ ၎င်းတွင် ဂုဏ်သတ္တိများ - 'သေစေနိုင်သော'၊ 'အမှား'၊ 'သတိပေးချက်'၊ 'မှတ်တမ်း'၊ 'အချက်အလက်၊ 'ဒီဘာဂ်'၊ 'စိုးရိမ်ရ')။
• သတ်မှတ်အသုံးပြုသူ အသုံးပြုသူဒေတာ (id၊ အီးမေးလ်လိပ်စာ၊ ငွေပေးချေမှုအစီအစဉ်စသည်ဖြင့်) ကိုသိမ်းဆည်းရန်ကူညီပေးသည်။
• setExtra သင်လိုအပ်သည့် မည်သည့်ဒေတာကိုမဆို ဥပမာအားဖြင့် စတိုးဆိုင်တစ်ခုတွင် သတ်မှတ်ခွင့်ပြုသည်။

ချို့ယွင်းချက်တစ်ခုအပေါ် အသုံးပြုသူ တုံ့ပြန်ချက်ရယူလိုပါက၊ showReportDialog လုပ်ဆောင်ချက်ကို အသုံးပြုသင့်သည်။

Sentry.showReportDialog();

နိဂုံးချုပ်:

ယနေ့ကျွန်ုပ်တို့သည် Sentry ကို React အပလီကေးရှင်းတစ်ခုသို့ပေါင်းစပ်ရန်နည်းလမ်းများထဲမှတစ်ခုကိုဖော်ပြခဲ့သည်။

→ Telegram ဖြင့် စကားပြောပါ။ ကင်းစောင့်

source: www.habr.com