🥇مراقبة الأخطاء عن بعد في تطبيقات React الأمامية

نحن نستكشف استخدام Sentry مع React.

هذه المقالة جزء من سلسلة تبدأ بالإبلاغ عن أخطاء الحراسة باستخدام مثال: Часть 1.

تنفيذ رد الفعل

نحتاج أولاً إلى إضافة مشروع Sentry جديد لهذا التطبيق؛ من موقع سنتري . في هذه الحالة نختار React.

سنعيد تنفيذ الزرين، Hello وError، في تطبيق باستخدام React. نبدأ بإنشاء تطبيقنا المبدئي:

npx create-react-app react-app

ثم نقوم باستيراد حزمة Sentry:

yarn add @sentry/browser

وتهيئته:

رد الفعل-app/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

ملاحظات:

أثناء التطوير، لدينا آليات أخرى لمراقبة المشكلات، مثل وحدة التحكم، لذلك نقوم بتمكين Sentry فقط لإصدارات الإنتاج

بعد ذلك نقوم بتنفيذ أزرار الترحيب والخطأ وإضافتها إلى التطبيق:

رد الفعل-app/src/Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

رد فعل-app/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

رد الفعل-app/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

المشكلة (خرائط المصدر)

يمكننا اختبار Sentry من خلال بنية الإنتاج عن طريق إدخال:

yarn build

ومن مجلد البناء أدخل:

npx http-server -c-1

المشكلة التي نواجهها على الفور هي أن سجلات أخطاء Sentry تشير إلى أرقام الأسطر في الدفعة المصغرة؛ ليست مفيدة جدا.

تشرح خدمة Sentry ذلك عن طريق سحب خرائط المصدر للحزمة المخفضة بعد تلقي خطأ. في هذه الحالة نحن نعمل من المضيف المحلي (لا يمكن الوصول إليه عن طريق خدمة الحراسة).

الحلول (خرائط المصدر)

الحل لهذه المشكلة هو تشغيل التطبيق من خادم ويب عام. زر رد واحد بسيط لاستخدام خدمة صفحات GitHub (مجانًا). عادة ما تكون خطوات الاستخدام كما يلي:

انسخ محتويات المجلد نساعدك في بناء إلى مجلد مستندات في الدليل الجذر للمستودع.
شغله جيثب الصفحات في المستودع (من GitHub) لاستخدام مجلد المستندات فيه رئيسي الفروع
ادفع التغييرات إلى GitHub

لاحظ: بعد أن اكتشفت ما أحتاج إلى استخدامه إنشاء-إنشاء-التطبيق وظيفة الصفحة الرئيسية لبدء التطبيق. جاء لإضافة ما يلي إلى package.json:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

الإصدار النهائي من التطبيق قيد التشغيل متاح على:

https://larkintuckerllc.github.io/hello-sentry/

رسم توضيحي للحشرات التي تم اكتشافها

دعونا نسير من خلال النقر على زر مرحبا.

مع ظهور خطأ مثل هذا:

ملاحظات:

تقرير الخطأ هذا لا يمكن أن يكون أكثر وضوحًا، BRAVO.

رسم توضيحي للأخطاء غير المحسوبة

وبالمثل، دعونا نذهب من خلال النقر على الزر خطأ.

مع ظهور خطأ مثل هذا:

معالجة أفضل للأخطاء غير المحسوبة (العرض)

مقدمة لحدود الخطأ

لا ينبغي أن يؤدي خطأ JavaScript في جزء من واجهة المستخدم إلى تعطيل التطبيق بأكمله. لحل هذه المشكلة لمستخدمي React، يقدم React 16 مفهومًا جديدًا يسمى "حدود الخطأ".

حدود الأخطاء هي مكونات React التي تكتشف أخطاء JavaScript في أي مكان في شجرة المكونات الفرعية الخاصة بها، وتسجل تلك الأخطاء، وتقدم واجهة مستخدم احتياطية بدلاً من شجرة المكونات التي تعطلت. تلتقط حدود الأخطاء الأخطاء أثناء العرض، وفي أساليب دورة الحياة، وفي مُنشئات الشجرة بأكملها الموجودة أسفلها.

...

سلوك جديد للأخطاء غير المكتشفة

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

- دان أبراموف - معالجة الأخطاء في React 16

التوضيح المهم الذي استغرق مني بعض الوقت قبل أن أدرك ذلك هو ذلك يعمل السلوك أعلاه فقط مع الأخطاء التي تظهر في طريقة العرض (أو على الأرجح في أي من طرق دورة الحياة). على سبيل المثال، استخدام حدود الخطأ لن يفيد الزر الخاص بنا خطأ; كان هذا الخطأ في معالج النقر.

لنقم بإنشاء مثال لخطأ في العرض ثم نستخدم حدود الأخطاء للتعامل مع الخطأ بشكل أكثر رشاقة.

React-app/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

ملاحظة:

عندما تضغط على الزر، رد فعل سيعرض flag.busted.bogus، مما يؤدي إلى حدوث خطأ
بدون حدود الخطأ، سيتم إلغاء تحميل شجرة المكونات بأكملها

ثم نكتب رمز حدود الخطأ الخاص بنا (يستخدم طريقة دورة الحياة الجديدة ComponentDidCatch); هذا هو في الأساس المثال الوارد في مقالة دان أبراموف:

رد فعل-app/src/ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

وأخيرا نستخدم هذا المكون:

رد الفعل-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

ومع ذلك، يؤدي النقر فوق الزر "عرض خطأ" إلى عرض واجهة المستخدم الاحتياطية والإبلاغ عن خطأ إلى Sentry.

إتمام

اتمنى ان تكون وجدت ذلك مفيدا.

PS الارتباط بالأصل

دردشة PS Telegram عبر Sentry https://t.me/sentry_ru

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

مراقبة الأخطاء عن بعد في تطبيقات React الأمامية

إضافة تعليق إلغاء الرد