Xử lý lỗi React Suspense: Làm chủ trạng thái tải và phục hồi lỗi

React Suspense là một tính năng mạnh mẽ được giới thiệu trong React 16.6, cho phép bạn "tạm dừng" việc render một thành phần cho đến khi một điều kiện nào đó được đáp ứng, thường là hoàn thành một hoạt động bất đồng bộ như tìm nạp dữ liệu. Điều này cung cấp một cách khai báo để xử lý các trạng thái tải và, khi kết hợp với Error Boundaries (Ranh giới lỗi), cho phép phục hồi lỗi một cách mạnh mẽ. Bài viết này khám phá các khái niệm và cách triển khai thực tế của việc xử lý lỗi React Suspense để nâng cao trải nghiệm người dùng cho ứng dụng của bạn.

Hiểu về React Suspense

Trước khi đi sâu vào xử lý lỗi, hãy tóm tắt ngắn gọn về chức năng của React Suspense. Về cơ bản, Suspense bao bọc một thành phần có thể cần phải chờ đợi một điều gì đó (như dữ liệu) trước khi nó có thể được render. Trong khi chờ đợi, Suspense hiển thị một giao diện dự phòng (fallback UI), thường là một chỉ báo tải.

Các khái niệm chính:

• Giao diện dự phòng (Fallback UI): Giao diện được hiển thị trong khi thành phần bị tạm dừng (đang tải).
• Ranh giới Suspense (Suspense Boundary): Chính là thành phần <Suspense>, định nghĩa khu vực quản lý các trạng thái tải.
• Tìm nạp dữ liệu bất đồng bộ: Hoạt động khiến thành phần bị tạm dừng. Điều này thường liên quan đến việc tìm nạp dữ liệu từ một API.

Trong React 18 trở lên, Suspense được cải tiến đáng kể cho việc render phía máy chủ (SSR) và render máy chủ theo luồng (streaming server rendering), làm cho nó trở nên quan trọng hơn bao giờ hết đối với các ứng dụng React hiện đại. Tuy nhiên, các nguyên tắc cơ bản của Suspense phía máy khách vẫn rất quan trọng.

Triển khai Suspense cơ bản

Đây là một ví dụ cơ bản về cách sử dụng Suspense:

            
import React, { Suspense } from 'react';

// A component that fetches data and might suspend
function MyComponent() {
  const data = useMyDataFetchingHook(); // Assume this hook fetches data asynchronously

  if (!data) {
    return null; // This is where the component suspends
  }

  return <div>{data.name}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

            

              
                Copy
              
            
          

Trong ví dụ này, MyComponent sử dụng một hook giả định là useMyDataFetchingHook. Nếu dữ liệu không có sẵn ngay lập tức, hook sẽ không trả về dữ liệu, khiến MyComponent trả về null. Điều này báo hiệu cho React tạm dừng thành phần và hiển thị giao diện fallback được định nghĩa trong thành phần <Suspense>.

Xử lý lỗi với Error Boundaries

Suspense xử lý các trạng thái tải một cách mượt mà, nhưng điều gì sẽ xảy ra khi có sự cố trong quá trình tìm nạp dữ liệu, chẳng hạn như lỗi mạng hoặc phản hồi không mong muốn từ máy chủ? Đây là lúc Error Boundaries phát huy tác dụng.

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ị một giao diện dự phòng thay vì làm sập toàn bộ cây thành phần. Chúng hoạt động giống như một khối catch {} của JavaScript, nhưng dành cho các thành phần React.

Tạo một Error Boundary

Đây là một thành phần Error Boundary đơn giản:

            
import React from 'react';

class ErrorBoundary extends React.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, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Thành phần ErrorBoundary này bắt bất kỳ lỗi nào được ném ra bởi các thành phần con của nó. Phương thức getDerivedStateFromError cập nhật trạng thái để cho biết đã xảy ra lỗi, và phương thức componentDidCatch cho phép bạn ghi lại lỗi đó. Sau đó, phương thức render sẽ hiển thị một giao diện dự phòng nếu có lỗi.

Kết hợp Suspense và Error Boundaries

Để xử lý lỗi hiệu quả trong một ranh giới Suspense, bạn cần bao bọc thành phần Suspense bằng một Error Boundary:

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

function MyComponent() {
  const data = useMyDataFetchingHook();

  if (!data) {
    return null; // Suspends
  }

  return <div>{data.name}</div>;
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

            

              
                Copy
              
            
          

Bây giờ, nếu useMyDataFetchingHook ném ra một lỗi (ví dụ: do yêu cầu API không thành công), ErrorBoundary sẽ bắt nó và hiển thị giao diện dự phòng của nó. Thành phần Suspense xử lý trạng thái tải, và ErrorBoundary xử lý bất kỳ lỗi nào xảy ra trong quá trình tải.

Các chiến lược xử lý lỗi nâng cao

Ngoài việc hiển thị lỗi cơ bản, bạn có thể triển khai các chiến lược xử lý lỗi tinh vi hơn:

1. Cơ chế thử lại

Thay vì chỉ hiển thị một thông báo lỗi, bạn có thể cung cấp một nút thử lại cho phép người dùng cố gắng tìm nạp lại dữ liệu. Điều này đặc biệt hữu ích cho các lỗi tạm thời, như sự cố mạng tạm thời.

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await fetchDataFromAPI(); // Replace with your actual data fetching
        setData(result);
        setError(null);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  const handleRetry = () => {
    setData(null); // Reset data
    setError(null); // Clear any previous errors
    setIsLoading(true);
    fetchData(); // Re-attempt data fetching
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
        <button onClick={handleRetry}>Retry</button>
      </div>
    );
  }

  return <div>{data.name}</div>;
}

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

export default App;

            

              
                Copy
              
            
          

2. Ghi nhật ký và báo cáo lỗi

Việc ghi lại lỗi vào một dịch vụ báo cáo lỗi như Sentry hoặc Bugsnag là rất quan trọng. Điều này cho phép bạn theo dõi và giải quyết các vấn đề mà người dùng đang gặp phải trong môi trường production. Phương thức componentDidCatch của Error Boundary là nơi lý tưởng để ghi lại các lỗi này.

            
import React from 'react';

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

// Example of a function to log errors (replace with your actual implementation)
function logErrorToService(error, errorInfo) {
  console.error("Error caught by ErrorBoundary:", error, errorInfo);
  // Implement integration with your error tracking service (e.g., Sentry.captureException(error))
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

3. Suy giảm từ từ (Graceful Degradation)

Thay vì một thông báo lỗi chung chung, hãy xem xét cung cấp một giao diện dự phòng mang lại trải nghiệm bị giảm sút nhưng vẫn hoạt động được. Ví dụ, nếu một thành phần hiển thị thông tin hồ sơ người dùng không tải được, bạn có thể hiển thị một hình ảnh hồ sơ mặc định và một giao diện đơn giản hóa.

4. Thông báo lỗi theo ngữ cảnh

Cung cấp các thông báo lỗi cụ thể cho thành phần hoặc dữ liệu không tải được. Điều này giúp người dùng hiểu điều gì đã xảy ra và họ có thể thực hiện hành động nào (ví dụ: tải lại trang, kiểm tra kết nối internet).

Ví dụ thực tế và những điều cần cân nhắc

Hãy xem xét một số kịch bản thực tế và cách áp dụng Suspense và Error Boundaries:

1. Trang sản phẩm thương mại điện tử

Hãy tưởng tượng một trang sản phẩm thương mại điện tử tìm nạp chi tiết sản phẩm, đánh giá và các sản phẩm liên quan. Bạn có thể sử dụng Suspense để hiển thị các chỉ báo tải cho từng phần này trong khi dữ liệu đang được tìm nạp. Error Boundaries sau đó có thể xử lý bất kỳ lỗi nào xảy ra trong quá trình tìm nạp dữ liệu cho từng phần một cách độc lập. Ví dụ, nếu đánh giá sản phẩm không tải được, bạn vẫn có thể hiển thị chi tiết sản phẩm và các sản phẩm liên quan, đồng thời thông báo cho người dùng rằng các đánh giá tạm thời không có sẵn. Các nền tảng thương mại điện tử quốc tế nên đảm bảo rằng các thông báo lỗi được bản địa hóa cho các khu vực khác nhau.

2. Bảng tin mạng xã hội

Trong một bảng tin mạng xã hội, bạn có thể có các thành phần tải bài đăng, bình luận và hồ sơ người dùng. Suspense có thể được sử dụng để tải dần các thành phần này, mang lại trải nghiệm người dùng mượt mà hơn. Error Boundaries có thể xử lý các lỗi xảy ra khi tải các bài đăng hoặc hồ sơ riêng lẻ, ngăn không cho toàn bộ bảng tin bị sập. Đảm bảo rằng các lỗi kiểm duyệt nội dung được xử lý thích hợp, đặc biệt là với các chính sách nội dung đa dạng giữa các quốc gia.

3. Ứng dụng Bảng điều khiển (Dashboard)

Các ứng dụng bảng điều khiển thường tìm nạp dữ liệu từ nhiều nguồn để hiển thị các biểu đồ và thống kê khác nhau. Suspense có thể được sử dụng để tải từng biểu đồ một cách độc lập, và Error Boundaries có thể xử lý lỗi trong các biểu đồ riêng lẻ mà không ảnh hưởng đến phần còn lại của bảng điều khiển. Trong một công ty toàn cầu, các ứng dụng bảng điều khiển cần xử lý các định dạng dữ liệu, tiền tệ và múi giờ đa dạng, vì vậy việc xử lý lỗi phải đủ mạnh mẽ để đối phó với những phức tạp này.

Thực hành tốt nhất cho việc xử lý lỗi React Suspense

• Bao bọc Suspense bằng Error Boundaries: Luôn bao bọc các thành phần Suspense của bạn bằng Error Boundaries để xử lý lỗi một cách mượt mà.
• Cung cấp giao diện dự phòng có ý nghĩa: Đảm bảo giao diện dự phòng của bạn cung cấp thông tin và bối cảnh cho người dùng. Tránh các thông báo chung chung như "Đang tải...".
• Triển khai cơ chế thử lại: Cung cấp cho người dùng cách thử lại các yêu cầu không thành công, đặc biệt là đối với các lỗi tạm thời.
• Ghi lại lỗi: Sử dụng dịch vụ báo cáo lỗi để theo dõi và giải quyết các vấn đề trong môi trường production.
• Kiểm tra việc xử lý lỗi của bạn: Mô phỏng các điều kiện lỗi trong các bài kiểm tra của bạn để đảm bảo việc xử lý lỗi hoạt động chính xác.
• Bản địa hóa thông báo lỗi: Đối với các ứng dụng toàn cầu, hãy đảm bảo các thông báo lỗi của bạn được bản địa hóa theo ngôn ngữ của người dùng.

Các phương án thay thế cho React Suspense

Mặc dù React Suspense cung cấp một cách tiếp cận khai báo và thanh lịch để xử lý trạng thái tải và lỗi, điều quan trọng là phải biết về các phương pháp thay thế, đặc biệt là đối với các codebase cũ hoặc các kịch bản mà Suspense có thể không phải là lựa chọn tốt nhất.

1. Render có điều kiện với State

Cách tiếp cận truyền thống liên quan đến việc sử dụng trạng thái của thành phần để theo dõi trạng thái tải và lỗi. Bạn có thể sử dụng các cờ boolean để cho biết dữ liệu có đang tải hay không, liệu có lỗi xảy ra hay không, và dữ liệu nào đã được tìm nạp.

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

function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const result = await fetchDataFromAPI();
        setData(result);
      } catch (e) {
        setError(e);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>{data.name}</div>;
}

export default MyComponent;

            

              
                Copy
              
            
          

Cách tiếp cận này dài dòng hơn so với Suspense, nhưng nó cung cấp quyền kiểm soát chi tiết hơn đối với các trạng thái tải và lỗi. Nó cũng tương thích với các phiên bản React cũ hơn.

2. Các thư viện tìm nạp dữ liệu của bên thứ ba

Các thư viện như SWR và React Query cung cấp cơ chế riêng để xử lý trạng thái tải và lỗi. Các thư viện này thường cung cấp các tính năng bổ sung như bộ nhớ đệm (caching), tự động thử lại và cập nhật lạc quan (optimistic updates).

Những thư viện này có thể là một lựa chọn tốt nếu bạn cần các khả năng tìm nạp dữ liệu nâng cao hơn những gì Suspense cung cấp sẵn. Tuy nhiên, chúng cũng thêm một sự phụ thuộc bên ngoài vào dự án của bạn.

Kết luận

React Suspense, kết hợp với Error Boundaries, cung cấp một cách mạnh mẽ và khai báo để xử lý các trạng thái tải và lỗi trong các ứng dụng React của bạn. Bằng cách triển khai các kỹ thuật này, bạn có thể tạo ra một trải nghiệm mạnh mẽ và thân thiện với người dùng hơn. Hãy nhớ xem xét các nhu cầu cụ thể của ứng dụng của bạn và chọn chiến lược xử lý lỗi phù hợp nhất với yêu cầu của bạn. Đối với các ứng dụng toàn cầu, hãy luôn ưu tiên bản địa hóa và xử lý các định dạng dữ liệu và múi giờ đa dạng một cách thích hợp. Mặc dù có các phương pháp thay thế, Suspense cung cấp một cách hiện đại, tập trung vào React để xây dựng các giao diện người dùng linh hoạt và có khả năng phục hồi.