Expo应用Error Boundary无法捕获错误致崩溃的解决方法

核心排查点 #

• 首先确认错误抛出场景是否在Error Boundary的捕获范围内：Error Boundary仅能捕获子组件树渲染阶段、生命周期函数、构造函数中的同步错误，以下场景的错误它本身无法捕获，会直接冒泡导致崩溃：
  • 事件处理器（如onPress、点击回调）中抛出的错误
  • 异步代码（setTimeout、Promise、async/await）中的错误
  • Error Boundary组件自身抛出的错误
• 确认开发环境的红屏拦截是否干扰判断：你用的expo-dev-client开发版构建默认开启React Native开发模式红屏提示，错误抛出时会优先拦截弹出红屏，看起来像应用崩溃，实际点击红屏关闭按钮就能看到自定义兜底页，这是开发环境专属行为，生产环境不会触发。
• 检查是否有第三方库改写全局错误处理器：比如错误上报SDK、热更新SDK如果提前注册了全局错误回调，可能会拦截错误直接抛到原生层，导致Error Boundary无法接收到错误。
• 检查Error Boundary实现是否完整：你当前的实现缺少必要的生命周期钩子，且类型定义存在问题，会导致部分场景下错误无法被正常拦截。

具体修复步骤 #

1. 补全Error Boundary实现 #

修正类型定义，补充componentDidCatch生命周期阻止错误冒泡到原生层，参考代码如下：

import React from "react";
import FallbackComponent from "./fallback";

type Props = {
  children: React.ReactNode;
  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
};

type State = { error: Error | null };

class ErrorBoundary extends React.Component<Props, State> {
  state: State = { error: null };

  static getDerivedStateFromError(error: Error): State {
    return { error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    // 可在此处添加错误上报逻辑，不要在此处二次抛出错误
    if (this.props.onError) {
      this.props.onError(error, errorInfo);
    }
    console.error("渲染层错误捕获：", error, errorInfo);
  }

  render(): React.ReactNode {
    return this.state.error ? <FallbackComponent error={this.state.error} /> : this.props.children;
  }
}

export default ErrorBoundary;

注意：原代码中children类型写为全局Node是DOM类型定义，在React Native场景下会导致类型校验异常，需要替换为React.ReactNode。

2. 确认组件挂载位置 #

你当前在app.tsx中的挂载位置是正确的，需要确保所有全局Provider、导航容器都被包裹在ErrorBoundary内部，不要将ErrorBoundary放在任意Provider的子层级，否则Provider初始化阶段抛出的错误无法被捕获。
如果使用React.lazy做组件懒加载，需要搭配Suspense组件包裹懒加载组件，否则异步加载失败的错误无法被Error Boundary捕获。

3. 区分环境验证效果 #

• 开发环境测试：如果不想看到dev client的红屏拦截，可以在应用入口文件最顶部添加如下配置，临时关闭开发模式错误覆盖层（仅建议本地测试使用，不要提交到生产代码）：

if (__DEV__) {
  // 关闭开发模式红屏对渲染错误的拦截
  console.reportErrorsAsExceptions = false;
}

• 生产/预览环境验证：使用eas build --platform android --profile preview --local打非开发版的预览包，此时dev client的红屏逻辑会被完全关闭，抛出渲染错误时会直接展示你自定义的Fallback兜底页，不会触发应用崩溃。

4. 补充非渲染错误捕获（可选） #

如果需要覆盖事件回调、异步代码的错误场景，可以在ErrorBoundary中新增静态触发方法，搭配全局错误处理器手动触发兜底页展示：

// 在ErrorBoundary类中新增
static showFallback: (error: Error) => void;

componentDidMount() {
  ErrorBoundary.showFallback = (error: Error) => {
    this.setState({ error });
  };
}

componentWillUnmount() {
  ErrorBoundary.showFallback = () => {};
}

之后在全局Promise rejection、异步错误回调中调用ErrorBoundary.showFallback(error)即可统一触发兜底逻辑。

内容的提问来源于stack exchange，提问作者HelloWorldEngineer