14 tháng 9, 2025Tiếng Việt

Hướng dẫn toàn diện để hiểu và triển khai JavaScript Error Boundary trong React để xử lý lỗi mạnh mẽ và giao diện người dùng không bị gián đoạn.

JavaScript Error Boundary: Hướng dẫn Triển khai Xử lý Lỗi trong React

Trong lĩnh vực phát triển React, các lỗi không mong muốn có thể dẫn đến trải nghiệm người dùng khó chịu và sự mất ổn định của ứng dụng. Một chiến lược xử lý lỗi được xác định rõ ràng là rất quan trọng để xây dựng các ứng dụng mạnh mẽ và đáng tin cậy. Error Boundary của React cung cấp một cơ chế mạnh mẽ để xử lý một cách mượt mà các lỗi xảy ra trong cây component của bạn, ngăn chặn toàn bộ ứng dụng bị sập và cho phép bạn hiển thị giao diện người dùng dự phòng (fallback UI).

Error Boundary là gì?

Error Boundary là một component React có khả năng 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 thay vì cây component đã bị sập. Error Boundary bắt các lỗi trong quá trình rendering, trong các phương thức vòng đời, và trong constructor của toàn bộ cây component bên dưới nó.

Hãy coi Error Boundary như một khối lệnh try...catch dành cho các component React. Giống như khối lệnh try...catch cho phép bạn xử lý các ngoại lệ trong mã JavaScript đồng bộ, Error Boundary cho phép bạn xử lý các lỗi xảy ra trong quá trình rendering các component React của bạn.

Lưu ý quan trọng: Error Boundary không bắt lỗi cho:

Trình xử lý sự kiện (event handler) (tìm hiểu thêm trong các phần sau)
Mã bất đồng bộ (ví dụ: callback của setTimeout hoặc requestAnimationFrame)
Kết xuất phía máy chủ (server-side rendering)
Lỗi được ném ra trong chính Error Boundary (thay vì trong các component con của nó)

Tại sao nên sử dụng Error Boundary?

Việc sử dụng Error Boundary mang lại một số lợi ích đáng kể:

Cải thiện Trải nghiệm Người dùng: Thay vì hiển thị một màn hình trắng trống trơn hoặc một thông báo lỗi khó hiểu, bạn có thể hiển thị một giao diện người dùng dự phòng thân thiện, thông báo cho người dùng rằng đã có sự cố xảy ra và có thể cung cấp cách để khôi phục (ví dụ: tải lại trang hoặc điều hướng đến một phần khác).
Ổn định Ứng dụng: Error Boundary ngăn chặn các lỗi ở một phần của ứng dụng làm sập toàn bộ ứng dụng. Điều này đặc biệt quan trọng đối với các ứng dụng phức tạp có nhiều component liên kết với nhau.
Xử lý Lỗi Tập trung: Error Boundary cung cấp một nơi tập trung để ghi lại lỗi và truy tìm nguyên nhân gốc rễ của sự cố. Điều này giúp đơn giản hóa việc gỡ lỗi và bảo trì.
Suy giảm Chức năng một cách Mềm mỏng (Graceful Degradation): Bạn có thể đặt Error Boundary một cách chiến lược xung quanh các phần khác nhau của ứng dụng để đảm bảo rằng ngay cả khi một số component bị lỗi, phần còn lại của ứng dụng vẫn hoạt động. Điều này cho phép ứng dụng suy giảm chức năng một cách mượt mà khi đối mặt với lỗi.

Triển khai Error Boundary trong React

Để tạo một Error Boundary, bạn cần định nghĩa một class component triển khai một (hoặc cả hai) phương thức vòng đời sau:

static getDerivedStateFromError(error): Phương thức vòng đời 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, cho biết rằng đã có lỗi xảy ra (ví dụ: đặt cờ hasError thành true).
componentDidCatch(error, info): Phương thức vòng đời 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ố, cùng với 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 lỗi vào một dịch vụ như Sentry hoặc Bugsnag.

Đây là một ví dụ cơ bản về một component Error Boundary:


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,
      error: error
    };
  }

  componentDidCatch(error, info) {
    // Ví dụ về "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in MyErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    console.error("Caught an error:", error, info);
    this.setState({
        errorInfo: info.componentStack
    });
    // 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 (
        <div>
          <h2>Đã có lỗi xảy ra.</h2>
          <p>Lỗi: {this.state.error ? this.state.error.message : "Đã xảy ra một lỗi không xác định."}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorInfo && this.state.errorInfo}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Để sử dụng Error Boundary, bạn chỉ cần bọc cây component mà bạn muốn bảo vệ:


<ErrorBoundary>
  <MyComponentThatMightThrow/>
</ErrorBoundary>

Các Ví dụ Thực tế về việc Sử dụng Error Boundary

Hãy cùng khám phá một số kịch bản thực tế mà Error Boundary có thể đặc biệt hữu ích:

1. Xử lý lỗi API

Khi lấy dữ liệu từ một API, lỗi có thể xảy ra do các vấn đề về mạng, sự cố máy chủ hoặc dữ liệu không hợp lệ. Bạn có thể bọc component lấy và hiển thị dữ liệu bằng một Error Boundary để xử lý các lỗi này một cách mượt mà.


function UserProfile() {
  const [user, setUser] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/user');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (error) {
        // Lỗi sẽ được bắt bởi ErrorBoundary
        throw error; 
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Đang tải hồ sơ người dùng...</p>;
  }

  if (!user) {
    return <p>Không có dữ liệu người dùng.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <UserProfile />
    </ErrorBoundary>
  );
}

Trong ví dụ này, nếu lệnh gọi API thất bại hoặc trả về lỗi, Error Boundary sẽ bắt lỗi và hiển thị một giao diện người dùng dự phòng (được định nghĩa trong phương thức render của Error Boundary). Điều này ngăn chặn toàn bộ ứng dụng bị sập và cung cấp cho người dùng một thông báo hữu ích hơn. Bạn có thể mở rộng giao diện người dùng dự phòng để cung cấp tùy chọn thử lại yêu cầu.

2. Xử lý lỗi từ Thư viện Bên thứ ba

Khi sử dụng các thư viện của bên thứ ba, có khả năng chúng có thể ném ra các lỗi không mong muốn. Việc bọc các component sử dụng các thư viện này bằng Error Boundary có thể giúp bạn xử lý các lỗi này một cách mượt mà.

Hãy xem xét một thư viện biểu đồ giả định thỉnh thoảng ném ra lỗi do dữ liệu không nhất quán hoặc các vấn đề khác. Bạn có thể bọc component biểu đồ như sau:


function MyChartComponent() {
  try {
    // Render biểu đồ bằng thư viện bên thứ ba
    return <Chart data={data} />;
  } catch (error) {
    // Khối catch này sẽ không hiệu quả đối với các lỗi vòng đời của component React
    // Nó chủ yếu dành cho các lỗi đồng bộ trong hàm cụ thể này.
    console.error("Error rendering chart:", error);
    // Cân nhắc ném lỗi để được bắt bởi ErrorBoundary
    throw error; // Ném lại lỗi
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyChartComponent />
    </ErrorBoundary>
  );
}

Nếu component Chart ném ra lỗi, Error Boundary sẽ bắt nó và hiển thị một giao diện người dùng dự phòng. Lưu ý rằng try/catch trong MyChartComponent sẽ chỉ bắt các lỗi trong hàm đồng bộ, chứ không phải trong vòng đời của component. Do đó, ErrorBoundary là rất quan trọng ở đây.

3. Xử lý Lỗi Rendering

Lỗi có thể xảy ra trong quá trình rendering do dữ liệu không hợp lệ, loại prop không chính xác hoặc các vấn đề khác. Error Boundary có thể bắt các lỗi này và ngăn ứng dụng bị sập.


function DisplayName({ name }) {
  if (typeof name !== 'string') {
    throw new Error('Tên phải là một chuỗi');
  }

  return <h2>Xin chào, {name}!</h2>;
}

function App() {
  return (
    <ErrorBoundary>
      <DisplayName name={123} />  <!-- Sai loại prop -->
    </ErrorBoundary>
  );
}

Trong ví dụ này, component DisplayName mong đợi prop name là một chuỗi. Nếu một số được truyền vào thay thế, một lỗi sẽ được ném ra, và Error Boundary sẽ bắt nó và hiển thị một giao diện người dùng dự phòng.

Error Boundary và Trình xử lý Sự kiện

Như đã đề cập trước đó, Error Boundary không bắt các lỗi xảy ra trong trình xử lý sự kiện (event handler). Điều này là do các trình xử lý sự kiện thường là bất đồng bộ, và Error Boundary chỉ bắt các lỗi xảy ra trong quá trình rendering, trong các phương thức vòng đời, và trong constructor.

Để xử lý lỗi trong các trình xử lý sự kiện, bạn cần sử dụng khối lệnh try...catch truyền thống bên trong hàm xử lý sự kiện.


function MyComponent() {
  const handleClick = () => {
    try {
      // Một số mã có thể ném ra lỗi
      throw new Error('Đã xảy ra lỗi trong trình xử lý sự kiện');
    } catch (error) {
      console.error('Đã bắt được lỗi trong trình xử lý sự kiện:', error);
      // Xử lý lỗi (ví dụ: hiển thị thông báo lỗi cho người dùng)
    }
  };

  return <button onClick={handleClick}>Nhấn vào tôi</button>;
}

Xử lý Lỗi Toàn cục

Mặc dù Error Boundary rất tuyệt vời để xử lý lỗi trong cây component React, chúng không bao gồm tất cả các kịch bản lỗi có thể xảy ra. Ví dụ, chúng không bắt các lỗi xảy ra bên ngoài các component React, chẳng hạn như lỗi trong các trình lắng nghe sự kiện toàn cục hoặc lỗi trong mã chạy trước khi React được khởi tạo.

Để xử lý các loại lỗi này, bạn có thể sử dụng trình xử lý sự kiện window.onerror.


window.onerror = function(message, source, lineno, colno, error) {
  console.error('Trình xử lý lỗi toàn cục:', message, source, lineno, colno, error);
  // Ghi lại lỗi vào một dịch vụ như Sentry hoặc Bugsnag
  // Hiển thị thông báo lỗi toàn cục cho người dùng (tùy chọn)
  return true; // Ngăn chặn hành vi xử lý lỗi mặc định
};

Trình xử lý sự kiện window.onerror được gọi bất cứ khi nào có lỗi JavaScript không được bắt xảy ra. Bạn có thể sử dụng nó để ghi lại lỗi, hiển thị thông báo lỗi toàn cục cho người dùng, hoặc thực hiện các hành động khác để xử lý lỗi.

Quan trọng: Việc trả về true từ trình xử lý sự kiện window.onerror sẽ ngăn trình duyệt hiển thị thông báo lỗi mặc định. Tuy nhiên, hãy lưu ý đến trải nghiệm người dùng; nếu bạn chặn thông báo mặc định, hãy đảm bảo bạn cung cấp một thông báo thay thế rõ ràng và đầy đủ thông tin.

Các Thực hành Tốt nhất khi Sử dụng Error Boundary

Đây là một số thực hành tốt nhất cần ghi nhớ khi sử dụng Error Boundary:

Đặt Error Boundary một cách chiến lược: Bọc các phần khác nhau của ứng dụng của bạn bằng Error Boundary để cô lập lỗi và ngăn chúng lan truyền. Cân nhắc bọc toàn bộ các route hoặc các phần chính của giao diện người dùng của bạn.
Cung cấp giao diện người dùng dự phòng đầy đủ thông tin: Giao diện người dùng dự phòng nên thông báo cho người dùng rằng đã có lỗi xảy ra và có thể cung cấp cách để khôi phục. Tránh hiển thị các thông báo lỗi chung chung như "Đã có lỗi xảy ra."
Ghi lại lỗi: Sử dụng phương thức vòng đời componentDidCatch để ghi lại lỗi vào một dịch vụ như Sentry hoặc Bugsnag. Điều này sẽ giúp bạn truy tìm nguyên nhân gốc rễ của sự cố và cải thiện sự ổn định của ứng dụng.
Không sử dụng Error Boundary cho các lỗi có thể dự đoán được: Error Boundary được thiết kế để xử lý các lỗi không mong muốn. Đối với các lỗi có thể dự đoán được (ví dụ: lỗi xác thực, lỗi API), hãy sử dụng các cơ chế xử lý lỗi cụ thể hơn, chẳng hạn như khối lệnh try...catch hoặc các component xử lý lỗi tùy chỉnh.
Xem xét nhiều cấp độ của Error Boundary: Bạn có thể lồng các Error Boundary để cung cấp các cấp độ xử lý lỗi khác nhau. Ví dụ, bạn có thể có một Error Boundary toàn cục bắt bất kỳ lỗi nào không được xử lý và hiển thị một thông báo lỗi chung, và các Error Boundary cụ thể hơn bắt lỗi trong các component cụ thể và hiển thị các thông báo lỗi chi tiết hơn.
Đừng quên về server-side rendering: Nếu bạn đang sử dụng server-side rendering, bạn cũng sẽ cần xử lý lỗi trên máy chủ. Error Boundary hoạt động trên máy chủ, nhưng bạn có thể cần sử dụng các cơ chế xử lý lỗi bổ sung để bắt các lỗi xảy ra trong lần render ban đầu.

Các Kỹ thuật Error Boundary Nâng cao

1. Sử dụng Render Prop

Thay vì render một giao diện người dùng dự phòng tĩnh, bạn có thể sử dụng một render prop để cung cấp sự linh hoạt hơn trong cách xử lý lỗi. Một render prop là một prop dạng hàm mà một component sử dụng để render một thứ gì đó.


class ErrorBoundary extends React.Component {
  // ... (giống như trước)

  render() {
    if (this.state.hasError) {
      // Sử dụng render prop để render UI dự phòng
      return this.props.fallbackRender(this.state.error, this.state.errorInfo);
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary fallbackRender={(error, errorInfo) => (
      <div>
        <h2>Đã có lỗi xảy ra!</h2>
        <p>Lỗi: {error.message}</p>
        <details style={{ whiteSpace: 'pre-wrap' }}>
          {errorInfo.componentStack}
        </details>
      </div>
    )}>
      <MyComponentThatMightThrow/>
    </ErrorBoundary>
  );
}

Điều này cho phép bạn tùy chỉnh giao diện người dùng dự phòng trên cơ sở từng Error Boundary. Prop fallbackRender nhận lỗi và thông tin lỗi làm đối số, cho phép bạn hiển thị các thông báo lỗi cụ thể hơn hoặc thực hiện các hành động khác dựa trên lỗi đó.

2. Error Boundary dưới dạng Higher-Order Component (HOC)

Bạn có thể tạo một higher-order component (HOC) để bọc một component khác bằng một Error Boundary. Điều này có thể hữu ích để áp dụng Error Boundary cho nhiều component mà không cần phải lặp lại cùng một mã.


function withErrorBoundary(WrappedComponent) {
  return class WithErrorBoundary extends React.Component {
    render() {
      return (
        <ErrorBoundary>
          <WrappedComponent {...this.props} />
        </ErrorBoundary>
      );
    }
  };
}

// Cách sử dụng:
const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

Hàm withErrorBoundary nhận một component làm đối số và trả về một component mới bọc component gốc bằng một Error Boundary. Điều này cho phép bạn dễ dàng thêm xử lý lỗi vào bất kỳ component nào trong ứng dụng của mình.

Kiểm thử Error Boundary

Việc kiểm thử các Error Boundary là rất quan trọng để đảm bảo chúng hoạt động chính xác. Bạn có thể sử dụng các thư viện kiểm thử như Jest và React Testing Library để kiểm thử Error Boundary của mình.

Đây là một ví dụ về cách kiểm thử một Error Boundary bằng React Testing Library:


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

function ComponentThatThrows() {
  throw new Error('Component này ném ra một lỗi');
}

test('render UI dự phòng khi một lỗi được ném ra', () => {
  render(
    <ErrorBoundary>
      <ComponentThatThrows />
    </ErrorBoundary>
  );

  expect(screen.getByText('Đã có lỗi xảy ra.')).toBeInTheDocument();
});

Thử nghiệm này render component ComponentThatThrows, component này ném ra một lỗi. Sau đó, thử nghiệm khẳng định rằng giao diện người dùng dự phòng do Error Boundary render được hiển thị.

Error Boundary và Server Component (React 18+)

Với sự ra đời của Server Component trong React 18 trở lên, Error Boundary tiếp tục đóng một vai trò quan trọng trong việc xử lý lỗi. Server Component thực thi trên máy chủ và chỉ gửi kết quả đã render cho client. Mặc dù các nguyên tắc cốt lõi vẫn giữ nguyên, có một vài điểm khác biệt cần xem xét:

Ghi Lỗi Phía Máy chủ: Đảm bảo rằng bạn đang ghi lại các lỗi xảy ra trong Server Component trên máy chủ. Điều này có thể liên quan đến việc sử dụng một framework ghi lỗi phía máy chủ hoặc gửi lỗi đến một dịch vụ theo dõi lỗi.
Fallback Phía Client: Mặc dù Server Component render trên máy chủ, bạn vẫn cần cung cấp một giao diện người dùng dự phòng phía client trong trường hợp có lỗi. Điều này đảm bảo rằng người dùng có trải nghiệm nhất quán, ngay cả khi máy chủ không thể render component.
Streaming SSR: Khi sử dụng Streaming Server-Side Rendering (SSR), lỗi có thể xảy ra trong quá trình streaming. Error Boundary có thể giúp bạn xử lý các lỗi này một cách mượt mà bằng cách render một giao diện người dùng dự phòng cho luồng bị ảnh hưởng.

Xử lý lỗi trong Server Component là một lĩnh vực đang phát triển, vì vậy điều quan trọng là phải luôn cập nhật các thực hành và khuyến nghị mới nhất.

Những Cạm bẫy Phổ biến cần Tránh

Phụ thuộc quá nhiều vào Error Boundary: Đừng sử dụng Error Boundary như một sự thay thế cho việc xử lý lỗi đúng cách trong các component của bạn. Luôn cố gắng viết mã mạnh mẽ và đáng tin cậy để xử lý lỗi một cách mượt mà.
Bỏ qua Lỗi: Hãy chắc chắn rằng bạn ghi lại các lỗi bị bắt bởi Error Boundary để bạn có thể truy tìm nguyên nhân gốc rễ của sự cố. Đừng chỉ hiển thị một giao diện người dùng dự phòng và bỏ qua lỗi.
Sử dụng Error Boundary cho Lỗi Xác thực: Error Boundary không phải là công cụ phù hợp để xử lý lỗi xác thực. Thay vào đó, hãy sử dụng các kỹ thuật xác thực cụ thể hơn.
Không Kiểm thử Error Boundary: Hãy kiểm thử Error Boundary của bạn để đảm bảo chúng hoạt động chính xác.

Kết luận

Error Boundary là một công cụ mạnh mẽ để xây dựng các ứng dụng React mạnh mẽ và đáng tin cậy. Bằng cách hiểu cách triển khai và sử dụng Error Boundary một cách hiệu quả, bạn có thể cải thiện trải nghiệm người dùng, ngăn chặn ứng dụng bị sập và đơn giản hóa việc gỡ lỗi. Hãy nhớ đặt Error Boundary một cách chiến lược, cung cấp giao diện người dùng dự phòng đầy đủ thông tin, ghi lại lỗi và kiểm thử Error Boundary của bạn một cách kỹ lưỡng.

Bằng cách tuân theo các hướng dẫn và thực hành tốt nhất được nêu trong bài viết này, bạn có thể đảm bảo rằng các ứng dụng React của mình có khả năng chống chọi với lỗi và mang lại trải nghiệm tích cực cho người dùng.