Error Boundary — nó là gì, component React Native và xử lý lỗi

Error Boundary là gì

Error Boundary là một cơ chế React để suy thoái từ từ khi xảy ra lỗi hiển thị. Được giới thiệu trong React 16 (2017) như một component bao bọc thực hiện một trong hai phương thức vòng đời: static getDerivedStateFromError hoặc componentDidCatch. Error Boundary cho phép hiển thị cho người dùng một thông báo có ý nghĩa thay vì màn hình trắng hoặc sự cố hoàn toàn ứng dụng.

Error Boundary ra đời như thế nào

Trước React 16, bất kỳ lỗi không được xử lý nào trong render sẽ gây ra sự cố hoàn toàn ứng dụng với việc tháo gỡ toàn bộ cây DOM. Trong ứng dụng web, điều này có nghĩa là màn hình trắng; trong React Native, sự cố hoàn toàn và quay trở lại Màn hình chính. Nhóm React đã giới thiệu Error Boundary như một phần tương tự của khối catch cho UI khai báo, mượn khái niệm từ cách tiếp cận “let it crash” trong ngôn ngữ Erlang.

Tầm quan trọng đối với React Native

Trong React Native, việc thiếu Error Boundary có nghĩa là sự cố hoàn toàn ứng dụng khi xảy ra bất kỳ lỗi hiển thị nào. Người dùng mất toàn bộ phiên hiện tại mà không có khả năng khôi phục. Error Boundary trong React Native rất quan trọng vì ứng dụng di động không thể tải lại như trang web — phiên làm việc của người dùng bị mất không thể khôi phục và người dùng phải bắt đầu lại từ đầu.

Cách Error Boundary hoạt động trong React Native

Error Boundary hoạt động ở cấp độ cây React. Khi một component con ném lỗi trong render hoặc vòng đời, React không tháo gỡ toàn bộ cây mà chuyển quyền điều khiển cho Error Boundary gần nhất trong hệ thống phân cấp. Boundary gọi getDerivedStateFromError, đặt state.hasError = true và hiển thị giao diện dự phòng thay cho nhánh component bị lỗi.

import React, { Component, ErrorInfo, ReactNode } from "react"

interface Props {
    children: ReactNode
    fallback?: ReactNode
}

interface State {
    hasError: boolean
    error?: Error
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { hasError: false }
    }

    static getDerivedStateFromError(error: Error): State {
        return { hasError: true, error }
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
        console.error("Caught by boundary:", error)
        Crashlytics.recordException(error)
    }

    render() {
        if (this.state.hasError) {
            return this.props.fallback || <FallbackUI />
        }
        return this.props.children
    }
}

getDerivedStateFromError thiết lập trạng thái để hiển thị giao diện dự phòng — đây là một phương thức tĩnh được gọi trong giai đoạn hiển thị trước khi xác nhận thay đổi. componentDidCatch được thực thi trong giai đoạn xác nhận và dành cho các tác dụng phụ: ghi log, gửi báo cáo sự cố đến Crashlytics, phân tích. Hai phương thức phân chia trách nhiệm giữa quản lý trạng thái UI và các tác dụng phụ.

Tạo component Error Boundary

Để tạo Error Boundary, bạn cần triển khai một component lớp với các phương thức getDerivedStateFromError và/hoặc componentDidCatch. Các component hàm không thể là Error Boundary — React chỉ hỗ trợ chức năng này cho component lớp vì cần truy cập vào các phương thức vòng đời. Thư viện react-error-boundary cung cấp một triển khai có sẵn với API dựa trên hook để thuận tiện.

// Ví dụ sử dụng Error Boundary trong React Native
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>Đã xảy ra lỗi</Text>
        <Text>{error.message}</Text>
        <Button title="Thử lại" onPress={resetError} />
    </View>
)

const App = () => (
    <SafeAreaView>
        <ErrorBoundary FallbackComponent={<FallbackComponent />}>
            <UserProfile userId={"123"} />
        </ErrorBoundary>
        <BottomNavigation />
    </SafeAreaView>
)

Cấp độ bao bọc — Error Boundary có thể được đặt ở các cấp độ khác nhau trong hệ thống phân cấp. Một Boundary toàn cục ở gốc ứng dụng sẽ hiển thị giao diện dự phòng khi có lỗi, nhưng điều hướng sẽ được giữ nguyên. Nhiều Boundary ở cấp độ màn hình cho phép cô lập lỗi: nếu một màn hình bị lỗi, các màn hình khác tiếp tục hoạt động độc lập. react-error-boundary đơn giản hóa cơ chế đặt lại thông qua hook useErrorBoundary, cho phép đặt lại trạng thái mà không cần tải lại. Đối với các dự án điển hình, sơ đồ Boundary ba cấp được coi là tối ưu cho ứng dụng React Native.

Đặt lại trạng thái Error Boundary

Sau khi lỗi xảy ra, người dùng có thể nhấp vào nút “Thử lại”, nút này đặt lại hasError thành false và hiển thị lại cây component con. Cơ chế đặt lại rất quan trọng để khôi phục chức năng ứng dụng mà không cần tải lại. Trong react-error-boundary, callback onReset được sử dụng, có thể xóa bộ nhớ đệm, lấy lại dữ liệu hoặc cập nhật trạng thái ở cấp cao hơn trong cây.

Giới hạn của Error Boundary

Error Boundary không bắt lỗi bất đồng bộ — lỗi trong setTimeout, setInterval, Promise, async/await. React không thể chặn các lỗi bên ngoài chu kỳ hiển thị và hook vòng đời vì chúng được thực thi trong các ngữ cảnh thực thi khác nhau. Đối với lỗi bất đồng bộ, cần có try-catch riêng trong các trình xử lý hoặc một trình xử lý sự kiện unhandledrejection toàn cục.

Trình xử lý sự kiện

Các lỗi trong onClick, onChange và các trình xử lý sự kiện khác không bị Error Boundary bắt vì chúng được thực thi bên ngoài quá trình hiển thị React. Xử lý lỗi cho các trình xử lý sự kiện phải được thực hiện bên trong chính trình xử lý thông qua try-catch. Thư viện react-error-boundary cung cấp hook useErrorHandler để ném lỗi từ các trình xử lý sự kiện đến Boundary gần nhất.

Kết xuất phía máy chủ và Next.js

Error Boundary không hoạt động ở phía máy chủ trong Next.js hoặc Gatsby. Các phương thức getDerivedStateFromError và componentDidCatch không được gọi trong SSR vì các phương thức vòng đời chỉ khả dụng trong trình duyệt. Đối với lỗi máy chủ, cần một chiến lược riêng: try-catch trong getServerSideProps, trang dự phòng error.js (Next.js 13+), hoặc middleware toàn cục.

Lớp native React Native

Trong React Native, Error Boundary không ngăn chặn sự cố ở cấp độ module native. Sự cố native (segfault, hết bộ nhớ, ngoại lệ native) xảy ra ở cấp độ Objective-C hoặc Java và không chạm đến lớp JavaScript. Đối với sự cố native, cần Crashlytics NDK (Android) hoặc KSCrash (iOS). Error Boundary chỉ bảo vệ lớp JavaScript của ứng dụng React Native.

Thực hành tốt nhất với Error Boundary

Đặt Error Boundary ở ranh giới của các module logic: một Boundary cho mỗi màn hình, một cho mỗi widget bên thứ ba, một cho mỗi biểu mẫu phức tạp. Điều này cô lập các lỗi và cho phép người dùng tiếp tục làm việc ở các phần khác của ứng dụng. Một Boundary gốc phải luôn có mặt — cho các lỗi nghiêm trọng trong các component điều hướng chung hoặc nhà cung cấp. Mỗi Boundary chịu trách nhiệm cho phần giao diện của riêng mình và không ảnh hưởng đến các component lân cận khi xảy ra lỗi.

Ghi log và giám sát

Luôn chuyển lỗi đến Crashlytics hoặc Sentry thông qua componentDidCatch. Thêm ngữ cảnh: tên màn hình, userId, phiên bản ứng dụng, tham số điều hướng. Trong Sentry, breadcrumbs có sẵn — một chuỗi các hành động của người dùng dẫn đến lỗi. Để phân tích tần suất lỗi không nghiêm trọng, hãy sử dụng bảng điều khiển Crashlytics với phân nhóm theo vấn đề.

Giao diện dự phòng (Fallback UI)

Đừng sử dụng fallback trần trụi — hãy tạo một giao diện có ý nghĩa. Bộ đề xuất cho React Native: thông báo lỗi (thân thiện với người dùng, không kỹ thuật), nút “Thử lại”, liên kết đến hỗ trợ hoặc trò chuyện. Tránh View trống — người dùng sẽ nghĩ ứng dụng đã bị sự cố hoàn toàn và sẽ đóng nó. Fallback phải được tích hợp vào thiết kế tổng thể của ứng dụng.

Kiểm thử Error Boundary

Kiểm thử từng Error Boundary bằng React Testing Library hoặc React Native Testing Library. Tạo một component kích hoạt ném lỗi khi hiển thị và xác nhận rằng giao diện dự phòng được hiển thị. Đối với kiểm thử tích hợp, hãy sử dụng storybook với các trạng thái Error Boundary khác nhau: bình thường, lỗi, trạng thái sau đặt lại. Kiểm thử tự động của Boundary đảm bảo rằng khi component thay đổi, giao diện dự phòng tiếp tục hoạt động chính xác trong môi trường sản xuất. Phần trăm bao phủ kiểm thử cho mỗi Boundary phải là yêu cầu bắt buộc trong đánh giá mã nguồn cho các dự án React Native.