🥇Sentry giám sát từ xa các lỗi trong ứng dụng giao diện người dùng React

Chúng tôi đang khám phá việc sử dụng Sentry với React.

Bài viết này là một phần của loạt bài bắt đầu bằng việc báo cáo lỗi Sentry bằng một ví dụ: Часть 1.

Thực hiện phản ứng

Đầu tiên chúng ta cần thêm dự án Sentry mới cho ứng dụng này; từ trang web Sentry. Trong trường hợp này chúng tôi chọn React.

Chúng tôi sẽ triển khai lại hai nút Hello và Error trong một ứng dụng có React. Chúng tôi bắt đầu bằng cách tạo ứng dụng khởi đầu của mình:

npx create-react-app react-app

Sau đó, chúng tôi nhập gói Sentry:

yarn add @sentry/browser

và khởi tạo nó:

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

Quan sát:

Trong quá trình phát triển, chúng tôi có các cơ chế khác để giám sát các vấn đề, chẳng hạn như bảng điều khiển, vì vậy chúng tôi chỉ kích hoạt Sentry cho các bản dựng sản xuất

Tiếp theo, chúng tôi triển khai các nút Xin chào và Lỗi và thêm chúng vào ứng dụng:

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

Reac-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');
  }
}

Reac-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;

Sự cố (Bản đồ nguồn)

Chúng tôi có thể kiểm tra Sentry với bản dựng sản xuất bằng cách nhập:

yarn build

và từ thư mục bản dựng, nhập:

npx http-server -c-1

Vấn đề mà chúng tôi gặp phải ngay lập tức là các bản ghi lỗi của Sentry đề cập đến số dòng trong lô được rút gọn; không hữu ích lắm.

Dịch vụ Sentry giải thích điều này bằng cách lấy bản đồ nguồn cho gói bị giảm sau khi nhận được lỗi. Trong trường hợp này, chúng tôi đang chạy từ localhost (dịch vụ Sentry không thể truy cập được).

Giải pháp (Bản đồ nguồn)

Giải pháp cho vấn đề này là chạy ứng dụng từ máy chủ web công cộng. Một nút trả lời đơn giản để sử dụng dịch vụ Trang GitHub (miễn phí). Các bước sử dụng thường như sau:

Sao chép nội dung của thư mục xây dựng vào thư mục tài liệu trong thư mục gốc của kho lưu trữ.
Bật Trang GitHub trong kho lưu trữ (từ GitHub) để sử dụng thư mục tài liệu trong chủ chi nhánh
Đẩy các thay đổi lên GitHub

Ghi: sau khi tôi tìm ra thứ tôi cần sử dụng tạo-tạo-ứng dụng chức năng trang chủ để khởi chạy ứng dụng. Đã quyết định thêm phần sau vào pack.json:

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

Phiên bản cuối cùng của ứng dụng đang chạy có sẵn tại:

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

Minh họa về lỗi bị bắt

Hãy thực hiện bằng cách nhấp vào nút Xin chào.

Với một lỗi xuất hiện như thế này:

Quan sát:

Báo cáo lỗi này không thể rõ ràng hơn, BRAVO.

Minh họa về lỗi không được tính toán

Tương tự như vậy, chúng ta hãy đi qua nút bấm lỗi.

Với một lỗi xuất hiện như thế này:

Xử lý tốt hơn các lỗi không được tính toán (kết xuất)

Giới thiệu giới hạn lỗi

Lỗi JavaScript ở một phần giao diện người dùng sẽ không làm hỏng toàn bộ ứng dụng. Để giải quyết vấn đề này cho người dùng React, React 16 giới thiệu một khái niệm mới gọi là "giới hạn lỗi".

Ranh giới lỗi là các thành phần React phát hiện lỗi JavaScript ở bất kỳ đâu trong cây thành phần con, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng thay vì cây thành phần bị lỗi. Các ranh giới lỗi phát hiện lỗi trong quá trình hiển thị, trong các phương thức vòng đời và trong các hàm tạo của toàn bộ cây bên dưới chúng.

...

Hành vi mới cho các lỗi không được phát hiện

Sự thay đổi này rất đáng kể. Kể từ React 16, các lỗi không được phát hiện bởi bất kỳ ranh giới lỗi nào sẽ dẫn đến việc toàn bộ cây thành phần React không được đếm.

- Dan Abramov - Xử lý lỗi trong React 16

Một sự làm rõ quan trọng mà tôi phải mất một thời gian mới nhận ra điều này là hành vi trên chỉ hoạt động với các lỗi xảy ra trong phương thức kết xuất (hoặc nhiều khả năng là trong bất kỳ phương thức vòng đời nào). Ví dụ: sử dụng ranh giới lỗi sẽ không có tác dụng gì với nút của chúng tôi lỗi; lỗi này nằm ở trình xử lý nhấp chuột.

Hãy tạo một ví dụ về lỗi hiển thị và sau đó sử dụng giới hạn lỗi để xử lý lỗi một cách khéo léo hơn.

Reac-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,
    });
  }
}

Quan sát:

Khi bạn nhấn nút, Phản ứng sẽ được hiển thị flag.busted.bogus, tạo ra lỗi
Không có ranh giới lỗi, toàn bộ cây thành phần sẽ bị ngắt kết nối

Sau đó, chúng tôi viết mã ranh giới lỗi (sử dụng phương pháp vòng đời mới thành phầnDidCatch); đây thực chất là ví dụ được đưa ra trong bài viết của Dan Abramov:

Reac-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;
  }
}

Cuối cùng chúng ta sử dụng thành phần này:

Reac-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

Tuy nhiên, việc nhấp vào nút Lỗi kết xuất sẽ hiển thị giao diện người dùng dự phòng và báo lỗi cho Sentry.

Hoàn thành

Tôi hy vọng bạn tìm thấy điều này hữu ích.

PS Liên kết đến bản gốc

Trò chuyện PS Telegram qua Sentry https://t.me/sentry_ru

Nguồn: www.habr.com

Sentry giám sát lỗi từ xa trong các ứng dụng giao diện React

Thêm một lời nhận xét Hủy bỏ trả lời