如何在浏览器显示"Aww snap"页面时向Logrocket/Datadog记录错误日志？

由于"Aww snap"错误是浏览器进程崩溃导致的，此时前端JS执行会完全停止，无法在崩溃发生时直接上报日志。以下是几种可行的方案，帮你追踪这类问题：

1. 内存阈值预报警告 #

在崩溃发生前监控内存使用情况，当达到危险阈值时提前上报，为后续排查提供线索。Chrome支持performance.memory API（非标准但稳定可用），可以定时检查内存使用率：

// 每5秒检查一次内存状态
setInterval(() => {
  if (!performance.memory) return;
  
  const { usedJSHeapSize, totalJSHeapSize } = performance.memory;
  const usageRatio = usedJSHeapSize / totalJSHeapSize;

  // 当内存使用率超过90%时，触发预警上报
  if (usageRatio > 0.9) {
    // 上报到Datadog RUM
    datadogRum.addError('Memory usage critical threshold exceeded', {
      memoryUsageRatio: usageRatio.toFixed(2),
      usedJSHeapSize: formatBytes(usedJSHeapSize),
      totalJSHeapSize: formatBytes(totalJSHeapSize),
      currentUrl: window.location.href,
      lastUserAction: getLastUserAction() // 自定义函数，记录用户最后操作
    });

    // 上报到Logrocket
    LogRocket.captureMessage('Memory usage approaching crash threshold', {
      level: 'error',
      extra: {
        memoryUsageRatio: usageRatio.toFixed(2),
        usedJSHeapSize,
        totalJSHeapSize
      }
    });
  }
}, 5000);

// 辅助函数：格式化字节数为可读格式
function formatBytes(bytes) {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

2. 崩溃后回溯检测 #

利用本地存储标记页面状态，在用户刷新页面后检测是否发生过崩溃，从而上报日志：

window.addEventListener('load', () => {
  const crashMarker = localStorage.getItem('pageCrashMarker');
  if (crashMarker) {
    // 上报崩溃事件
    datadogRum.addError('Page crashed with "Aww snap"', {
      crashType: 'memory_exhaustion',
      crashTimestamp: crashMarker,
      affectedUrl: window.location.href
    });

    LogRocket.captureMessage('Page crashed: "Aww snap" error', {
      level: 'critical',
      extra: {
        crashType: 'memory_exhaustion',
        crashTimestamp: new Date(parseInt(crashMarker)).toISOString()
      }
    });

    localStorage.removeItem('pageCrashMarker');
  }

  // 设置崩溃标记
  localStorage.setItem('pageCrashMarker', Date.now().toString());
});

// 页面正常卸载时清除标记
window.addEventListener('beforeunload', () => {
  localStorage.removeItem('pageCrashMarker');
});

3. 利用日志工具的内置崩溃追踪 #

• Logrocket：默认支持捕获浏览器崩溃事件，包括"Aww snap"场景。它会通过会话重放和页面加载异常检测来关联崩溃前后的用户行为，只需确保正确初始化SDK即可。
• Datadog RUM：开启崩溃检测功能后，会自动捕获进程崩溃事件，无需额外编写上报逻辑，只需在初始化时配置好RUM参数。

关键注意事项 #

• 预报警告无法100%覆盖所有崩溃场景，但能提供崩溃前的内存状态，帮助定位内存泄漏点。
• 回溯检测依赖用户刷新页面，如果用户直接关闭标签页，无法捕获到崩溃事件。
• performance.memory仅在Chrome及基于Chromium的浏览器中可用，其他浏览器需要用替代方案（如结合自定义内存统计的性能指标）。

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