🥇 مانیتورینگ از راه دور Sentry اشکالات در برنامه های React frontend

ما در حال بررسی با استفاده از Sentry با React هستیم.

این مقاله بخشی از مجموعه‌ای است که با گزارش خطاهای Sentry با استفاده از یک مثال شروع می‌شود: Часть 1.

پیاده سازی React

ابتدا باید یک پروژه Sentry جدید برای این برنامه اضافه کنیم. از وب سایت Sentry در این حالت React را انتخاب می کنیم.

ما دو دکمه Hello و Error را در یک برنامه با React دوباره پیاده سازی می کنیم. ما با ایجاد برنامه شروع خود شروع می کنیم:

npx create-react-app react-app

سپس بسته Sentry را وارد می کنیم:

yarn add @sentry/browser

و آن را مقداردهی اولیه کنید:

react-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 را برای ساخت‌های تولیدی فعال می‌کنیم.

سپس دکمه های Hello و Error خود را پیاده سازی می کنیم و آنها را به برنامه اضافه می کنیم:

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

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

react-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

و از پوشه build وارد کنید:

npx http-server -c-1

مشکلی که بلافاصله با آن مواجه می شویم این است که رکوردهای خطای Sentry به شماره خطوط در دسته کوچک شده اشاره دارد. خیلی مفید نیست

سرویس Sentry این را با کشیدن نقشه های منبع برای بسته کاهش یافته پس از دریافت خطا توضیح می دهد. در این مورد ما از لوکال هاست (که توسط سرویس Sentry قابل دسترسی نیست) اجرا می‌شویم.

راه حل ها (نقشه های منبع)

راه حل این مشکل اجرای برنامه از یک وب سرور عمومی است. یک دکمه پاسخ ساده برای استفاده از سرویس GitHub Pages (رایگان). مراحل استفاده معمولاً به شرح زیر است:

محتویات پوشه را کپی کنید ساختن به پوشه اسناد در دایرکتوری ریشه مخزن.
روشن کن صفحات GitHub در مخزن (از GitHub) برای استفاده از پوشه docs در استاد شاخه ها
تغییرات را به GitHub فشار دهید

یادداشت: بعد از اینکه فهمیدم از چه چیزی باید استفاده کنم ایجاد-ایجاد-برنامه عملکرد صفحه اصلی برای راه اندازی برنامه. به اضافه کردن موارد زیر به package.json رسید:

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

نسخه نهایی برنامه در حال اجرا در آدرس زیر موجود است:

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

تصویر اشکالات گرفتار شده

بیایید با کلیک کردن روی دکمه Hello قدم برداریم.

با خطایی که به شکل زیر ظاهر می شود:

مشاهدات:

این گزارش اشکال نمی تواند واضح تر باشد، براوو.

تصویری از خطاهای حساب نشده

به همین ترتیب، بیایید از طریق کلیک دکمه عبور کنیم خطا.

با خطایی که به شکل زیر ظاهر می شود:

مدیریت بهتر خطاهای حساب نشده (رندر)

معرفی محدودیت های خطا

یک خطای جاوا اسکریپت در بخشی از رابط کاربری نباید کل برنامه را خراب کند. برای حل این مشکل برای کاربران React، React 16 مفهوم جدیدی به نام "Error Bounds" را معرفی می کند.

مرزهای خطا، مؤلفه‌های React هستند که خطاهای جاوا اسکریپت را در هر جایی از درخت مؤلفه فرزند خود می‌گیرند، آن خطاها را ثبت می‌کنند و به جای درخت مؤلفه‌ای که خراب شده، یک رابط کاربری بازگشتی ارائه می‌کنند. مرزهای خطا خطاها را در حین رندر کردن، در روش‌های چرخه حیات، و در سازنده‌های کل درخت زیر آنها می‌گیرند.

...

رفتار جدید برای خطاهای کشف نشده

این تغییر قابل توجه است. از 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,
    });
  }
}

مشاهده:

وقتی دکمه را فشار می دهید، واکنش نشان می دهند نمایش داده خواهد شد پرچم.تکه.جعلی، که یک خطا ایجاد می کند
بدون مرز خطا، کل درخت مؤلفه خارج می شود

سپس کد مرز خطای خود را می نویسیم (از روش چرخه حیات جدید استفاده می کند componentDidCatch) این اساساً مثالی است که در مقاله دن آبراموف آورده شده است:

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

در نهایت از این کامپوننت استفاده می کنیم:

react-app/src/App.js

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

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

با این حال، با کلیک بر روی دکمه Render Error، رابط کاربری بازگشتی نمایش داده می شود و یک خطا به Sentry گزارش می شود.

اتمام

امیداورم مفید بوده باشد.

PS لینک به اصل

PS چت تلگرام از طریق Sentry https://t.me/sentry_ru

منبع: www.habr.com

نظارت از راه دور Sentry از اشکالات در برنامه های React frontend

اضافه کردن نظر انصراف از پاسخ