JS 移动端日志收集 - 在真机环境下捕获与上报异常信息的方法

JS移动端日志收集在真机环境下捕获与上报异常信息，需通过全局错误监听、上下文收集、异步上报及可靠性优化策略实现高效问题定位。 以下是具体方法与关键步骤：

1. 同步错误捕获

   window.onerror：捕获语法错误、引用错误等同步运行时错误，获取错误消息、URL、行号、列号及Error对象（含堆栈信息）。

   try...catch：针对特定同步代码块（如函数内部）进行精细错误处理，记录局部状态或执行恢复逻辑。

2. 异步错误捕获

   unhandledrejection事件：监听未处理的Promise拒绝，获取被拒绝的Promise及原因，避免异步错误静默失败。

   资源加载错误：通过<img>/<script>标签的onerror属性或window.addEventListener('error', (event) => { if (event.target instanceof HTMLScriptElement) {...} })捕获图片、脚本等资源加载失败。

3. 跨域错误处理

   若脚本跨域且未返回CORS头，onerror仅能获取Script error。需通过crossorigin="anonymous"属性及服务端配置CORS头，或通过try...catch包裹动态加载脚本的代码捕获完整错误。

1. 设备信息

   基础信息：通过navigator.userAgent获取浏览器/设备类型，结合navigator.hardwareConcurrency（CPU核心数）、screen.width/height（分辨率）等增强设备识别。

   深度信息：在WebView中通过JS Bridge调用原生接口获取设备型号、系统版本（如Android的Build.MODEL）。

2. 网络状态

   实时状态：navigator.onLine判断是否联网，navigator.connection.effectiveType（如"4g"/"wifi"）及downlink（下行带宽）评估网络质量。

   历史记录：记录错误发生前后的网络切换事件（如Wi-Fi转4G）。

3. 页面与用户行为

   页面信息：当前URL、document.title、单页应用（SPA）的路由栈（通过路由库如Vue Router的history.state）。

   用户路径：埋点记录用户点击、滚动等交互行为，还原错误发生前的操作序列。

   用户标识：通过Cookie、LocalStorage或用户系统ID关联错误与具体用户，便于后续沟通。

4. 时间与业务数据

   时间戳：Date.now()记录错误发生时间，支持时序分析。

   业务上下文：如订单ID、商品ID等，加速问题定位（例如“订单支付失败”关联具体订单号）。

1. 上报方式选择

   fetch/XMLHttpRequest：通用异步请求，适合大多数场景。需设置Content-Type: application/json并处理跨域（CORS）。

   navigator.sendBeacon：在页面卸载（beforeunload/pagehide）时使用，确保数据在页面关闭后仍能发送，避免请求中断。

2. 数据格式与压缩

   JSON结构化：将错误信息、上下文封装为JSON，例如：

   { "error": { "message": "TypeError", "stack": "..." }, "context": { "device": "iPhone 12", "network": "4g", "url": "
   https://..."
   }, "timestamp": 1620000000000, "userId": "12345"}

   压缩传输：对大体积日志（如长堆栈）使用Gzip压缩，减少网络开销。

3. 可靠性优化策略

   本地缓存与重试：上报失败时将日志存入localStorage或IndexedDB，网络恢复后重试（如应用启动时检查未上报日志）。

   批量上报：合并短时间内多个错误为单个请求（如每5秒或累计10条上报一次），减少请求次数。

   节流与去重：对频繁触发的同类型错误（如连续点击导致的相同错误）进行节流（如1秒内只上报一次），或通过哈希堆栈去重。

4. 性能优化策略

   异步非阻塞：所有上报请求使用异步API，避免阻塞主线程。

   精简字段：仅上传必要字段（如截断长堆栈的重复部分），减少传输数据量。

   采样率控制：高流量场景下按比例采样（如10%错误上报），优先保障关键错误（如未捕获异常）的完整上报。

1. 资源限制

   轻量脚本：压缩日志收集代码（如使用Terser），避免内存占用过高。

   低功耗设计：减少频繁的网络请求，优先使用批量上报。

2. 网络多变

   离线缓存：利用localStorage存储离线日志，网络恢复后上报。

   弱网优化：通过navigator.connection.rtt（往返时间）动态调整上报策略（如高延迟时降低采样率）。

3. 设备碎片化

   兼容性测试：在主流设备（如Android/iOS各版本、主流品牌）上测试日志捕获的完整性。

   Source Map还原：部署Source Map到服务器，后端解析压缩堆栈为原始代码位置，解决混淆代码难以定位的问题。

4. 调试困难

   远程调试工具：使用Chrome DevTools的远程调试（Android）或Safari的Web Inspector（iOS）捕获真机错误。

   用户反馈集成：在日志中关联用户反馈（如用户主动上报的截图/描述），辅助复现问题。

1. 后端服务与存储

   数据库选择：Elasticsearch（快速搜索）、MongoDB（灵活文档存储）或时序数据库（如InfluxDB，适合趋势分析）。

   数据结构设计：按错误类型、设备、时间等维度分表/分索引，优化查询效率。

2. 可视化与聚合

   工具链：Kibana（Elasticsearch可视化）、Grafana（通用仪表盘）、Sentry（开箱即用的错误监控）。

   关键功能：

   错误聚合：自动合并相同堆栈的错误，统计发生频率。

   趋势分析：按时间筛选错误数量，识别新引入问题或回归。

   多维度筛选：通过设备、OS、用户ID等条件快速定位特定场景错误。

3. 告警机制

   阈值告警：对高频错误（如每分钟超过10次）或高严重性错误（如未处理的Promise拒绝）触发邮件/短信通知。

   智能告警：结合机器学习模型识别异常波动（如平时每天10次的错误突然激增至1000次）。

通过上述方法，JS移动端日志收集可在真机环境中实现高效、可靠的异常捕获与上报，结合后端分析与可视化工具，显著提升问题定位效率，最终优化产品稳定性与用户体验。