M

MLOG

Tiếng Việt

Làm chủ React Suspense và Error Boundaries để quản lý trạng thái tải mạnh mẽ và xử lý lỗi một cách mượt mà. Học cách xây dựng ứng dụng linh hoạt và thân thiện với người dùng.

React Suspense và Error Boundaries: Xử lý Tải và Lỗi Nâng cao

React Suspense và Error Boundaries là những tính năng mạnh mẽ cho phép các nhà phát triển xây dựng các ứng dụng linh hoạt và thân thiện hơn với người dùng. Chúng cung cấp một cách khai báo để xử lý các trạng thái tải và các lỗi không mong muốn, cải thiện trải nghiệm người dùng tổng thể và đơn giản hóa quy trình phát triển. Bài viết này cung cấp một hướng dẫn toàn diện để sử dụng React Suspense và Error Boundaries một cách hiệu quả, bao gồm mọi thứ từ các khái niệm cơ bản đến các kỹ thuật nâng cao.

Tìm hiểu về React Suspense

React Suspense là một cơ chế để "tạm dừng" việc render một component cho đến khi một điều kiện cụ thể được đáp ứng, thường là sự sẵn có của dữ liệu từ một hoạt động bất đồng bộ. Điều này cho phép bạn hiển thị giao diện người dùng dự phòng (fallback UI), chẳng hạn như các chỉ báo tải, trong khi chờ dữ liệu được tải. Suspense đơn giản hóa việc quản lý các trạng thái tải, loại bỏ nhu cầu render có điều kiện thủ công và cải thiện khả năng đọc mã nguồn.

Các khái niệm chính của Suspense

Triển khai Suspense cơ bản

Đây là một ví dụ đơn giản về cách sử dụng Suspense để hiển thị một chỉ báo tải trong khi tìm nạp dữ liệu:


import React, { Suspense } from 'react';

// Mô phỏng việc tìm nạp dữ liệu (ví dụ: từ một API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Tạo một resource mà Suspense có thể sử dụng
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Component đọc từ resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Tên: {data.name}

      
Tuổi: {data.age}

    

  );
};

const App = () => {
  return (
    Đang tải dữ liệu người dùng...
}> ); }; export default App;

Trong ví dụ này:

Suspense với Tách mã (Code Splitting)

Suspense cũng có thể được sử dụng với React.lazy để triển khai tách mã. Điều này cho phép bạn chỉ tải các component khi chúng cần thiết, cải thiện hiệu suất tải trang ban đầu.


import React, { Suspense, lazy } from 'react';

// Tải lười (lazy load) component MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Đang tải component...}>
      
    
  );
};

export default App;

Trong ví dụ này:

Tìm hiểu về Error Boundaries

Error Boundaries là các component React bắt 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 thay vì làm sập toàn bộ ứng dụng. Chúng cung cấp một cách để xử lý các lỗi không mong muốn một cách mượt mà, cải thiện trải nghiệm người dùng và làm cho ứng dụng của bạn mạnh mẽ hơn.

Các khái niệm chính của Error Boundaries

Triển khai Error Boundaries cơ bản

Đây là một ví dụ đơn giản về cách tạo một Error Boundary:


import React, { Component } from 'react';

class ErrorBoundary extends 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ị giao diện người dùng dự phòng.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 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(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Bạn có thể render bất kỳ giao diện người dùng dự phòng tùy chỉnh nào
      return 
Đã có lỗi xảy ra.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Trong ví dụ này:

Sử dụng Error Boundaries

Để sử dụng component `ErrorBoundary`, chỉ cần bao bọc các component mà bạn muốn bảo vệ bằng nó:


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

const MyComponent = () => {
  // Mô phỏng một lỗi
  throw new Error('Đã xảy ra lỗi!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

Trong ví dụ này, nếu có lỗi xảy ra trong `MyComponent`, component `ErrorBoundary` sẽ bắt lỗi và hiển thị giao diện người dùng dự phòng.

Kết hợp Suspense và Error Boundaries

Suspense và Error Boundaries có thể được kết hợp để cung cấp một chiến lược xử lý lỗi mạnh mẽ và toàn diện cho các hoạt động bất đồng bộ. Bằng cách bao bọc các component có thể bị tạm dừng bằng cả Suspense và Error Boundaries, bạn có thể xử lý cả trạng thái tải và các lỗi không mong muốn một cách mượt mà.

Ví dụ về việc kết hợp Suspense và Error Boundaries


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

// Mô phỏng việc tìm nạp dữ liệu (ví dụ: từ một API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Mô phỏng tìm nạp dữ liệu thành công
      // resolve({ name: 'John Doe', age: 30 });

      // Mô phỏng lỗi trong quá trình tìm nạp dữ liệu
      reject(new Error('Không thể tìm nạp dữ liệu người dùng'));

    }, 2000);
  });
};

// Tạo một resource mà Suspense có thể sử dụng
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Component đọc từ resource
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Tên: {data.name}

      
Tuổi: {data.age}

    

  );
};

const App = () => {
  return (
    
      Đang tải dữ liệu người dùng...}>
        
      
    
  );
};

export default App;

Trong ví dụ này:

Các kỹ thuật nâng cao và Thực hành tốt nhất

Tối ưu hóa hiệu suất Suspense

Error Boundaries tùy chỉnh

Bạn có thể tạo các Error Boundaries tùy chỉnh để xử lý các loại lỗi cụ thể hoặc để cung cấp các thông báo lỗi nhiều thông tin hơn. Ví dụ, bạn có thể tạo một Error Boundary hiển thị một giao diện người dùng dự phòng khác nhau dựa trên loại lỗi đã xảy ra.

Render phía máy chủ (SSR) với Suspense

Suspense có thể được sử dụng với Render phía máy chủ (SSR) để cải thiện hiệu suất tải trang ban đầu. Khi sử dụng SSR, bạn có thể render trước trạng thái ban đầu của ứng dụng trên máy chủ và sau đó truyền trực tuyến (stream) nội dung còn lại cho máy khách. Suspense cho phép bạn xử lý việc tìm nạp dữ liệu bất đồng bộ trong quá trình SSR và hiển thị các chỉ báo tải trong khi dữ liệu đang được truyền.

Xử lý các kịch bản lỗi khác nhau

Hãy xem xét các kịch bản lỗi khác nhau này và cách xử lý chúng:

Xử lý lỗi toàn cục

Triển khai một cơ chế xử lý lỗi toàn cục để bắt các lỗi không được bắt bởi Error Boundaries. Điều này có thể được thực hiện bằng cách sử dụng một trình xử lý lỗi toàn cục hoặc bằng cách bao bọc toàn bộ ứng dụng trong một Error Boundary.

Ví dụ và Trường hợp sử dụng trong thực tế

Ứng dụng Thương mại điện tử

Trong một ứng dụng thương mại điện tử, Suspense có thể được sử dụng để hiển thị các chỉ báo tải trong khi tìm nạp dữ liệu sản phẩm, và Error Boundaries có thể được sử dụng để xử lý các lỗi xảy ra trong quá trình thanh toán. Ví dụ, hãy tưởng tượng một người dùng từ Nhật Bản đang duyệt một cửa hàng trực tuyến đặt tại Hoa Kỳ. Hình ảnh và mô tả sản phẩm có thể mất một chút thời gian để tải. Suspense có thể hiển thị một hoạt ảnh tải đơn giản trong khi dữ liệu này được tìm nạp từ một máy chủ có thể ở nửa vòng trái đất. Nếu cổng thanh toán thất bại do sự cố mạng tạm thời (phổ biến trên các cơ sở hạ tầng internet khác nhau trên toàn cầu), một Error Boundary có thể hiển thị một thông báo thân thiện với người dùng, yêu cầu họ thử lại sau.

Nền tảng Mạng xã hội

Trong một nền tảng mạng xã hội, Suspense có thể được sử dụng để hiển thị các chỉ báo tải trong khi tìm nạp hồ sơ người dùng và bài đăng, và Error Boundaries có thể được sử dụng để xử lý các lỗi xảy ra khi tải hình ảnh hoặc video. Một người dùng duyệt web từ Ấn Độ có thể gặp phải thời gian tải chậm hơn đối với các phương tiện được lưu trữ trên các máy chủ ở Châu Âu. Suspense có thể hiển thị một trình giữ chỗ cho đến khi nội dung được tải đầy đủ. Nếu dữ liệu hồ sơ của một người dùng cụ thể bị hỏng (hiếm nhưng có thể xảy ra), một Error Boundary có thể ngăn toàn bộ bảng tin mạng xã hội bị sập, thay vào đó hiển thị một thông báo lỗi đơn giản như "Không thể tải hồ sơ người dùng".

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

Trong một ứng dụng bảng điều khiển, Suspense có thể được sử dụng để hiển thị các chỉ báo tải trong khi tìm nạp dữ liệu từ nhiều nguồn, và Error Boundaries có thể được sử dụng để xử lý các lỗi xảy ra khi tải biểu đồ hoặc đồ thị. Một nhà phân tích tài chính ở London truy cập vào một bảng điều khiển đầu tư toàn cầu có thể đang tải dữ liệu từ nhiều sàn giao dịch trên khắp thế giới. Suspense có thể cung cấp các chỉ báo tải cho mỗi nguồn dữ liệu. Nếu API của một sàn giao dịch bị sập, một Error Boundary có thể hiển thị một thông báo lỗi cụ thể cho dữ liệu của sàn giao dịch đó, ngăn toàn bộ bảng điều khiển trở nên không thể sử dụng được.

Kết luận

React Suspense và Error Boundaries là những công cụ thiết yếu để xây dựng các ứng dụng React linh hoạt và thân thiện với người dùng. Bằng cách sử dụng Suspense để quản lý trạng thái tải và Error Boundaries để xử lý các lỗi không mong muốn, bạn có thể cải thiện trải nghiệm người dùng tổng thể và đơn giản hóa quy trình phát triển. Hướng dẫn này đã cung cấp một cái nhìn tổng quan toàn diện về Suspense và Error Boundaries, bao gồm mọi thứ từ các khái niệm cơ bản đến các kỹ thuật nâng cao. Bằng cách tuân theo các thực hành tốt nhất được nêu trong bài viết này, bạn có thể xây dựng các ứng dụng React mạnh mẽ và đáng tin cậy, có khả năng xử lý ngay cả những tình huống khó khăn nhất.

Khi React tiếp tục phát triển, Suspense và Error Boundaries có khả năng sẽ đóng một vai trò ngày càng quan trọng trong việc xây dựng các ứng dụng web hiện đại. Bằng cách làm chủ các tính năng này, bạn có thể đi trước xu hướng và mang lại những trải nghiệm người dùng đặc biệt.