React ErrorBoundary: Các Chiến Lược Cách Ly và Phục Hồi Lỗi

Trong thế giới năng động của phát triển front-end, đặc biệt là khi làm việc với các framework phức tạp dựa trên component như React, các lỗi không mong muốn là không thể tránh khỏi. Những lỗi này, nếu không được xử lý đúng cách, có thể dẫn đến sự cố ứng dụng và trải nghiệm người dùng khó chịu. Component ErrorBoundary của React cung cấp một giải pháp mạnh mẽ để xử lý các lỗi này một cách mượt mà, cách ly chúng và cung cấp các chiến lược phục hồi. Hướng dẫn toàn diện này khám phá sức mạnh của ErrorBoundary, trình bày cách triển khai nó một cách hiệu quả để xây dựng các ứng dụng React kiên cường và thân thiện hơn với người dùng trên toàn cầu.

Hiểu về sự cần thiết của Error Boundaries

Trước khi đi sâu vào việc triển khai, chúng ta hãy tìm hiểu tại sao error boundaries lại cần thiết. Trong React, các lỗi xảy ra trong quá trình render, trong các phương thức lifecycle, hoặc trong constructor của các component con có khả năng làm sập toàn bộ ứng dụng. Điều này là do các lỗi không được bắt sẽ lan truyền lên cây component, thường dẫn đến một màn hình trắng hoặc một thông báo lỗi vô ích. Hãy tưởng tượng một người dùng ở Nhật Bản đang cố gắng hoàn thành một giao dịch tài chính quan trọng, chỉ để gặp phải một màn hình trắng do một lỗi nhỏ trong một component có vẻ không liên quan. Điều này minh họa sự cần thiết quan trọng của việc quản lý lỗi một cách chủ động.

Error boundaries cung cấp một cách để bắt các lỗi JavaScript ở bất kỳ đâu trong cây component con của chúng, ghi lại các lỗi đó và hiển thị một giao diện người dùng dự phòng (fallback UI) thay vì làm sập cây component. Chúng cho phép bạn cách ly các component bị lỗi và ngăn không cho lỗi ở một phần của ứng dụng ảnh hưởng đến các phần khác, đảm bảo trải nghiệm người dùng ổn định và đáng tin cậy hơn trên toàn cầu.

React ErrorBoundary là gì?

Một ErrorBoundary là một component React bắt các lỗi JavaScript ở bất kỳ đâu trong cây component con của nó, ghi lại các lỗi đó và hiển thị một giao diện người dùng dự phòng. Nó là một class component triển khai một hoặc cả hai phương thức lifecycle sau:

• static getDerivedStateFromError(error): Phương thức lifecycle này được gọi sau khi một lỗi đã được ném ra bởi một component con. Nó nhận lỗi được ném ra làm đối số và nên trả về một giá trị để cập nhật state của component.
• componentDidCatch(error, info): Phương thức lifecycle này được gọi sau khi một lỗi đã được ném ra bởi một component con. Nó nhận hai đối số: lỗi được ném ra và một đối tượng info chứa thông tin về component nào đã ném ra lỗi. Bạn có thể sử dụng phương thức này để ghi lại thông tin lỗi hoặc thực hiện các tác vụ phụ khác.

Tạo một Component ErrorBoundary Cơ bản

Hãy tạo một component ErrorBoundary cơ bản để minh họa các nguyên tắc nền tảng.

Ví dụ mã nguồn

Đây là mã nguồn cho một component ErrorBoundary đơn giản:

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

 static getDerivedStateFromError(error) {
 // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // Ví dụ "componentStack":
 // in ComponentThatThrows (created by App)
 // in App
 console.error("Caught an error:", error);
 console.error("Error info:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
 return (
 

 
Đã xảy ra lỗi.
 
Lỗi: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Giải thích

• Constructor: Constructor khởi tạo state của component với hasError được đặt thành false. Chúng tôi cũng lưu trữ error và errorInfo cho mục đích gỡ lỗi.
• getDerivedStateFromError(error): Phương thức tĩnh này được gọi khi một lỗi được ném ra bởi một component con. Nó cập nhật state để chỉ ra rằng đã có lỗi xảy ra.
• componentDidCatch(error, info): Phương thức này được gọi sau khi một lỗi được ném ra. Nó nhận lỗi và một đối tượng info chứa thông tin về component stack. Ở đây, chúng tôi ghi lại lỗi vào console (thay thế bằng cơ chế ghi log ưa thích của bạn, chẳng hạn như Sentry, Bugsnag hoặc một giải pháp nội bộ tùy chỉnh). Chúng tôi cũng đặt error và errorInfo trong state.
• render(): Phương thức render kiểm tra state hasError. Nếu là true, nó sẽ render một UI dự phòng; nếu không, nó sẽ render các children của component. UI dự phòng nên cung cấp thông tin và thân thiện với người dùng. Việc bao gồm chi tiết lỗi và component stack, mặc dù hữu ích cho các nhà phát triển, nên được render có điều kiện hoặc loại bỏ trong môi trường sản phẩm vì lý do bảo mật.

Sử dụng Component ErrorBoundary

Để sử dụng component ErrorBoundary, chỉ cần bọc bất kỳ component nào có thể ném ra lỗi bên trong nó.

Ví dụ mã nguồn

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* Các component có thể ném ra lỗi */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

Giải thích

Trong ví dụ này, MyComponent được bọc bởi ErrorBoundary. Nếu bất kỳ lỗi nào xảy ra trong MyComponent hoặc các con của nó, ErrorBoundary sẽ bắt nó và render UI dự phòng.

Các Chiến Lược ErrorBoundary Nâng Cao

Trong khi ErrorBoundary cơ bản cung cấp một mức độ xử lý lỗi nền tảng, có một số chiến lược nâng cao bạn có thể triển khai để cải thiện việc quản lý lỗi của mình.

1. Error Boundaries Chi Tiết

Thay vì bọc toàn bộ ứng dụng bằng một ErrorBoundary duy nhất, hãy xem xét việc sử dụng các error boundary chi tiết hơn. Điều này bao gồm việc đặt các component ErrorBoundary xung quanh các phần cụ thể của ứng dụng của bạn dễ bị lỗi hơn hoặc nơi mà sự cố sẽ có tác động hạn chế. Ví dụ, bạn có thể bọc các widget riêng lẻ hoặc các component phụ thuộc vào các nguồn dữ liệu bên ngoài.

Ví dụ

function ProductList() {
 return (
 

 {/* Danh sách sản phẩm */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* Công cụ đề xuất */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

Trong ví dụ này, RecommendationWidget có ErrorBoundary riêng. Nếu công cụ đề xuất thất bại, nó sẽ không ảnh hưởng đến ProductList, và người dùng vẫn có thể duyệt sản phẩm. Cách tiếp cận chi tiết này cải thiện trải nghiệm người dùng tổng thể bằng cách cách ly các lỗi và ngăn chúng lan truyền khắp ứng dụng.

2. Ghi Log và Báo Cáo Lỗi

Ghi lại lỗi là rất quan trọng để gỡ lỗi và xác định các vấn đề tái diễn. Phương thức lifecycle componentDidCatch là nơi lý tưởng để tích hợp với các dịch vụ ghi log lỗi như Sentry, Bugsnag, hoặc Rollbar. Các dịch vụ này cung cấp các báo cáo lỗi chi tiết, bao gồm stack traces, ngữ cảnh người dùng, và thông tin môi trường, cho phép bạn chẩn đoán và giải quyết vấn đề một cách nhanh chóng. Hãy xem xét việc ẩn danh hoặc biên tập lại dữ liệu người dùng nhạy cảm trước khi gửi log lỗi để đảm bảo tuân thủ các quy định về quyền riêng tư như GDPR.

Ví dụ

import * as Sentry from "@sentry/react";

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

 static getDerivedStateFromError(error) {
 // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
 return {
 hasError: true,
 };
 }

 componentDidCatch(error, info) {
 // Ghi lại lỗi vào Sentry
 Sentry.captureException(error, { extra: info });
 // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
 console.error("Caught an error:", error);
 }

 render() {
 if (this.state.hasError) {
 // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
 return (
 

 
Đã xảy ra lỗi.
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Trong ví dụ này, phương thức componentDidCatch sử dụng Sentry.captureException để báo cáo lỗi cho Sentry. Bạn có thể cấu hình Sentry để gửi thông báo đến nhóm của mình, cho phép bạn phản ứng nhanh chóng với các lỗi nghiêm trọng.

3. Giao diện người dùng dự phòng tùy chỉnh

Giao diện người dùng dự phòng được hiển thị bởi ErrorBoundary là một cơ hội để cung cấp trải nghiệm thân thiện với người dùng ngay cả khi có lỗi xảy ra. Thay vì hiển thị một thông báo lỗi chung chung, hãy xem xét hiển thị một thông báo mang tính thông tin hơn, hướng dẫn người dùng tìm đến giải pháp. Điều này có thể bao gồm hướng dẫn cách làm mới trang, liên hệ hỗ trợ, hoặc thử lại sau. Bạn cũng có thể tùy chỉnh giao diện người dùng dự phòng dựa trên loại lỗi đã xảy ra.

Ví dụ

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

 static getDerivedStateFromError(error) {
 // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
 return {
 hasError: true,
 error: error,
 };
 }

 componentDidCatch(error, info) {
 console.error("Caught an error:", error);
 // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
 if (this.state.error instanceof NetworkError) {
 return (
 

 
Lỗi Mạng
 
Vui lòng kiểm tra kết nối internet và thử lại.
 
 );
 } else {
 return (
 

 
Đã xảy ra lỗi.
 
Vui lòng thử làm mới trang hoặc liên hệ bộ phận hỗ trợ.
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

Trong ví dụ này, giao diện người dùng dự phòng kiểm tra xem lỗi có phải là NetworkError không. Nếu phải, nó sẽ hiển thị một thông báo cụ thể hướng dẫn người dùng kiểm tra kết nối internet của họ. Nếu không, nó sẽ hiển thị một thông báo lỗi chung. Việc cung cấp hướng dẫn cụ thể và có thể hành động có thể cải thiện đáng kể trải nghiệm người dùng.

4. Cơ chế Thử lại

Trong một số trường hợp, lỗi chỉ là tạm thời và có thể được giải quyết bằng cách thử lại thao tác. Bạn có thể triển khai một cơ chế thử lại trong ErrorBoundary để tự động thử lại thao tác thất bại sau một khoảng thời gian trễ nhất định. Điều này có thể đặc biệt hữu ích để xử lý lỗi mạng hoặc sự cố máy chủ tạm thời. Hãy cẩn thận khi triển khai cơ chế thử lại cho các thao tác có thể có tác dụng phụ, vì việc thử lại chúng có thể dẫn đến hậu quả không mong muốn.

Ví dụ

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // Thời gian chờ tăng theo cấp số nhân
 console.log(`Đang thử lại trong ${retryDelay / 1000} giây...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // Dọn dẹp bộ đếm thời gian khi unmount hoặc re-render
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
Đang tải dữ liệu...
;
 }

 if (error) {
 return 
Lỗi: {error.message} - Đã thử lại {retryCount} lần.
;
 }

 return 
Dữ liệu: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

Trong ví dụ này, DataFetchingComponent cố gắng lấy dữ liệu từ một API. Nếu có lỗi xảy ra, nó sẽ tăng retryCount và thử lại thao tác sau một khoảng thời gian trễ tăng theo cấp số nhân. ErrorBoundary bắt bất kỳ ngoại lệ nào chưa được xử lý và hiển thị một thông báo lỗi, bao gồm cả số lần thử lại.

5. Error Boundaries và Server-Side Rendering (SSR)

Khi sử dụng Server-Side Rendering (SSR), việc xử lý lỗi trở nên quan trọng hơn nữa. Các lỗi xảy ra trong quá trình render phía máy chủ có thể làm sập toàn bộ máy chủ, dẫn đến thời gian chết và trải nghiệm người dùng kém. Bạn cần đảm bảo rằng các error boundaries của mình được cấu hình đúng cách để bắt lỗi cả trên máy chủ và máy khách. Thông thường, các framework SSR như Next.js và Remix có cơ chế xử lý lỗi tích hợp riêng bổ sung cho React Error Boundaries.

6. Kiểm thử Error Boundaries

Kiểm thử error boundaries là điều cần thiết để đảm bảo chúng hoạt động chính xác và cung cấp giao diện người dùng dự phòng như mong đợi. Sử dụng các thư viện kiểm thử như Jest và React Testing Library để mô phỏng các điều kiện lỗi và xác minh rằng các error boundaries của bạn bắt được lỗi và render giao diện người dùng dự phòng phù hợp. Hãy xem xét việc kiểm thử các loại lỗi khác nhau và các trường hợp biên để đảm bảo các error boundaries của bạn mạnh mẽ và xử lý được nhiều tình huống.

Ví dụ

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('This component throws an error');
 return 
This should not be rendered
;
}

test('renders fallback UI when an error is thrown', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/Đã xảy ra lỗi/i);
 expect(errorMessage).toBeInTheDocument();
});

Bài kiểm thử này render một component ném ra lỗi bên trong một ErrorBoundary. Sau đó, nó xác minh rằng giao diện người dùng dự phòng được render chính xác bằng cách kiểm tra xem thông báo lỗi có hiện diện trong tài liệu hay không.

7. Thoái hóa Mềm (Graceful Degradation)

Error boundaries là một thành phần quan trọng để triển khai sự thoái hóa mềm (graceful degradation) trong các ứng dụng React của bạn. Thoái hóa mềm là thực tiễn thiết kế ứng dụng của bạn để tiếp tục hoạt động, mặc dù với chức năng giảm sút, ngay cả khi các bộ phận của nó bị lỗi. Error boundaries cho phép bạn cách ly các component bị lỗi và ngăn chúng ảnh hưởng đến phần còn lại của ứng dụng. Bằng cách cung cấp một giao diện người dùng dự phòng và chức năng thay thế, bạn có thể đảm bảo rằng người dùng vẫn có thể truy cập các tính năng thiết yếu ngay cả khi có lỗi xảy ra.

Những Cạm Bẫy Phổ Biến Cần Tránh

Mặc dù ErrorBoundary là một công cụ mạnh mẽ, có một số cạm bẫy phổ biến cần tránh:

• Không bọc mã không đồng bộ: ErrorBoundary chỉ bắt lỗi trong quá trình render, trong các phương thức lifecycle và trong constructor. Lỗi trong mã không đồng bộ (ví dụ: setTimeout, Promises) cần được bắt bằng các khối try...catch và được xử lý thích hợp trong hàm không đồng bộ.
• Lạm dụng Error Boundaries: Tránh bọc các phần lớn của ứng dụng của bạn trong một ErrorBoundary duy nhất. Điều này có thể gây khó khăn trong việc cách ly nguồn gốc của lỗi và có thể dẫn đến việc hiển thị một giao diện người dùng dự phòng chung chung quá thường xuyên. Sử dụng các error boundary chi tiết để cách ly các component hoặc tính năng cụ thể.
• Bỏ qua thông tin lỗi: Đừng chỉ bắt lỗi và hiển thị một giao diện người dùng dự phòng. Hãy đảm bảo ghi lại thông tin lỗi (bao gồm cả component stack) vào một dịch vụ báo cáo lỗi hoặc console của bạn. Điều này sẽ giúp bạn chẩn đoán và khắc phục các vấn đề cơ bản.
• Hiển thị thông tin nhạy cảm trong môi trường sản phẩm: Tránh hiển thị thông tin lỗi chi tiết (ví dụ: stack traces) trong môi trường sản phẩm. Điều này có thể làm lộ thông tin nhạy cảm cho người dùng và có thể là một rủi ro bảo mật. Thay vào đó, hãy hiển thị một thông báo lỗi thân thiện với người dùng và ghi lại thông tin chi tiết vào một dịch vụ báo cáo lỗi.

Error Boundaries với Functional Components và Hooks

Mặc dù Error Boundaries được triển khai dưới dạng class component, bạn vẫn có thể sử dụng chúng một cách hiệu quả để xử lý lỗi trong các functional component sử dụng hooks. Cách tiếp cận điển hình là bọc functional component bên trong một component ErrorBoundary, như đã trình bày trước đây. Logic xử lý lỗi nằm trong ErrorBoundary, cách ly hiệu quả các lỗi có thể xảy ra trong quá trình render của functional component hoặc thực thi các hook.

Cụ thể, bất kỳ lỗi nào được ném ra trong quá trình render của functional component hoặc trong phần thân của một useEffect hook sẽ bị ErrorBoundary bắt. Tuy nhiên, điều quan trọng cần lưu ý là ErrorBoundaries không bắt các lỗi xảy ra trong các trình xử lý sự kiện (ví dụ: onClick, onChange) được đính kèm vào các phần tử DOM trong functional component. Đối với các trình xử lý sự kiện, bạn nên tiếp tục sử dụng các khối try...catch truyền thống để xử lý lỗi.

Quốc tế hóa và Bản địa hóa Thông báo Lỗi

Khi phát triển ứng dụng cho đối tượng toàn cầu, việc quốc tế hóa và bản địa hóa các thông báo lỗi của bạn là rất quan trọng. Các thông báo lỗi được hiển thị trong giao diện người dùng dự phòng của ErrorBoundary nên được dịch sang ngôn ngữ ưa thích của người dùng để cung cấp trải nghiệm người dùng tốt hơn. Bạn có thể sử dụng các thư viện như i18next hoặc React Intl để quản lý các bản dịch của mình và tự động hiển thị thông báo lỗi phù hợp dựa trên ngôn ngữ của người dùng.

Ví dụ sử dụng i18next

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': 'Something went wrong. Please try again later.',
        'error.network': 'Network error. Please check your internet connection.',
      },
    },
    vi: {
      translation: {
        'error.generic': 'Đã có lỗi xảy ra. Vui lòng thử lại sau.',
        'error.network': 'Lỗi mạng. Vui lòng kiểm tra kết nối internet của bạn.',
      },
    },
  },
  lng: 'vi',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // không cần thiết cho react vì nó tự động escape
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng
    // return { hasError: true }; // điều này không hoạt động với hooks
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
    return ;
  }

  return children;
}

export default ErrorBoundary;

Trong ví dụ này, chúng tôi sử dụng i18next để quản lý các bản dịch cho tiếng Anh và tiếng Việt. Component ErrorFallback sử dụng hook useTranslation để lấy thông báo lỗi phù hợp dựa trên ngôn ngữ hiện tại. Điều này đảm bảo rằng người dùng nhìn thấy các thông báo lỗi bằng ngôn ngữ ưa thích của họ, nâng cao trải nghiệm người dùng tổng thể.

Kết luận

Các component ErrorBoundary của React là một công cụ quan trọng để xây dựng các ứng dụng React mạnh mẽ và thân thiện với người dùng. Bằng cách triển khai error boundaries, bạn có thể xử lý lỗi một cách mượt mà, ngăn chặn sự cố ứng dụng và cung cấp trải nghiệm người dùng tốt hơn cho người dùng trên toàn thế giới. Bằng cách hiểu các nguyên tắc của error boundaries, triển khai các chiến lược nâng cao như error boundaries chi tiết, ghi log lỗi, và giao diện người dùng dự phòng tùy chỉnh, và tránh các cạm bẫy phổ biến, bạn có thể xây dựng các ứng dụng React kiên cường và đáng tin cậy hơn, đáp ứng nhu cầu của khán giả toàn cầu. Hãy nhớ xem xét việc quốc tế hóa và bản địa hóa khi hiển thị thông báo lỗi để cung cấp một trải nghiệm người dùng thực sự toàn diện. Khi sự phức tạp của các ứng dụng web tiếp tục tăng lên, việc thành thạo các kỹ thuật xử lý lỗi sẽ ngày càng trở nên quan trọng đối với các nhà phát triển xây dựng phần mềm chất lượng cao.