تتبع الأخطاء في تطبيق React باستخدام Sentry

سأقوم اليوم بتوجيهك عبر تتبع الأخطاء في الوقت الفعلي في تطبيق React. لا يتم استخدام تطبيق الواجهة الأمامية عادةً لتتبع الأخطاء. غالبًا ما تضع بعض الشركات جانبًا تتبع الأخطاء وتعود إليه بعد التوثيق والاختبارات وما إلى ذلك. ومع ذلك ، إذا كان بإمكانك تغيير منتجك للأفضل ، فافعل ذلك!

1. لماذا تحتاج الحارس؟

أفترض أنك مهتم بتتبع الأخطاء أثناء الإنتاج.

هل تعتقد أن هذا لا يكفي؟

حسنًا ، لنلقِ نظرة على التفاصيل.

أهم أسباب استخدام برنامج الحراسة للمطورين:

• يتيح لك التخلص من المخاطر عند نشر تعليمات برمجية بها أخطاء
• مساعدة سؤال وجواب في اختبار التعليمات البرمجية
• احصل على إخطارات سريعة بالمشكلة
• القدرة على إصلاح الأخطاء بسرعة
• الحصول على عرض مناسب للأخطاء في لوحة الإدارة
• فرز الأخطاء حسب المستخدم / قطاع المتصفح

الأسباب الرئيسية للمدير التنفيذي / المشروع الرئيسي

• توفير المال (يمكن تثبيت Sentry على خوادمك)
• احصل على ملاحظات المستخدم
• فهم ما هو الخطأ في مشروعك في الوقت الفعلي
• فهم عدد المشكلات التي يواجهها الأشخاص مع تطبيقك
• ساعد في العثور على الأماكن التي أخطأ فيها مطوروك

أعتقد أن المطورين سيكونون مهتمين بهذا المقال في المقام الأول. يمكنك أيضًا استخدام قائمة الأسباب هذه لإقناع رئيسك في العمل بدمج تطبيق Sentry.

كن حذرًا مع العنصر الأخير في قائمة الأعمال.

هل أنت مهتم بالفعل؟

ما هو الحارس؟

Sentry هو تطبيق مفتوح المصدر لتتبع الأخطاء يساعد المطورين على تتبع الأعطال وإصلاحها في الوقت الفعلي. لا تنس أن التطبيق يسمح لك أيضًا بزيادة الكفاءة وتحسين تجربة المستخدم. يدعم Sentry JavaScript و Node و Python و PHP و Ruby و Java ولغات البرمجة الأخرى.

2. تسجيل الدخول وإنشاء مشروع

• افتح حساب Sentry الخاص بك. قد تحتاج إلى تسجيل الدخول. (يرجى ملاحظة أنه يمكن تثبيت Sentry على الخوادم الخاصة بك)
• الخطوة التالية هي إنشاء مشروع
• حدد لغتك من القائمة. (سنختار React. انقر فوق "إنشاء مشروع")

قم بإعداد التطبيق الخاص بك. يمكنك الاطلاع على مثال أساسي لكيفية دمج تطبيق 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 معالج مفيد لمساعدتك في فهم ما يجب عليك فعله بعد ذلك. يمكنك اتباع الخطوات أدناه. أريد أن أوضح لك كيفية إنشاء معالج الأخطاء الأول. رائع ، لقد أنشأنا مشروعًا! دعنا ننتقل إلى الخطوة التالية

3. دمج React و Sentry

يجب عليك تثبيت حزمة npm في مشروعك.

npm i @sentry/browser

تهيئة Sentry في الحاوية الخاصة بك:

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. بإمكانك رؤيته هنا. نحن بحاجة لخلق خطأ. إحدى الطرق هي الوصول إلى الخاصية "غير المحددة"

نحن بحاجة إلى إنشاء زر يدعو وحدة التحكم с البريد الالكتروني للمستخدم. بعد هذا الإجراء ، يجب أن نتلقى رسالة خطأ: Uncaught TypeError (لا يمكن قراءة الخاصية من undefined 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؟

لدى 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));
    }
  });

أرغب في استخدام وظيفة عامة لواجهة برمجة تطبيقات الصيد.

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 يساعد على حفظ أي بيانات مستخدم (المعرف وعنوان البريد الإلكتروني وخطة الدفع وما إلى ذلك).
• setExtra يسمح لك بتعيين أي بيانات تحتاجها ، على سبيل المثال ، متجر.

إذا كنت تريد تعليقات المستخدم على خطأ ما ، فيجب عليك استخدام وظيفة showReportDialog.

Sentry.showReportDialog();

الخلاصة:

وصفنا اليوم إحدى طرق دمج Sentry في تطبيق React.

→ Telegram الدردشة خفير

المصدر: www.habr.com