מעקב אחר שגיאות באפליקציית React באמצעות Sentry

היום אספר לכם על מעקב אחר שגיאות בזמן אמת באפליקציית React. יישום חזיתי אינו משמש בדרך כלל למעקב אחר שגיאות. חברות מסוימות דוחות לעתים קרובות מעקב אחר באגים, חוזרות אליו לאחר תיעוד, בדיקות וכו'. עם זאת, אם אתה יכול לשנות את המוצר שלך לטובה, אז פשוט עשה זאת!

1. למה אתה צריך Sentry?

אני מניח שאתה מעוניין במעקב אחר באגים במהלך הייצור

אתה חושב שזה לא מספיק?

אוקיי, בואו נסתכל על הפרטים.

הסיבות העיקריות למפתחים להשתמש ב-Sentry:

• מאפשר לך להימנע מסיכונים בעת פריסת קוד עם שגיאות
• עזרה QA עם בדיקת קוד
• קבל הודעות מהירות על בעיות
• יכולת תיקון מהיר של שגיאות
• קבלת תצוגה נוחה של שגיאות בפאנל הניהול
• מיין שגיאות לפי פלח משתמש/דפדפן

הסיבות העיקריות לפרויקט מנכ"ל/ליד

• חסוך כסף (ניתן להתקין את Sentry בשרתים שלך)
• קבלת משוב מהמשתמשים
• הבנת מה לא בסדר בפרויקט שלך בזמן אמת
• הבנת מספר הבעיות שיש לאנשים עם האפליקציה שלך
• עזור לך למצוא מקומות שבהם המפתחים שלך עשו טעויות

אני חושב שהמפתחים יתעניינו קודם כל במאמר זה. אתה יכול גם להשתמש ברשימת הסיבות הזו כדי לשכנע את הבוס שלך לשלב את 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. מעקב אחר השגיאה הראשונה

לדוגמה, השתמשתי ביישום מוזיקה פשוט עם ה-API של Deezer. אתה יכול לראות את זה כאן. אנחנו צריכים ליצור שגיאה. דרך אחת היא לגשת למאפיין "לא מוגדר".

אנחנו צריכים ליצור כפתור שמתקשר console.log с user.email. לאחר פעולה זו אנו אמורים לקבל הודעת שגיאה: Uncaught TypeError (לא ניתן לקרוא מאפיין מ-Undefined email) עקב חסר אובייקט משתמש. אתה יכול גם להשתמש חריג Javascript.

<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. השתמש Sentry עם נקודת סיום API

בסדר. כיסינו את חריג ה-javascript בפסקאות הקודמות. עם זאת, מה נעשה לגבי שגיאות 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));
    }
  });

אני רוצה להשתמש בפונקציה גנרית עבור ה-Cats 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.

→ צ'אט בטלגרם מאת Sentry

מקור: www.habr.com