Sentry کا استعمال کرتے ہوئے React ایپلی کیشن میں غلطیوں کا سراغ لگانا

آج میں آپ کو ری ایکٹ ایپلی کیشن میں ریئل ٹائم ایرر ٹریکنگ کے بارے میں بتاؤں گا۔ ایک فرنٹ اینڈ ایپلیکیشن عام طور پر ایرر ٹریکنگ کے لیے استعمال نہیں ہوتی ہے۔ کچھ کمپنیاں اکثر بگ ٹریکنگ کو روک دیتی ہیں، دستاویزات، ٹیسٹ وغیرہ کے بعد اس پر واپس آتی ہیں۔ تاہم، اگر آپ اپنی مصنوعات کو بہتر کے لیے تبدیل کر سکتے ہیں، تو بس کر دیں!

1. آپ کو سنتری کی ضرورت کیوں ہے؟

میں فرض کرتا ہوں کہ آپ پیداوار کے دوران کیڑے کو ٹریک کرنے میں دلچسپی رکھتے ہیں۔

کیا آپ کو لگتا ہے کہ یہ کافی نہیں ہے؟

ٹھیک ہے، آئیے تفصیلات دیکھتے ہیں۔

ڈویلپرز کے سنٹری کو استعمال کرنے کی اہم وجوہات:

• غلطیوں کے ساتھ کوڈ کی تعیناتی کرتے وقت آپ کو خطرات سے بچنے کی اجازت دیتا ہے۔
• کوڈ ٹیسٹنگ میں QA کی مدد کریں۔
• مسائل کے بارے میں فوری اطلاعات موصول کریں۔
• غلطیوں کو تیزی سے درست کرنے کی صلاحیت
• ایڈمن پینل میں غلطیوں کا آسان ڈسپلے حاصل کرنا
• صارف/براؤزر طبقہ کے لحاظ سے غلطیوں کو ترتیب دیں۔

سی ای او/لیڈ پروجیکٹ کی اہم وجوہات

• پیسے بچائیں (سینٹری آپ کے سرورز پر انسٹال کی جا سکتی ہے)
• صارف کی رائے حاصل کرنا
• یہ سمجھنا کہ آپ کے پروجیکٹ میں اصل وقت میں کیا خرابی ہے۔
• آپ کی ایپ کے ساتھ لوگوں کو درپیش مسائل کی تعداد کو سمجھنا
• ایسی جگہیں تلاش کرنے میں آپ کی مدد کریں جہاں آپ کے ڈویلپرز نے غلطیاں کی ہوں۔

میرے خیال میں ڈویلپرز پہلے اس مضمون میں دلچسپی لیں گے۔ آپ اپنے باس کو سنٹری کو ضم کرنے کے لیے راضی کرنے کے لیے وجوہات کی اس فہرست کو بھی استعمال کر سکتے ہیں۔

کاروباری فہرست میں آخری آئٹم کے ساتھ محتاط رہیں۔

کیا آپ پہلے ہی دلچسپی رکھتے ہیں؟

سنتری کیا ہے؟

Sentry ایک اوپن سورس بگ ٹریکنگ ایپلی کیشن ہے جو ڈویلپرز کو حقیقی وقت میں کریشوں کو ٹریک کرنے اور ٹھیک کرنے میں مدد کرتی ہے۔ یہ نہ بھولیں کہ ایپلی کیشن آپ کو کارکردگی بڑھانے اور صارف کے تجربے کو بہتر بنانے کی اجازت دیتی ہے۔ سنٹری جاوا اسکرپٹ، نوڈ، ازگر، پی ایچ پی، روبی، جاوا اور دیگر پروگرامنگ زبانوں کو سپورٹ کرتی ہے۔

2. لاگ ان کریں اور ایک پروجیکٹ بنائیں

• اپنا سینٹری اکاؤنٹ کھولیں۔ آپ کو لاگ ان کرنا پڑ سکتا ہے۔ (براہ کرم نوٹ کریں کہ سنٹری کو آپ کے سرورز پر انسٹال کیا جا سکتا ہے)
• اگلا مرحلہ ایک پروجیکٹ بنانا ہے۔
• فہرست سے اپنی زبان منتخب کریں۔ (ہم React کو منتخب کرنے جا رہے ہیں۔ "Create Project" پر کلک کریں)

اپنی درخواست کو حسب ضرورت بنائیں۔ سنٹری کو کنٹینر میں ضم کرنے کے طریقے کی ایک بنیادی مثال ذیل میں دیکھی جا سکتی ہے۔

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. اس کارروائی کے بعد ہمیں ایک غلطی کا پیغام موصول ہونا چاہئے: Uncaught 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));
      }
    });
};

آئیے طریقے چیک کریں:

• سیٹ لیول آپ کو سنٹری ڈیش بورڈ میں سطح کی غلطی داخل کرنے کی اجازت دیتا ہے۔ اس میں خصوصیات ہیں - 'مہلک'، 'غلطی'، 'انتباہ'، 'لاگ'، 'معلومات، 'ڈیبگ'، 'تنقیدی')۔
• سیٹ یوزر کسی بھی صارف کے ڈیٹا (آئی ڈی، ای میل ایڈریس، ادائیگی کا منصوبہ، وغیرہ) کو بچانے میں مدد کرتا ہے۔
• سیٹ ایکسٹرا آپ کو کسی بھی ڈیٹا کی وضاحت کرنے کی اجازت دیتا ہے جس کی آپ کو ضرورت ہے، مثال کے طور پر، اسٹور۔

اگر آپ کسی مسئلے کے بارے میں صارف کی رائے حاصل کرنا چاہتے ہیں، تو آپ کو showReportDialog فنکشن استعمال کرنا چاہیے۔

Sentry.showReportDialog();

: اختتام

آج ہم نے سنتری کو ری ایکٹ ایپلی کیشن میں ضم کرنے کا ایک طریقہ بیان کیا۔

→ ٹیلیگرام چیٹ بذریعہ سنتری

ماخذ: www.habr.com