Sentry استعمال ڪندي React ايپليڪيشن ۾ غلطيون ٽريڪ ڪرڻ

اڄ مان توهان کي ري ايڪٽ ايپليڪيشن ۾ ريئل ٽائيم ايرر ٽريڪنگ بابت ٻڌائيندس. هڪ فرنٽ-آخر ايپليڪيشن عام طور تي استعمال ٿيل نه آهي غلطي ٽريڪنگ لاءِ. ڪجهه ڪمپنيون اڪثر ڪري بگ ٽريڪنگ کي بند ڪري ڇڏيندا آهن، دستاويزن، ٽيسٽ، وغيره کان پوء ان ڏانهن موٽڻ. تنهن هوندي، جيڪڏهن توهان پنهنجي پيداوار کي بهتر لاء تبديل ڪري سگهو ٿا، پوء بس اهو ڪريو!

1. توهان کي سينٽري جي ضرورت ڇو آهي؟

مان سمجهان ٿو ته توهان پيداوار دوران ڪيچ کي ٽريڪ ڪرڻ ۾ دلچسپي رکو ٿا

ڇا توهان سوچيو ته اهو ڪافي ناهي؟

ٺيڪ آهي، اچو ته تفصيل تي نظر رکون.

سنٽري استعمال ڪرڻ لاء ڊولپرز لاء مٿين سبب:

• توهان کي خطرن کان بچڻ جي اجازت ڏئي ٿي جڏهن غلطين سان ڪوڊ لڳائڻ
• مدد QA سان ڪوڊ ٽيسٽ
• مسئلن بابت جلدي اطلاعن حاصل ڪريو
• جلدي غلطين کي درست ڪرڻ جي صلاحيت
• منتظم پينل ۾ غلطين جو آسان ڊسپلي حاصل ڪرڻ
• استعمال ڪندڙ/براؤزر جي ڀاڱي ۾ غلطيون ترتيب ڏيو

سي اي او / ليڊ پروجيڪٽ جا بنيادي سبب

• پئسا بچايو (سنٽري توهان جي سرور تي نصب ٿي سگهي ٿو)
• صارف جي راءِ حاصل ڪرڻ
• سمجھو ته حقيقي وقت ۾ توھان جي منصوبي سان ڇا غلط آھي
• توهان جي ايپ سان ماڻهن جي مسئلن جي تعداد کي سمجهڻ
• توھان کي جڳھون ڳولڻ ۾ مدد ڪريو جتي توھان جي ڊولپر غلطيون ڪيون آھن

منهنجو خيال آهي ته ڊولپرز پهرين هن مضمون ۾ دلچسپي وٺندا. توھان پڻ استعمال ڪري سگھوٿا ھن سببن جي لسٽ پنھنجي باس کي قائل ڪرڻ لاءِ سينٽري کي ضم ڪرڻ لاءِ.

ڪاروباري لسٽ تي آخري شيون سان محتاط رھو.

ڇا توهان اڳ ۾ ئي دلچسپي وٺندا آهيو؟

Sentry ڇا آهي؟

Sentry هڪ اوپن سورس بگ ٽريڪنگ ايپليڪيشن آهي جيڪا ڊولپرز کي حقيقي وقت ۾ حادثن کي ٽريڪ ڪرڻ ۽ درست ڪرڻ ۾ مدد ڪري ٿي. اهو نه وساريو ته ايپليڪيشن توهان کي ڪارڪردگي وڌائڻ ۽ صارف جي تجربي کي بهتر ڪرڻ جي اجازت ڏئي ٿي. Sentry JavaScript، Node، Python، PHP، Ruby، Java ۽ ٻين پروگرامنگ ٻولين کي سپورٽ ڪري ٿي.

2. لاگ ان ڪريو ۽ پروجيڪٽ ٺاھيو

• پنهنجو سينٽري اڪائونٽ کوليو. توھان کي شايد لاگ ان ٿيڻو پوندو. (مهرباني ڪري نوٽ ڪريو ته سينٽري توهان جي سرور تي نصب ٿي سگهي ٿي)
• ايندڙ قدم هڪ پروجيڪٽ ٺاهڻ آهي
• فهرست مان پنھنجي ٻولي چونڊيو. (اسان React کي منتخب ڪرڻ وارا آهيون. ڪلڪ ڪريو "پروجيڪٽ ٺاهيو")

پنھنجي ايپليڪيشن کي ترتيب ڏيو. سينٽرري کي ڪنٽينر ۾ ڪيئن ضم ڪرڻ جو هڪ بنيادي مثال هيٺ ڏجي ٿو:

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. پهرين غلطي کي ٽريڪ ڪرڻ

مثال طور، مون استعمال ڪيو هڪ سادي ميوزڪ ايپليڪيشن ڊيزر API سان. توهان ان کي ڏسي سگهو ٿا هتي. اسان کي هڪ غلطي پيدا ڪرڻ جي ضرورت آهي. ھڪڙو طريقو آھي "اڻ بيان ڪيل" ملڪيت تائين رسائي

اسان کي هڪ بٽڻ ٺاهڻ جي ضرورت آهي جيڪو ڪال ڪري ٿو console.log с user.email. هن عمل کان پوء اسان کي هڪ غلطي پيغام حاصل ڪرڻ گهرجي: اڻڄاتل ٽائيپ ايرر (پراپرٽي نه پڙهي سگھجي ٿو اڻ ڄاڻايل 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 ۾ ماخذ نقشي بابت ڳالهائي رهيا آهيون ڇاڪاڻ ته اهي ترتيب ڏنل نه آهن.

مان پڻ ماخذ نقشي کي ترتيب ڏيڻ لاءِ هدايتون مهيا ڪرڻ چاهيان ٿو، پر اهو هن آرٽيڪل کي منهنجي ارادي کان گهڻو ڊگهو ڪندو.

توھان ھن موضوع جو مطالعو ڪري سگھو ٿا هتي. جيڪڏهن توهان هن مضمون ۾ دلچسپي رکو ٿا، دمتري Nozhenko ماخذ نقشي جي انضمام بابت ٻيو حصو شايع ڪندو. تنهن ڪري، وڌيڪ پسند ڪريو ۽ رڪنيت حاصل ڪريو دمتري Nozhenkoته جيئن ٻيو حصو نه وڃايو.

5. استعمال فيڪٽري آخري نقطي سان API

ٺيڪ. اسان پوئين پيراگراف ۾ جاوا اسڪرپٽ جي استثنا کي ڍڪي ڇڏيو آهي. بهرحال، اسان XHR جي غلطين بابت ڇا ڪنداسين؟

Sentry وٽ به ڪسٽم ايرر هينڊلنگ آهي. مون ان کي استعمال ڪيو 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);
};

ھن فنڪشن کي پنھنجي اي پي آئي ڪال ۾ درآمد ڪريو.

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، اي ميل پتو، ادائگي جو منصوبو، وغيره).
• سيٽ اضافي توهان کي ڪنهن به ڊيٽا جي وضاحت ڪرڻ جي اجازت ڏئي ٿي جيڪا توهان کي گهربل هجي، مثال طور، اسٽور.

جيڪڏھن توھان چاھيو ٿا صارف راءِ حاصل ڪريو ھڪڙي بگ بابت، توھان کي استعمال ڪرڻ گھرجي showReportDialog فنڪشن.

Sentry.showReportDialog();

نتيجو:

اڄ اسان بيان ڪيو آھي ھڪڙي طريقي سان سينٽري کي ضم ڪرڻ جو ھڪڙو ردعمل ايپليڪيشن ۾.

→ ٽيليگرام چيٽ پاران فيڪٽري

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