React Server组件错误边界处理机制

React Server组件错误边界处理机制

在React Server Component实践中，错误边界处理是一个关键议题。与客户端组件不同，Server Components的错误处理需要全新的思考方式。

传统错误边界的局限性

// 客户端错误边界示例
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <Suspense fallback="Loading...">
        <ServerComponentWithError />
      </Suspense>
    </ErrorBoundary>
  );
}

Server Components的错误处理方案

// server-component-error-handler.js
'use server';

export async function handleServerError(operation) {
  try {
    const result = await operation();
    return { success: true, data: result };
  } catch (error) {
    console.error('Server Component Error:', error);
    // 返回错误信息给客户端
    return { 
      success: false, 
      error: error.message,
      stack: process.env.NODE_ENV === 'development' ? error.stack : undefined
    };
  }
}

// 使用示例
export default async function ServerComponentWithError() {
  const result = await handleServerError(async () => {
    // 模拟可能出错的操作
    const data = await fetchSomeData();
    return data;
  });
  
  if (!result.success) {
    // 渲染错误界面
    return <div className="error">Error: {result.error}</div>;
  }
  
  return <div>{JSON.stringify(result.data)}</div>;
}

性能测试数据对比

最佳实践建议

1. 在Server Component中使用try-catch包装异步操作
2. 提供详细的错误信息但避免暴露敏感数据
3. 结合客户端错误边界实现双重保护
4. 使用服务端日志记录完整的错误堆栈

通过合理设计错误处理机制，可以确保Server Components在出现异常时优雅降级，提升整体应用的健壮性。