د سینټري په کارولو سره د عکس العمل غوښتنلیک کې د غلطیو تعقیب

نن زه به تاسو ته د عکس العمل غوښتنلیک کې د ریښتیني وخت غلطی تعقیب په اړه ووایم. د مخکینۍ پای غوښتنلیک عموما د غلطۍ تعقیب لپاره نه کارول کیږي. ځینې ​​​​شرکتونه ډیری وختونه د بګ تعقیب بندوي ، د اسنادو ، ازموینو او نورو وروسته بیرته راستنیږي. په هرصورت، که تاسو کولی شئ خپل محصول د ښه لپاره بدل کړئ، نو بیا یې وکړئ!

1. تاسو ولې سینټری ته اړتیا لرئ؟

زه ګومان کوم چې تاسو د تولید پرمهال د کیګونو تعقیبولو کې علاقه لرئ

ایا تاسو فکر کوئ چې دا کافي ندي؟

ښه، راځئ چې جزئيات وګورو.

د سینټری کارولو لپاره د پراختیا کونکو لپاره غوره دلیلونه:

• تاسو ته اجازه درکوي د خطرونو څخه مخنیوی وکړئ کله چې د غلطیو سره کوډ ځای په ځای کړئ
• د کوډ ازموینې سره د QA سره مرسته وکړئ
• د ستونزو په اړه ګړندي خبرتیاوې ترلاسه کړئ
• د ګړندي غلطیو سمولو وړتیا
• په اډمین پینل کې د غلطیو اسانه ښودل ترلاسه کول
• د کارن / براوزر برخې لخوا غلطۍ ترتیب کړئ

د سی ای او / لیډ پروژې اصلي لاملونه

• پیسې خوندي کړئ (سینټري ستاسو په سرورونو کې نصب کیدی شي)
• د کاروونکي نظر ترلاسه کول
• پدې پوهیدل چې په ریښتیني وخت کې ستاسو د پروژې سره څه غلط دي
• ستاسو د اپلیکیشن سره د خلکو د ستونزو شمیر پوهیدل
• تاسو سره د هغه ځایونو په موندلو کې مرسته وکړئ چیرې چې ستاسو پراختیا کونکو غلطي کړې

زه فکر کوم چې پراختیا کونکي به لومړی پدې مقاله کې علاقه ولري. تاسو کولی شئ د دلایلو دا لیست هم وکاروئ ترڅو خپل مالک د سینټري مدغم کولو لپاره قانع کړئ.

د سوداګرۍ لیست کې د وروستي توکي سره محتاط اوسئ.

ایا تاسو دمخه علاقه لرئ؟

Sentry څه شی دی؟

سینټري د خلاصې سرچینې بګ تعقیب غوښتنلیک دی چې پراختیا کونکو سره مرسته کوي په ریښتیني وخت کې د حادثو تعقیب او حل کړي. مه هېروئ چې غوښتنلیک تاسو ته اجازه درکوي موثریت زیات کړي او د کاروونکي تجربه ښه کړي. سینټری د جاواسکریپټ، نوډ، پایتون، پی ایچ پی، روبي، جاوا او نورو پروګرام کولو ژبو ملاتړ کوي.

2. ننوتئ او یوه پروژه جوړه کړئ

• خپل د سینټر حساب خلاص کړئ. تاسو ممکن لاګ ان شئ. (مهرباني وکړئ په یاد ولرئ چې سینټري ستاسو په سرورونو کې نصب کیدی شي)
• بل ګام د پروژې رامینځته کول دي
• د لیست څخه خپله ژبه غوره کړئ. (موږ غبرګون وټاکو. "پروژه جوړه کړئ" کلیک وکړئ)

خپل غوښتنلیک تنظیم کړئ. په کانټینر کې د سینټري ادغام څرنګوالي یوه اساسي بیلګه لاندې لیدل کیدی شي:

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

سینټري یو ګټور وزرډ لري ترڅو تاسو سره مرسته وکړي ترڅو معلومه کړي چې تاسو باید بل څه وکړئ. تاسو کولی شئ دا ګامونه تعقیب کړئ. زه غواړم تاسو ته وښیم چې څنګه ستاسو لومړی غلطی اداره کونکی رامینځته کړئ. ښه، موږ یوه پروژه جوړه کړه! راځئ چې بل ګام ته لاړ شو

3. عکس العمل او سینټري ادغام

تاسو باید په خپله پروژه کې د npm کڅوړه نصب کړئ.

npm i @sentry/browser

په خپل کانټینر کې سینټري پیل کړئ:

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

DSN په پروژو -> ترتیبات -> د پیرودونکي کیلي کې موقعیت لري. تاسو کولی شئ د لټون بار کې د پیرودونکي کیلي ومومئ.

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

4. د لومړۍ تېروتنې تعقیب

د مثال په توګه، ما د Deezer API سره یو ساده میوزیک غوښتنلیک کارولی. تاسو یې لیدلی شئ دلته. موږ باید یوه تېروتنه رامنځته کړو. یوه لاره د "نا تعریف شوي" ملکیت ته لاسرسی دی

موږ اړتیا لرو یو تڼۍ رامینځته کړو چې زنګ ووهي console.log с user.email. د دې عمل وروسته موږ باید د خطا پیغام ترلاسه کړو: نه موندل شوی TypeError (د نه تعریف شوي ملکیت څخه ملکیت نشي لوستلی email) د کارونکي څیز د ورکیدو له امله. تاسو هم کارولی شئ جاواسکریپټ استثنا.

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

د دې تڼۍ د یوځای کولو وروسته، تاسو باید په براوزر کې ازموینه وکړئ.

موږ خپله لومړۍ تېروتنه لرو

هو - هو!

که تاسو د سرلیک خطا باندې کلیک وکړئ، نو تاسو به د سټیک ټریس وګورئ.

پیغامونه بد ښکاري. البته موږ د غلطۍ پیغامونه لیدلي پرته له دې چې پوه شو چې کوډ چیرته دی. په ډیفالټ سره موږ په ReactJS کې د سرچینې نقشې په اړه خبرې کوو ځکه چې دوی تنظیم شوي ندي.

زه غواړم د سرچینې نقشې ترتیبولو لپاره لارښوونې هم چمتو کړم، مګر دا به دا مقاله زما د ارادې څخه ډیره اوږده کړي.

تاسو کولی شئ دا موضوع مطالعه کړئ دلته. که تاسو په دې مقاله کې لیوالتیا لرئ، دمیتري نوزینکو دویمه برخه به د سرچینې نقشې ادغام په اړه خپره کړي. نو، نور لایکونه ووهئ او ګډون یې وکړئ دمیتري نوزینکوتر څو دویمه برخه له لاسه ورنکړي.

5. کارول سینتری د پای ټکی سره API

سمه ده. موږ په تیرو پراګرافونو کې د جاوا سکرپٹ استثنا پوښلې ده. په هرصورت، موږ به د XHR غلطیتونو په اړه څه وکړو؟

سینټري هم د دودیز غلطی اداره کول لري. ما دا د api غلطیو تعقیب لپاره کارولی.

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

زه غواړم د کیچ 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));
      }
    });
};

راځئ چې میتودونه وګورو:

• د کچې کچه تاسو ته اجازه درکوي د سینټري ډشبورډ کې د کچې غلطی داخل کړئ. دا ځانګړتیاوې لري - 'وژونکي'، 'غلطي'، 'خبرداری'، 'لاګ'، 'معلومات، 'ډیبګ'، 'نازک').
• setUser د هر کارونکي ډیټا خوندي کولو کې مرسته کوي (ID ، بریښنالیک آدرس ، د تادیې پلان ، او داسې نور).
• setExtra تاسو ته اجازه درکوي هر هغه معلومات مشخص کړئ چې تاسو ورته اړتیا لرئ، د بیلګې په توګه، ذخیره کول.

که تاسو غواړئ د بګ په اړه د کارونکي فیډبیک ترلاسه کړئ ، نو تاسو باید د showReportDialog فنکشن وکاروئ.

Sentry.showReportDialog();

پایله:

نن ورځ موږ د عکس العمل غوښتنلیک کې سینټري مدغم کولو یوه لاره تشریح کړه.

→ د ټیلیګرام چیټ له خوا سینتری

سرچینه: www.habr.com