การติดตามข้อผิดพลาดในแอปพลิเคชัน React โดยใช้ Sentry

วันนี้ฉันจะบอกคุณเกี่ยวกับการติดตามข้อผิดพลาดแบบเรียลไทม์ในแอปพลิเคชัน React โดยทั่วไปแล้วแอปพลิเคชันส่วนหน้าจะไม่ใช้สำหรับการติดตามข้อผิดพลาด บริษัทบางแห่งมักจะยกเลิกการติดตามบั๊ก และกลับมาใช้อีกครั้งหลังจากจัดทำเอกสาร การทดสอบ ฯลฯ อย่างไรก็ตาม หากคุณสามารถเปลี่ยนผลิตภัณฑ์ของคุณให้ดีขึ้นได้ ก็ทำเลย!

1. ทำไมคุณถึงต้องการ Sentry?

ฉันถือว่าคุณสนใจที่จะติดตามข้อบกพร่องระหว่างการผลิต

คุณคิดว่านี่ไม่เพียงพอหรือไม่?

เอาล่ะ มาดูรายละเอียดกันดีกว่า

เหตุผลหลักที่นักพัฒนาซอฟต์แวร์ใช้ Sentry:

• ช่วยให้คุณหลีกเลี่ยงความเสี่ยงเมื่อปรับใช้โค้ดที่มีข้อผิดพลาด
• ช่วย QA ในการทดสอบโค้ด
• รับการแจ้งเตือนอย่างรวดเร็วเกี่ยวกับปัญหา
• ความสามารถในการแก้ไขข้อผิดพลาดอย่างรวดเร็ว
• รับการแสดงข้อผิดพลาดที่สะดวกในแผงผู้ดูแลระบบ
• จัดเรียงข้อผิดพลาดตามส่วนผู้ใช้/เบราว์เซอร์

เหตุผลหลักสำหรับโครงการ CEO/Lead

• ประหยัดเงิน (สามารถติดตั้ง 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. การรวมปฏิกิริยาและยาม

คุณต้องติดตั้งแพ็คเกจ 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. การติดตามข้อผิดพลาดแรก

ตัวอย่างเช่น ฉันใช้แอปพลิเคชันเพลงง่ายๆ กับ Deezer API คุณสามารถเห็นมัน ที่นี่. เราจำเป็นต้องสร้างข้อผิดพลาด วิธีหนึ่งคือการเข้าถึงคุณสมบัติ "ไม่ได้กำหนด"

เราจำเป็นต้องสร้างปุ่มที่เรียก คอนโซล.ล็อก с ผู้ใช้.อีเมล์. หลังจากการกระทำนี้ เราควรได้รับข้อความแสดงข้อผิดพลาด: Uncaught TypeError (ไม่สามารถอ่านคุณสมบัติจากไม่ได้กำหนด 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);

หลังจากรวมปุ่มนี้แล้ว คุณควรทดสอบในเบราว์เซอร์

เรามีข้อผิดพลาดครั้งแรกของเรา

วู้ฮู!

หากคุณคลิกที่ข้อผิดพลาดส่วนหัว คุณจะเห็นการติดตามสแต็ก

ข้อความดูไม่ดี แน่นอนว่าเราได้เห็นข้อความแสดงข้อผิดพลาดโดยไม่เข้าใจว่าโค้ดอยู่ที่ไหน ตามค่าเริ่มต้น เรากำลังพูดถึงซอร์สแมปใน 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));
      }
    });
};

ตรวจสอบวิธีการ:

• ตั้งค่าระดับ ช่วยให้คุณสามารถแทรกข้อผิดพลาดระดับลงในแดชบอร์ดยามได้ มันมีคุณสมบัติ - 'ร้ายแรง', 'ข้อผิดพลาด', 'คำเตือน', 'บันทึก', 'ข้อมูล, 'แก้ไขข้อบกพร่อง', 'สำคัญ')
• setUser ช่วยในการบันทึกข้อมูลผู้ใช้ (รหัส ที่อยู่อีเมล แผนการชำระเงิน ฯลฯ)
• ชุดพิเศษ ช่วยให้คุณสามารถระบุข้อมูลใด ๆ ที่คุณต้องการ เช่น การจัดเก็บ

หากคุณต้องการรับคำติชมจากผู้ใช้เกี่ยวกับจุดบกพร่อง คุณควรใช้ฟังก์ชัน showReportDialog

Sentry.showReportDialog();

สรุป:

วันนี้เราได้อธิบายวิธีหนึ่งในการรวม Sentry เข้ากับแอปพลิเคชัน React

→ โทรเลขแชทโดย ทหารยาม

ที่มา: will.com