React Native 中 Sentry 不上报 NavigationContainer 内页面崩溃如何解决

• Sentry 初始化逻辑被包裹在 codePush.getUpdateMetadata 异步回调中，属于异步初始化。而你在 App.js 导出阶段同步执行的 Sentry.withErrorBoundary 触发时，Sentry 客户端实例还未完成初始化，导致外层错误边界无法正确关联 Sentry 实例，React Navigation 内部抛出的错误被捕获后无法正常上报。
• @sentry/react-native@3.0.2 版本对异步 beforeSend 函数的支持存在已知缺陷，已经进入 beforeSend 回调的事件如果在传输队列初始化完成前返回，会被静默丢弃，这也是你能在控制台看到事件日志但后台收不到上报的核心原因。
• React Navigation 内部自带错误捕获逻辑，会拦截导航栈内组件的渲染错误，阻止错误冒泡到外层的错误边界，仅靠根组件外层的错误边界无法覆盖导航内部的错误场景。

1. 调整 Sentry 初始化逻辑为同步执行 #

优先同步初始化 Sentry 基础配置，保证客户端实例在组件渲染前可用，异步获取到 CodePush 版本信息后再动态更新版本号，同时去掉 beforeSend 的 async 标识：

export const initCrashReportServices = () => {
  const information = {
    dsn: 'XXXX',
    debug: ENVIRONMENT === 'STG',
    environment: ENVIRONMENT,
    attachStacktrace: true,
    beforeSend: event => {
      console.log(event, 'event');
      return event;
    },
  };
  // 同步初始化Sentry，保证实例提前可用
  Sentry.init(information);
  // 异步获取CodePush信息后动态更新版本
  codePush
    .getUpdateMetadata()
    .then(update => {
      if (update) {
        Sentry.setRelease(`${update.appVersion}+codepush:${update.label}`);
      }
    })
    .catch(() => {});
};

2. 调整错误边界包裹位置 #

移除 App 导出层的 Sentry.withErrorBoundary 包裹，在根组件内部 NavigationContainer 外层包裹 Sentry 错误边界，保证导航内部错误可以被正常捕获，同时保证初始化逻辑在组件渲染前执行：

// 组件渲染前先执行Sentry初始化
initCrashReportServices();

function App() {
  return (
    <Sentry.ErrorBoundary fallback={ErrorBoundaryComponent}>
      <NavigationContainer>
        {/* 原有导航配置保持不变 */}
      </NavigationContainer>
    </Sentry.ErrorBoundary>
  );
}

export default codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
})(App);

3. 可选兜底配置 #

如果仍存在导航内错误不上报的情况，可手动监听 React Navigation 的全局错误事件，主动上报未被捕获的错误：

<NavigationContainer
  onUnhandledAction={(error) => {
    Sentry.captureException(error);
  }}
>
  {/* 导航配置 */}
</NavigationContainer>

内容的提问来源于stack exchange，提问作者Amir Hossein Vatani