🥇ส่งการตรวจสอบข้อบกพร่องจากระยะไกลในแอปพลิเคชันส่วนหน้าของ React

เรากำลังสำรวจการใช้ Sentry กับ React

บทความนี้เป็นส่วนหนึ่งของชุดบทความที่เริ่มต้นด้วยการรายงานข้อผิดพลาด Sentry โดยใช้ตัวอย่าง: Часть 1.

การนำ React ไปใช้

ก่อนอื่นเราต้องเพิ่มโครงการ Sentry ใหม่สำหรับแอปพลิเคชันนี้ จากเว็บไซต์เซนทรี่ ในกรณีนี้เราเลือก React

เราจะนำปุ่มสองปุ่มของเราไปใช้งานอีกครั้ง สวัสดี และ ข้อผิดพลาด ในแอปพลิเคชันที่มี 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 (ฟรี) ขั้นตอนการใช้งานมักจะเป็นดังนี้:

คัดลอกเนื้อหาของโฟลเดอร์ สร้าง ไปยังโฟลเดอร์ เอกสาร ในไดเร็กทอรีรากของที่เก็บ
เปิด หน้า GitHub ในพื้นที่เก็บข้อมูล (จาก GitHub) เพื่อใช้โฟลเดอร์ docs เจ้านาย สาขา
พุชการเปลี่ยนแปลงไปที่ GitHub

หมายเหตุ: หลังจากที่ผมรู้ว่าผมต้องใช้อะไร สร้างสร้างแอป ฟังก์ชั่นโฮมเพจเพื่อเปิดแอปพลิเคชัน ลงมาเพื่อเพิ่มสิ่งต่อไปนี้ใน package.json:

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

เวอร์ชันสุดท้ายของแอปพลิเคชันที่รันอยู่มีอยู่ที่:

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

ภาพประกอบของแมลงที่จับได้

มาดูขั้นตอนการคลิกปุ่มสวัสดีกัน

โดยมีข้อผิดพลาดปรากฏดังนี้:

ข้อสังเกต:

รายงานข้อผิดพลาดนี้ไม่สามารถชัดเจนกว่านี้ได้ BRAVO.

ภาพประกอบของข้อผิดพลาดที่ไม่ทราบสาเหตุ

ในทำนองเดียวกันเรามาดูการคลิกปุ่มกัน ความผิดพลาด.

โดยมีข้อผิดพลาดปรากฏดังนี้:

การจัดการข้อผิดพลาดที่ไม่ได้นับรวมได้ดีขึ้น (การเรนเดอร์)

การแนะนำขีดจำกัดข้อผิดพลาด

ข้อผิดพลาด JavaScript ในส่วนของอินเทอร์เฟซผู้ใช้ไม่ควรทำให้แอปพลิเคชันทั้งหมดเสียหาย เพื่อแก้ไขปัญหานี้สำหรับผู้ใช้ React React 16 ขอแนะนำแนวคิดใหม่ที่เรียกว่า "ขอบเขตข้อผิดพลาด"

ขอบเขตข้อผิดพลาดคือคอมโพเนนต์ React ที่จับข้อผิดพลาด JavaScript ที่ใดก็ได้ในแผนผังคอมโพเนนต์ลูก บันทึกข้อผิดพลาดเหล่านั้น และเรนเดอร์ UI ทางเลือกแทนแผนผังคอมโพเนนต์ที่ขัดข้อง ขอบเขตข้อผิดพลาดจะตรวจจับข้อผิดพลาดระหว่างการเรนเดอร์ ในวิธีวงจรชีวิต และในตัวสร้างของแผนผังทั้งหมดที่อยู่ด้านล่าง

...

ลักษณะการทำงานใหม่สำหรับข้อผิดพลาดที่ตรวจไม่พบ

การเปลี่ยนแปลงนี้มีความสำคัญ ใน React 16 ข้อผิดพลาดที่ไม่ได้ถูกตรวจพบโดยขอบเขตข้อผิดพลาดใดๆ จะส่งผลให้แผนผังส่วนประกอบ React ทั้งหมดถูกยกเลิกการต่อเชื่อม

- แดน อับรามอฟ - การจัดการข้อผิดพลาดใน React 16

คำชี้แจงสำคัญที่ต้องใช้เวลาสักพักก่อนที่ฉันจะรู้ว่านี่คือสิ่งนั้น ลักษณะการทำงานข้างต้นใช้งานได้เฉพาะกับข้อผิดพลาดที่เกิดขึ้นในวิธีการเรนเดอร์ (หรือมีแนวโน้มมากกว่าในวิธีการวงจรชีวิตใด ๆ ). ตัวอย่างเช่น การใช้ขอบเขตข้อผิดพลาดจะไม่ส่งผลดีใดๆ กับปุ่มของเรา ความผิดพลาด; ข้อผิดพลาดนี้อยู่ในตัวจัดการการคลิก

มาสร้างตัวอย่างข้อผิดพลาดในการแสดงผล จากนั้นใช้ขอบเขตข้อผิดพลาดเพื่อจัดการกับข้อผิดพลาดได้อย่างสวยงามยิ่งขึ้น

react-app/src/MyRenderError.php

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.ปลอมซึ่งทำให้เกิดข้อผิดพลาด
หากไม่มีขอบเขตข้อผิดพลาด แผนผังส่วนประกอบทั้งหมดจะถูกยกเลิกการต่อเชื่อม

จากนั้นเราจะเขียนโค้ดขอบเขตข้อผิดพลาดของเรา (ใช้วิธีการวงจรชีวิตใหม่ ส่วนประกอบDidCatch); นี่เป็นตัวอย่างที่ให้ไว้ในบทความของ Dan Abramov:

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

อย่างไรก็ตาม การคลิกปุ่มข้อผิดพลาดในการเรนเดอร์จะแสดง UI สำรองและรายงานข้อผิดพลาดไปยัง Sentry

เสร็จ

ฉันหวังว่าคุณจะพบว่าสิ่งนี้มีประโยชน์

PS เชื่อมโยงไปยังต้นฉบับ

PS Telegram แชทผ่าน Sentry https://t.me/sentry_ru

ที่มา: will.com

Sentry การตรวจสอบข้อบกพร่องจากระยะไกลในแอปพลิเคชันส่วนหน้าของ React

เพิ่มความคิดเห็น ยกเลิกการตอบ