সেন্ট্রি সহ একটি প্রতিক্রিয়া অ্যাপে ট্র্যাকিং ত্রুটি৷

আজ আমি আপনাকে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে রিয়েল-টাইম এরর ট্র্যাকিং সম্পর্কে বলব। একটি ফ্রন্ট-এন্ড অ্যাপ্লিকেশন সাধারণত ত্রুটি ট্র্যাকিং জন্য ব্যবহার করা হয় না. কিছু কোম্পানি প্রায়ই বাগ ট্র্যাকিং বন্ধ করে দেয়, ডকুমেন্টেশন, পরীক্ষা ইত্যাদির পরে এটিতে ফিরে আসে। যাইহোক, আপনি যদি আপনার পণ্যটি আরও ভালভাবে পরিবর্তন করতে পারেন, তবে তা করুন!

1. কেন আপনি সেন্ট্রি প্রয়োজন?

আমি অনুমান করি আপনি উত্পাদনের সময় বাগগুলি ট্র্যাক করতে আগ্রহী

আপনি কি মনে করেন এই যথেষ্ট নয়?

ঠিক আছে, এর বিস্তারিত দেখুন.

ডেভেলপারদের সেন্ট্রি ব্যবহার করার প্রধান কারণ:

• ত্রুটি সহ কোড স্থাপন করার সময় আপনাকে ঝুঁকি এড়াতে অনুমতি দেয়
• কোড পরীক্ষার জন্য QA সাহায্য করুন
• সমস্যা সম্পর্কে দ্রুত বিজ্ঞপ্তি পান
• দ্রুত ত্রুটি সংশোধন করার ক্ষমতা
• অ্যাডমিন প্যানেলে ত্রুটিগুলির একটি সুবিধাজনক প্রদর্শন করা
• ব্যবহারকারী/ব্রাউজার সেগমেন্ট অনুসারে ত্রুটিগুলি সাজান

সিইও/লিড প্রকল্পের প্রধান কারণ

• অর্থ সংরক্ষণ করুন (সেন্ট্রি আপনার সার্ভারে ইনস্টল করা যেতে পারে)
• ব্যবহারকারীর প্রতিক্রিয়া পাচ্ছেন
• রিয়েল টাইমে আপনার প্রজেক্টে কী ভুল আছে তা বোঝা
• আপনার অ্যাপের সাথে লোকেদের সমস্যাগুলির সংখ্যা বোঝা
• আপনার বিকাশকারীরা ভুল করেছে এমন জায়গাগুলি খুঁজে পেতে আপনাকে সহায়তা করুন৷

আমি মনে করি বিকাশকারীরা প্রথমে এই নিবন্ধে আগ্রহী হবেন। আপনি সেন্ট্রিকে সংহত করার জন্য আপনার বসকে বোঝাতে কারণগুলির এই তালিকাটিও ব্যবহার করতে পারেন।

ব্যবসার তালিকার শেষ আইটেমটির সাথে সতর্ক থাকুন।

আপনি ইতিমধ্যে আগ্রহী?

সেন্ট্রি কি?

সেন্ট্রি হল একটি ওপেন সোর্স বাগ ট্র্যাকিং অ্যাপ্লিকেশন যা ডেভেলপারদের রিয়েল টাইমে ক্র্যাশগুলি ট্র্যাক করতে এবং ঠিক করতে সাহায্য করে৷ ভুলে যাবেন না যে অ্যাপ্লিকেশনটি আপনাকে দক্ষতা বাড়াতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে দেয়। সেন্ট্রি জাভাস্ক্রিপ্ট, নোড, পাইথন, পিএইচপি, রুবি, জাভা এবং অন্যান্য প্রোগ্রামিং ভাষা সমর্থন করে।

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 এর সাথে একটি সাধারণ সঙ্গীত অ্যাপ্লিকেশন ব্যবহার করেছি। আপনি এটি দেখতে পারেন এখানে. আমরা একটি ত্রুটি তৈরি করতে হবে. একটি উপায় হল "অনির্ধারিত" সম্পত্তি অ্যাক্সেস করা

আমাদের একটি বোতাম তৈরি করতে হবে যা কল করে কনসোল.লগ с 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. ব্যবহার প্রহরী শেষ বিন্দু সহ এপিআই

ঠিক আছে. আমরা পূর্ববর্তী অনুচ্ছেদে জাভাস্ক্রিপ্ট ব্যতিক্রম কভার করেছি। যাইহোক, আমরা XHR ত্রুটি সম্পর্কে কি করব?

সেন্ট্রিরও কাস্টম ত্রুটি হ্যান্ডলিং আছে। আমি এপিআই ত্রুটিগুলি ট্র্যাক করতে এটি ব্যবহার করেছি।

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

আসুন পদ্ধতিগুলি পরীক্ষা করা যাক:

• সেট লেভেল আপনাকে সেন্ট্রি ড্যাশবোর্ডে একটি স্তরের ত্রুটি সন্নিবেশ করার অনুমতি দেয়। এর বৈশিষ্ট্য রয়েছে - 'মারাত্মক', 'ত্রুটি', 'সতর্কতা', 'লগ', 'তথ্য, 'ডিবাগ', 'ক্রিটিকাল')।
• সেট ব্যবহারকারী যেকোনো ব্যবহারকারীর ডেটা (আইডি, ইমেল ঠিকানা, পেমেন্ট প্ল্যান ইত্যাদি) সংরক্ষণ করতে সাহায্য করে।
• সেট এক্সট্রা আপনাকে আপনার প্রয়োজনীয় কোনো ডেটা নির্দিষ্ট করতে দেয়, উদাহরণস্বরূপ, সঞ্চয়।

আপনি যদি একটি বাগ সম্পর্কে ব্যবহারকারীর প্রতিক্রিয়া পেতে চান তবে আপনার showReportDialog ফাংশনটি ব্যবহার করা উচিত।

Sentry.showReportDialog();

উপসংহার:

আজ আমরা সেন্ট্রিকে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে সংহত করার একটি উপায় বর্ণনা করেছি।

→ টেলিগ্রাম চ্যাট দ্বারা প্রহরী

উত্স: www.habr.com