面试题：React错误边界中useErrorBoundary的基本使用场景

Question

请阐述在React应用中，什么时候适合使用useErrorBoundary，举例说明其能解决的常见前端错误场景。

Answer 1

适合使用 useErrorBoundary 的场景

1. 组件树局部错误处理：当你希望在组件树的某个部分捕获错误，而不影响整个应用的运行时适合使用。例如，在一个大型电商应用中，商品展示模块有多个子组件负责展示商品图片、价格、描述等。如果其中图片加载组件出现错误（比如图片链接失效），使用 useErrorBoundary 可以在这个局部模块处理错误，避免影响其他部分如购物车、导航栏等的正常显示。
2. 第三方组件错误处理：当引入第三方组件且不确定其稳定性时。例如，引入一个第三方的图表库组件来展示销售数据图表。若该组件内部由于数据格式不兼容等原因抛出错误，useErrorBoundary 可以捕获并处理，防止错误扩散导致应用崩溃。

常见前端错误场景及解决示例

1. 网络请求错误：在一个用户资料展示组件中，需要从后端获取用户详细信息。使用 fetch 进行网络请求时，如果网络出现问题（如断网、服务器故障等），可以在 useErrorBoundary 中捕获错误。

import React, { useErrorBoundary } from 'react';

function UserProfile() {
    const [userData, setUserData] = React.useState(null);
    React.useEffect(() => {
        fetch('/api/user')
          .then(response => response.json())
          .then(data => setUserData(data))
          .catch(error => {
                throw new Error('Failed to fetch user data: ', error);
            });
    }, []);

    const ErrorBoundary = useErrorBoundary((error, errorInfo) => {
        console.log('Error in UserProfile:', error, errorInfo);
        return <div>An error occurred while loading user profile.</div>;
    });

    return (
        <ErrorBoundary>
            {userData ? (
                <div>
                    <p>Name: {userData.name}</p>
                    <p>Email: {userData.email}</p>
                </div>
            ) : (
                <div>Loading user profile...</div>
            )}
        </ErrorBoundary>
    );
}

export default UserProfile;

2. 组件渲染错误：假设有一个 ImageGallery 组件用于展示一组图片，其中某个图片的 src 属性设置错误，导致渲染失败。

import React, { useErrorBoundary } from'react';

function ImageGallery() {
    const images = ['image1.jpg', 'invalid - url', 'image3.jpg'];

    const ErrorBoundary = useErrorBoundary((error, errorInfo) => {
        console.log('Error in ImageGallery:', error, errorInfo);
        return <div>An error occurred while displaying images.</div>;
    });

    return (
        <ErrorBoundary>
            <div>
                {images.map((image, index) => (
                    <img key={index} src={image} alt={`Image ${index}`} />
                ))}
            </div>
        </ErrorBoundary>
    );
}

export default ImageGallery;