Cách xử lý lỗi trong React

Các phương pháp hay nhất để xử lý lỗi trong React bằng cách sử dụng các ranh giới lỗi

Khi làm việc với một thành phần, khi bất kỳ lỗi nào xảy ra bên trong mã thành phần này, React sẽ ngắt kết nối toàn bộ cây thành phần React, hiển thịkhông có gì. Đây là cách React để xử lý các sự cố.

Bạn không muốn lỗi hiển thị cho người dùng của mình. React quyết định hiển thị một trang trống.

Tuy nhiên, đây chỉ là mặc định. Để một trang trống hiển thị chỉ tốt hơn một chút so với việc hiển thị các thông báo khó hiểu cho người dùng, nhưng bạn nên có một cách tốt hơn.

Nếu bạn đang ở chế độ phát triển, bất kỳ lỗi nào sẽ kích hoạt dấu vết ngăn xếp chi tiết được in vàotrình duyệt DevToolsbàn điều khiển. Tuy nhiên, không phải trong sản xuất, tất nhiên, nơi bạn không thực sự muốn lỗi được in ra cho người dùng của mình.

Trong quá trình sản xuất, bạn nên chặn các lỗi và hiển thị một số loại thông điệp hữu ích cho người sử dụng ứng dụng.

Đây là đâuranh giới lỗinhập cuộc.

Với ranh giới lỗi, bạn cô lập các phần của ứng dụng và xử lý lỗi cục bộ.

Ranh giới lỗi là một thành phần React triển khaicomponentDidCatch()sự kiện vòng đời và bao bọc các thành phần khác:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }
componentDidCatch(error, info) {
this.setState({ errorOccurred: true })
logErrorToMyService(error, info)
}
render() {
return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children
}
}

và trong một JSX thành phần, bạn sử dụng nó như thế này:

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

Khi xảy ra lỗi bên trongSomeOtherComponenthoặc các thành phần con khác và trong toàn bộ cây con mà chúng nắm giữ,ErrorHandlersẽ ngăn chặn nó và bạn có thể xử lý lỗi một cách khéo léo.

Trong trường hợp trên được lấy cảm hứng từ tài liệu chính thức của React, chúng tôi có mộterrorOccurredthuộc tính trạng thái mà khi được đặt thành true, làm cho giao diện hiển thị giao diện người dùng xử lý lỗi, nếu không, nó sẽ hiển thị cây giao diện người dùng ứng dụng bình thường.

Phía trongcomponentDidCatch(), nhận được 2 đối số mô tả lỗi, chúng tôi cũng gọilogErrorToMyService()đây chỉ là sơ khai cho một số chức năng sử dụng một dịch vụ như Sentry, Roller, Airbrake hoặc những chức năng khác có thể ghi lại lỗi theo cách tốt cho bạn thấy, vì vậy bạn không cần phải dựa vào việc người dùng thông báo rằng có lỗi nhận thấy một vấn đề.

Tải xuống miễn phí của tôiSổ tay React

Cách xử lý lỗi trong React

Các phương pháp hay nhất để xử lý lỗi trong React bằng cách sử dụng các ranh giới lỗi

Các hướng dẫn về phản ứng khác: