错误边界 #

一、错误边界概述 #

1.1 什么是错误边界 #

错误边界是一种捕获子组件渲染错误的机制，防止整个应用崩溃。

jsx

import { ErrorBoundary } from 'solid-js';

function SafeComponent() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong</p>}>
      <RiskyComponent />
    </ErrorBoundary>
  );
}

1.2 错误边界捕获的错误类型 #

捕获	不捕获
渲染期间的错误	事件处理器中的错误
生命周期方法中的错误	异步代码中的错误
子组件树中的错误	服务端渲染中的错误

二、基本用法 #

2.1 简单错误边界 #

jsx

function SafeComponent() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong</p>}>
      <RiskyComponent />
    </ErrorBoundary>
  );
}

2.2 访问错误信息 #

jsx

function DetailedErrorBoundary() {
  return (
    <ErrorBoundary fallback={(err, reset) => (
      <div class="error-container">
        <h2>Error Occurred</h2>
        <p>{err.message}</p>
        <button onClick={reset}>Try Again</button>
      </div>
    )}>
      <ChildComponent />
    </ErrorBoundary>
  );
}

2.3 嵌套错误边界 #

jsx

function App() {
  return (
    <ErrorBoundary fallback={<AppError />}>
      <Header />
      <main>
        <ErrorBoundary fallback={<SidebarError />}>
          <Sidebar />
        </ErrorBoundary>
        <ErrorBoundary fallback={<ContentError />}>
          <Content />
        </ErrorBoundary>
      </main>
    </ErrorBoundary>
  );
}

三、实际应用 #

3.1 可复用错误边界 #

jsx

function ErrorFallback(props) {
  return (
    <div class="error-fallback">
      <h2>Oops! Something went wrong</h2>
      <p>{props.error.message}</p>
      <button onClick={props.resetErrorBoundary}>Try Again</button>
    </div>
  );
}

function SafeComponent(props) {
  return (
    <ErrorBoundary fallback={(err, reset) => (
      <ErrorFallback error={err} resetErrorBoundary={reset} />
    )}>
      {props.children}
    </ErrorBoundary>
  );
}

3.2 带日志的错误边界 #

jsx

function LoggingErrorBoundary(props) {
  return (
    <ErrorBoundary fallback={(err, reset) => {
      console.error('Error caught:', err);
      return props.fallback(err, reset);
    }}>
      {props.children}
    </ErrorBoundary>
  );
}

四、最佳实践 #

为不同区域设置独立的错误边界
提供有意义的错误信息
允许用户恢复或重试
记录错误到日志服务

五、总结 #

5.1 ErrorBoundary API #

参数	说明
`fallback`	错误显示组件或函数
`children`	子组件

5.2 fallback 函数参数 #

参数	说明
`err`	错误对象
`reset`	重置函数

5.3 最佳实践 #

关键组件使用错误边界包裹
提供错误恢复选项
记录错误日志
嵌套错误边界隔离错误