ניטור זקיף מרחוק של באגים ביישומי React Frontend

אנחנו בוחנים את השימוש ב- Sentry עם React.

מאמר זה הוא חלק מסדרה שמתחילה בדיווח על שגיאות Sentry באמצעות דוגמה: חלק מ- 1.

יישום של React

ראשית עלינו להוסיף פרויקט Sentry חדש עבור יישום זה; מאתר Sentry. במקרה זה אנו בוחרים ב-React.

ניישם מחדש את שני הכפתורים שלנו, Hello and 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 לבניית ייצור

לאחר מכן אנו מיישמים את כפתורי השלום והשגיאה שלנו ומוסיפים אותם לאפליקציה:

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

פתרונות (מפות מקור)

הפתרון לבעיה זו הוא להפעיל את האפליקציה משרת אינטרנט ציבורי. כפתור תשובה פשוט אחד לשימוש בשירות GitHub Pages (חינם). השלבים לשימוש הם בדרך כלל כדלקמן:

1. העתק את תוכן התיקיה לִבנוֹת לתיקייה Docs בספריית השורש של המאגר.

2. תדליק דפי GitHub במאגר (מ-GitHub) כדי להשתמש בתיקיית המסמכים בה אב ענפים

3. דחף שינויים ל- 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.gous, מה שיוצר שגיאה

• ללא גבול שגיאה, כל עץ הרכיבים יוסר

לאחר מכן אנו כותבים את קוד גבול השגיאה שלנו (משתמש בשיטת מחזור החיים החדשה 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 Telegram צ'אט דרך Sentry https://t.me/sentry_ru

מקור: www.habr.com