ردیابی خطاها در برنامه React با Sentry

امروز می‌خواهم شما را از طریق ردیابی بلادرنگ خطا در یک برنامه React راهنمایی کنم. برنامه frontend معمولاً برای ردیابی اشکال استفاده نمی شود. برخی از شرکت ها اغلب ردیابی اشکال را کنار می گذارند و پس از مستندسازی، آزمایش ها و غیره به آن بازمی گردند. با این حال، اگر می توانید محصول خود را برای بهتر شدن تغییر دهید، آن را انجام دهید!

1. چرا به Sentry نیاز دارید؟

من فرض می کنم شما علاقه مند به ردیابی اشکال در طول تولید هستید.

به نظر شما این کافی نیست؟

خوب، بیایید به جزئیات نگاه کنیم.

دلایل اصلی استفاده از Sentry برای توسعه دهندگان:

• به شما امکان می دهد هنگام استقرار کد با خطا از شر خطرات خلاص شوید
• کمک به QA در تست کد
• اعلان‌های سریع مشکل را دریافت کنید
• قابلیت رفع سریع خطاها
• دریافت یک نمایش راحت از خطاها در پنل مدیریت
• مرتب سازی خطاها بر اساس بخش کاربر/مرورگر

دلایل اصلی مدیر عامل / پروژه رهبری

• صرفه جویی در هزینه (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 در Projects -> Settings -> Client Keys قرار دارد. می توانید کلیدهای مشتری را در نوار جستجو پیدا کنید.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. پیگیری اولین خطا

به عنوان مثال، من از یک برنامه موسیقی ساده با API Deezer استفاده کردم. می توانید آن را ببینید اینجا. باید یک باگ ایجاد کنیم. یکی از راه‌ها دسترسی به ویژگی «تعریف نشده» است

ما باید دکمه ای ایجاد کنیم که تماس بگیرد گزارش کنسول с user.email. پس از این عمل، باید یک پیغام خطا دریافت کنیم: 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);

پس از ادغام این دکمه، باید آن را در مرورگر تست کنید.

ما اولین اشتباه خود را داریم

اوو هو!

اگر روی خطای هدر کلیک کنید، stack trace را خواهید دید.

پیام ها بد به نظر می رسند. البته پیغام های خطا را بدون اینکه بفهمیم این کد کجاست دیده ایم. به طور پیش فرض در مورد نقشه منبع در 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));
    }
  });

من می خواهم از یک تابع عمومی برای catch 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));
      }
    });
};

بیایید روش ها را بررسی کنیم:

• setLevel به شما امکان می دهد یک خطای سطح را در داشبورد نگهبانی وارد کنید. دارای ویژگی‌هایی است - «مرگبار»، «خطا»، «هشدار»، «ورود»، «اطلاعات، «اشکال‌زدایی»، «بحرانی»).
• setUser به ذخیره هر گونه اطلاعات کاربر (شناسه، آدرس ایمیل، طرح پرداخت و غیره) کمک می کند.
• setExtra به شما امکان می دهد هر داده ای را که نیاز دارید تنظیم کنید، به عنوان مثال، یک فروشگاه.

اگر می خواهید بازخورد کاربر در مورد یک اشکال داشته باشد، باید از تابع showReportDialog استفاده کنید.

Sentry.showReportDialog();

نتیجه گیری:

امروز یکی از راه های ادغام Sentry در برنامه React را شرح دادیم.

← چت تلگرام توسط نگهبانی

منبع: www.habr.com