Sentry React Native 中 Infinity 值导致崩溃问题的分析与解决方案

在 React Native 应用开发中，使用 Sentry 进行错误监控时，开发人员可能会遇到一个隐蔽但致命的问题：当向 addBreadcrumb 方法传递包含 Infinity 值的对象时，会导致应用崩溃。这个问题在 Android 平台上尤为突出，特别是在使用 Hermes 引擎的情况下。

问题现象

当开发人员尝试记录包含 Infinity 值的面包屑数据时，例如：

Sentry.addBreadcrumb({
  category: 'redux.action',
  type: 'info',
  data: { x: Infinity }
});

应用会抛出以下错误：

Invariant Violation: [{"timestamp":1723673438.573,"category":"redux.action","type":"info","data":{"x":"<<Infinity>>"},"level":"info"}] is not usable as a native method argument, js engine: hermes

问题根源

这个问题源于以下几个技术层面的原因：

1. JavaScript 与原生通信限制：React Native 在 JavaScript 和原生代码之间传递数据时，需要对数据进行序列化和反序列化。Infinity 是 JavaScript 中的特殊数值，在序列化过程中无法被正确处理。

2. Hermes 引擎的严格性：使用 Hermes 引擎时，对数据类型检查更为严格，导致 Infinity 值无法通过验证。

3. 错误处理不足：Sentry 的 addBreadcrumb 方法内部没有对特殊值进行充分处理，导致错误直接抛出，可能影响应用稳定性。

解决方案

Sentry 团队在 6.0.0 版本中修复了这个问题，主要改进包括：

1. Infinity 值的规范化处理：在 JavaScript 层面对特殊值进行预处理，确保它们能够安全地传递给原生代码。

2. 错误边界保护：增强了方法的健壮性，避免因数据问题导致的方法崩溃。

对于开发者而言，可以采取以下措施：

1. 升级 SDK：确保使用 Sentry React Native 6.0.0 或更高版本。

2. 数据预处理：在记录面包屑前，对数据进行清理，替换或移除特殊值：

function sanitizeData(data) {
  return JSON.parse(JSON.stringify(data, (key, value) => 
    typeof value === 'number' && !isFinite(value) ? null : value
  ));
}

Sentry.addBreadcrumb({
  category: 'redux.action',
  type: 'info',
  data: sanitizeData({ x: Infinity })
});

3. 错误捕获：虽然新版本已经改进，但仍建议在调用 Sentry 方法时添加错误边界：

try {
  Sentry.addBreadcrumb(/* ... */);
} catch (error) {
  console.error('Failed to add breadcrumb', error);
}

最佳实践

1. 避免记录非结构化数据：尽量记录简单的、可序列化的数据结构。

2. 监控自动收集的数据：检查自动收集的面包屑中是否可能包含特殊值。

3. 定期更新 SDK：保持 Sentry SDK 为最新版本，以获得最佳稳定性和功能。

这个问题提醒我们，在使用跨平台错误监控工具时，需要特别注意 JavaScript 特殊值的处理，特别是在与原生代码交互的场景下。通过合理的预防措施和及时更新，可以确保应用的稳定性不受影响。