import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

Trong ví dụ này:

• React.lazy được sử dụng để tải lười MyComponent.
• Suspense bao bọc LazyComponent.
• Prop fallback cung cấp giao diện người dùng dự phòng (một chỉ báo tải) được hiển thị trong khi MyComponent đang tải.

Triển Khai Error Boundaries

Trong khi Suspense xử lý trạng thái tải, Error Boundaries là các thành phần React bắt lỗi JavaScript ở bất kỳ đâu trong cây thành phần con của chúng, ghi lại các lỗi đó và hiển thị giao diện người dùng dự phòng thay vì làm sập toàn bộ cây thành phần.

Error Boundaries Hoạt Động Như Thế Nào

Error Boundaries là các thành phần lớp định nghĩa các phương thức vòng đời sau:

• static getDerivedStateFromError(error): Phương thức này được gọi sau khi một lỗi đã được ném bởi một thành phần con cháu. Nó nhận lỗi đã được ném làm đối số và nên trả về một giá trị để cập nhật trạng thái.
• componentDidCatch(error, info): Phương thức này được gọi sau khi một lỗi đã được ném bởi một thành phần con cháu. Nó nhận lỗi và một đối tượng info chứa thông tin về thành phần nào đã ném lỗi. Đây là nơi lý tưởng để ghi lại lỗi vào một dịch vụ như Sentry hoặc Bugsnag.

Quan trọng: Error Boundaries chỉ bắt lỗi trong các thành phần nằm bên dưới chúng trong cây. Một Error Boundary không thể bắt lỗi trong chính nó.

Ví Dụ: Triển Khai Error Boundary Cơ Bản

            
import React, { Component } from 'react';

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

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Để sử dụng Error Boundary, hãy bao bọc bất kỳ thành phần nào có thể ném lỗi:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Tích Hợp Suspense và Error Boundaries

Sức mạnh thực sự đến từ việc kết hợp Suspense và Error Boundaries. Điều này cho phép bạn xử lý cả trạng thái tải và lỗi một cách khéo léo trong ứng dụng của mình. Thực hành được khuyến nghị là bọc Suspense bằng một Error Boundary. Bằng cách này, nếu thành phần được tải lười không tải được (ví dụ: lỗi mạng), Error Boundary có thể bắt lỗi và hiển thị thông báo hữu ích cho người dùng.

Ví Dụ: Kết Hợp Suspense và Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...