Rate this post

Trước đây, nếu chúng ta gặp bất kỳ lỗi JavaScript nào bên trong các component, nó sẽ làm hỏng trạng thái bên trong của React và đặt React ở broken state trong các lần hiển thị tiếp theo. Không có cách nào để xử lý những lỗi này trong các component React, cũng như không cung cấp bất kỳ phương pháp nào để khôi phục chúng. Tuy nhiên, React 16 giới thiệu một khái niệm mới để xử lý các lỗi bằng cách sử dụng các Error Boundaries. Bây giờ, nếu bất kỳ lỗi JavaScript nào được tìm thấy trong một phần của giao diện người dùng, nó sẽ không làm hỏng toàn bộ ứng dụng.

Các bài viết liên quan:

Error Boundaries là các component React bắt lỗi JavaScript ở bất kỳ đâu trong ứng dụng của chúng tôi, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng. Nó không phá vỡ toàn bộ cây component ứng dụng và chỉ hiển thị giao diện người dùng dự phòng bất cứ khi nào xảy ra lỗi trong một component. Các Error Boundaries bắt lỗi trong quá trình hiển thị trong các phương thức vòng đời component và các hàm tạo của toàn bộ cây bên dưới chúng.

Ghi chú:

Đôi khi, không thể bắt được Error Boundaries trong ứng dụng React. Đó là:

  • Event handlers
  • Mã không đồng bộ (ví dụ: lệnh gọi lại setTimeout hoặc requestAnimationFrame)
  • Kết xuất phía máy chủ
  • Lỗi được ném vào chính Error Boundaries chứ không phải là con của nó.

Đối với ứng dụng React đơn giản, chúng ta có thể khai báo Error Boundaries một lần và có thể sử dụng nó cho toàn bộ ứng dụng. Đối với một ứng dụng phức tạp có nhiều component, chúng ta có thể khai báo nhiều Error Boundaries để khôi phục từng phần của toàn bộ ứng dụng.

Chúng tôi cũng có thể báo cáo lỗi cho một dịch vụ giám sát lỗi như Rollbar. Dịch vụ giám sát này cung cấp khả năng theo dõi có bao nhiêu người dùng bị ảnh hưởng bởi lỗi, tìm nguyên nhân gây ra lỗi và cải thiện trải nghiệm người dùng.

Error Boundaries trong Class

Một component Class có thể trở thành Error Boundaries nếu nó xác định các phương thức vòng đời mới hoặc static getDerivedStateFromError () hoặc componentDidCatch (lỗi, thông tin). Chúng ta có thể sử dụng static getDerivedStateFromError () để hiển thị giao diện người dùng dự phòng khi có lỗi và có thể sử dụng componentDidCatch () để ghi lại thông tin lỗi.

Một Error Boundaries không thể bắt lỗi trong chính nó. Nếu Error Boundaries không hiển thị thông báo lỗi, lỗi sẽ chuyển đến Error Boundaries gần nhất phía trên nó. Nó tương tự như khối catch {} trong JavaScript.

Cách triển khai Error Boundaries

Bước 1 Tạo một Class mở rộng component React và chuyển các props vào bên trong nó.

Bước 2 Bây giờ, thêm phương thức componentDidCatch () cho phép bạn bắt lỗi các component bên dưới chúng trong cây.

Bước 3 Tiếp theo, thêm phương thức render (), phương thức này chịu trách nhiệm về cách component sẽ được hiển thị. Ví dụ, nó sẽ hiển thị thông báo lỗi như “Có gì đó không ổn”.

Ví dụ

class ErrorBoundary extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { hasError: false };  
  }  
  static getDerivedStateFromError(error) {  
    // It will update the state so the next render shows the fallback UI.  
    return { hasError: true };  
  }  
  componentDidCatch(error, info) {  
    // It will catch error in any component below. We can also log the error to an error reporting service.  
    logErrorToMyService(error, info);  
  }  
  render() {  
    if (this.state.hasError) {  
        return (  
        <div>Something is wrong.</div>;  
    );  
    }  
    return this.props.children;   
  }  
}  

Bước 4 Bây giờ, chúng ta có thể sử dụng nó như một component thông thường. Thêm component mới trong HTML mà bạn muốn đưa vào Error Boundaries. Trong ví dụ này, chúng tôi đang thêm một Error Boundaries xung quanh component MyWidgetCounter.

<ErrorBoundary>  
       <MyWidgetCounter/>  
</ErrorBoundary> 

Nơi đặt Error Boundaries

Một Error Boundaries hoàn toàn phụ thuộc vào bạn. Bạn có thể sử dụng Error Boundaries ở cấp cao nhất của các component ứng dụng hoặc bọc nó trên các component riêng lẻ để bảo vệ chúng khỏi phá vỡ các phần khác của ứng dụng.

Hãy để chúng tôi xem một ví dụ.

import React from 'react';  
import './App.css'  
  
class ErrorBoundary extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { error: false, errorInfo: null };  
  }  
    
  componentDidCatch(error, errorInfo) {  
    // Catch errors in any components below and re-render with error message  
    this.setState({  
      error: error,  
      errorInfo: errorInfo  
    })  
  }  
    
  render() {  
    if (this.state.errorInfo) {  
      return (  
        <div>  
          <h2>Something went wrong.</h2>  
          <details style={{ whiteSpace: 'pre-wrap' }}>  
            {this.state.error && this.state.error.toString()}  
            <br />  
            {this.state.errorInfo.componentStack}  
          </details>  
        </div>  
      );  
    }  
    return this.props.children;  
  }    
}  
  
class BuggyCounter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { counter: 0 };  
    this.handleClick = this.handleClick.bind(this);  
  }  
    
  handleClick() {  
    this.setState(({counter}) => ({  
      counter: counter + 1  
    }));  
  }  
    
  render() {  
    if (this.state.counter === 3) {  
      throw new Error('I crashed!');  
    }  
    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;  
  }  
}  
  
function App() {  
  return (  
    <div>  
      <p><b>Example of Error Boundaries</b></p>  
      <hr />  
      <ErrorBoundary>  
        <p>These two counters are inside the same error boundary.</p>  
          <BuggyCounter />  
          <BuggyCounter />  
      </ErrorBoundary>  
      <hr />  
      <p>These two counters are inside of their individual error boundary.</p>  
        <ErrorBoundary><BuggyCounter /></ErrorBoundary>  
        <ErrorBoundary><BuggyCounter /></ErrorBoundary>  
    </div>  
  );  
}  
export default App

Trong đoạn mã trên, khi chúng ta nhấp vào các con số, nó sẽ làm tăng bộ đếm. Bộ đếm được lập trình để ném lỗi khi nó đạt đến 3. Nó mô phỏng một lỗi JavaScript trong một component. Ở đây, chúng tôi đã sử dụng Error Boundaries theo hai cách, được đưa ra bên dưới.

Đầu tiên, hai bộ đếm này nằm trong cùng một Error Boundaries. Nếu bất kỳ ai bị rơi, Error Boundaries sẽ thay thế cả hai.

<ErrorBoundary>  
          <BuggyCounter />  
          <BuggyCounter />  
</ErrorBoundary>  

Thứ hai, hai bộ đếm này nằm trong Error Boundaries cá nhân của chúng. Vì vậy, nếu ai bị rơi, người còn lại không bị ảnh hưởng.

<ErrorBoundary><BuggyCounter /></ErrorBoundary>  
<ErrorBoundary><BuggyCounter /></ErrorBoundary>

Đầu ra:

Khi chúng ta thực thi đoạn mã trên, chúng ta sẽ nhận được kết quả sau.

Khi bộ đếm đạt ở mức 3, nó cho kết quả đầu ra như sau.

Hành vi mới cho lỗi chưa tìm thấy

Nó là một hàm ý quan trọng liên quan đến Error Boundaries. Nếu lỗi không bị bắt bởi bất kỳ Error Boundaries nào, nó sẽ dẫn đến việc ngắt kết nối toàn bộ ứng dụng React.

Error Boundary trong Event Handler

Error Boundaries không cho phép bắt lỗi bên trong Event Handler. React không cần bất kỳ Error Boundaries nào để khôi phục các lỗi trong Event Handler. Nếu cần bắt lỗi trong Event Handler, bạn có thể sử dụng câu lệnh try-catch của JavaScript.

Trong ví dụ dưới đây, bạn có thể thấy cách xử lý sự kiện sẽ xử lý các lỗi.

class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { error: null };  
    this.handleClick = this.handleClick.bind(this);  
  }  
  
  handleClick() {  
    try {  
      // Do something which can throw error  
    } catch (error) {  
      this.setState({ error });  
    }  
  }  
  
  render() {  
    if (this.state.error) {  
      return   
          <h2>It caught an error.</h2>  
    }  
    return <div onClick={this.handleClick}>Click Me</div>  
  }  
}  

Leave a Reply

Call now
%d bloggers like this: