ReactJS - Error Boundaries

Xin chào các nhà phát triển React tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một chủ đề quan trọng như việc đeo mũ bảo hiểm khi đi xe đạp - Error Boundaries trong ReactJS. Đừng lo nếu bạn mới bắt đầu; chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao. Cuối bài hướng dẫn này, bạn sẽ xử lý lỗi như một chuyên gia!

Khái niệm về Error Boundary

Error Boundary là gì?

Hãy tưởng tượng bạn đang xây dựng một lâu đài cát. Bạn làm việc chăm chỉ trên tháp và hào, nhưng đột nhiên, một làn sóng đến và cuốn đi một phần công trình của bạn. wouldn't nó tuyệt vời nếu bạn có một bức tường để bảo vệ lâu đài của bạn khỏi những làn sóng không mong muốn này? Đó chính xác là điều Error Boundaries làm cho các ứng dụng React của bạn!

Trong thuật ngữ React, một Error Boundary là một component:

Bắt lỗi JavaScript ở bất kỳ đâu trong cây component con của nó
Ghi lại những lỗi đó
Hiển thị một UI thay thế thay vì cây component bị crash

Nó giống như có một mạng an toàn cho các component React của bạn. Nếu có điều gì đó sai sót, Error Boundary sẽ bắt nó và ngăn không cho toàn bộ ứng dụng của bạn crash.

Tại sao chúng ta cần Error Boundaries?

Trước khi Error Boundaries được giới thiệu, một lỗi JavaScript trong một component sẽ làm hỏng trạng thái nội bộ của React và gây ra các lỗi khó hiểu trong các lần render tiếp theo. Điều này giống như việc cố gắng xây dựng trên cátquicksand - một sai lầm nhỏ, và mọi thứ sẽ chìm!

Error Boundaries giải quyết vấn đề này bằng cách cách ly lỗi thành các component cụ thể, cho phép phần còn lại của ứng dụng của bạn tiếp tục hoạt động bình thường. Điều này giống như đặt lâu đài của bạn trên một nền tảng vững chắc - ngay cả khi một phần bị rơi, phần còn lại vẫn nguyên vẹn.

Áp dụng Error Boundary

Bây giờ chúng ta đã hiểu Error Boundaries là gì và tại sao chúng ta cần chúng, hãy cùng xem cách thực hiện chúng trong các ứng dụng React của mình.

Tạo một Error Boundary Component

Để tạo một Error Boundary, chúng ta cần định nghĩa một class component implements hoặc componentDidCatch() hoặc static getDerivedStateFromError() lifecycle methods. Dưới đây là một ví dụ cơ bản:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
// Cập nhật trạng thái để render UI thay thế.
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// Bạn cũng có thể ghi lỗi vào một dịch vụ ghi lỗi
console.log('Lỗi:', error, errorInfo);
}

render() {
if (this.state.hasError) {
// Bạn có thể render bất kỳ UI thay thế nào
return <h1>Oops! Something went wrong.</h1>;
}

return this.props.children;
}
}

Hãy phân tích này:

Chúng ta định nghĩa một class component叫做 ErrorBoundary.
Trong constructor, chúng ta khởi tạo trạng thái với hasError: false.
getDerivedStateFromError() cập nhật trạng thái khi xảy ra lỗi.
componentDidCatch() ghi lỗi (bạn có thể gửi nó đến một dịch vụ ghi lỗi).
Trong phương thức render(), chúng ta kiểm tra xem có lỗi xảy ra hay không. Nếu có, chúng ta render một UI thay thế. Nếu không, chúng ta render các component con như bình thường.

Sử dụng Error Boundary

Bây giờ chúng ta đã có component Error Boundary, hãy xem cách sử dụng nó:

function App() {
return (
<div>
<h1>Welcome to My App</h1>
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
</div>
);
}

Trong ví dụ này, chúng ta bao bọc MyWidget bằng ErrorBoundary. Nếu MyWidget gây ra lỗi, Error Boundary sẽ bắt nó và hiển thị UI thay thế thay vì làm crash toàn bộ ứng dụng.

Error Boundary trong hành động

Để thực sự hiểu cách Error Boundaries hoạt động, hãy tạo một component cố ý gây ra lỗi:

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 === 5) {
// Giả lập một lỗi JS
throw new Error('I crashed!');
}
return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
}
}

function App() {
return (
<div>
<h1>My App</h1>
<ErrorBoundary>
<BuggyCounter />
</ErrorBoundary>
</div>
);
}

Trong ví dụ này, BuggyCounter sẽ gây ra lỗi khi bộ đếm đạt 5. Nhưng vì nó được bao bọc bởi Error Boundary, lỗi sẽ bị bắt và UI thay thế sẽ được hiển thị thay vì làm crash toàn bộ ứng dụng.

Cách tốt nhất để sử dụng Error Boundaries

Dưới đây là một số lời khuyên để tận dụng tối đa Error Boundaries:

Sử dụng Error Boundaries để bao bọc các component route顶层, bảo vệ các khu vực lớn hơn trong ứng dụng của bạn.
Sử dụng nhiều Error Boundaries ở các cấp độ khác nhau để xử lý lỗi chi tiết hơn.
Tùy chỉnh UI thay thế của bạn để cung cấp thông tin hữu ích hoặc các tùy chọn khôi phục cho người dùng.
Sử dụng Error Boundaries kết hợp với các kỹ thuật xử lý lỗi khác như try-catch để quản lý lỗi toàn diện hơn.

Phương thức	Mục đích
`getDerivedStateFromError()`	Cập nhật trạng thái để hiển thị UI thay thế
`componentDidCatch()`	Ghi lỗi hoặc thực hiện các hiệu ứng phụ

Nhớ rằng, Error Boundaries là bạn của bạn trong thế giới phát triển web không thể đoán trước. Chúng giống như dây an toàn cho những người leo núi - chúng sẽ không ngăn cản tất cả các lần té ngã, nhưng chúng sẽ làm giảm thiểu tác động thảm khốc!

Cuối cùng, Error Boundaries là một tính năng mạnh mẽ trong React có thể cải thiện đáng kể tính ổn định và trải nghiệm người dùng của ứng dụng bạn. Bằng cách triển khai chúng một cách khôn ngoan, bạn có thể đảm bảo rằng các ứng dụng React của bạn là vững chắc và bền vững, sẵn sàng đối mặt với bất kỳ lỗi nào có thể xảy ra. Chúc may mắn và hy vọng ứng dụng của bạn sẽ không bao giờ gặp lỗi!

Credits: Image by storyset

Hướng Dẫn Trước:

ReactJS - Context

Hướng Dẫn Tiếp Theo:

ReactJS - Chuyển tiếp Refs