打造可自愈的前端稳定性监控平台——字节跳动级别的“线上守护神”

在字节跳动，一次前端异常可能意味着千万级 PV 损失。为了提升故障恢复速度、减少用户损伤，字节构建了**“实时感知 + 自动上报 + 自我修复”的一整套前端稳定性系统。本篇将带你用 Vue + Node.js 手撸一个异常采集 + 自愈机制**平台，实现从发现到修复的闭环。

---

🧠 一、前端异常都有哪些？

类型	示例
JS 错误	Uncaught TypeError、空对象访问
Promise 异常	UnhandledRejection
资源加载失败	图片、CSS、JS 加载 404/500
接口超时	API 请求失败/缓慢
页面崩溃	白屏、死循环、内存溢出

---

🚨 二、什么是“可自愈”前端监控？

传统监控只是发现问题，而自愈系统能自动响应并降级处理，如：

• 组件崩溃 → 自动隐藏组件 + 提示用户
• CDN 报错 → 自动切换备用域名
• 白屏异常 → 自动刷新页面 or 跳转容灾页
• 持续错误 → 触发告警并主动熔断该功能

---

🛠️ 三、前端异常采集 SDK（Vue3 实现）

1. 监听全局异常

window.onerror = function (msg, url, line, col, err) {
  sendError({
    type: 'js',
    msg,
    stack: err?.stack,
    url,
    line,
    col
  });
};

window.onunhandledrejection = function (e) {
  sendError({
    type: 'promise',
    msg: e.reason?.message || 'unhandled rejection',
    stack: e.reason?.stack,
  });
};

---

2. 上报接口（带重试机制）

function sendError(data, retry = 3) {
  fetch('/api/report-error', {
    method: 'POST',
    body: JSON.stringify({ ...data, time: Date.now(), ua: navigator.userAgent }),
  }).catch(() => {
    if (retry > 0) setTimeout(() => sendError(data, retry - 1), 1000);
  });
}

---

🌩️ 四、Node.js 后端异常聚合分析

1. 存储到内存 / MongoDB / ElasticSearch

app.post('/api/report-error', (req, res) => {
  const log = req.body;
  console.log('收到异常日志：', log);
  // TODO: 保存数据库、打标签、聚合处理
  res.send({ success: true });
});

---

🧬 五、自愈机制示例：自动白屏修复

1. 检测白屏逻辑（无任何元素）

function isWhiteScreen() {
  const root = document.getElementById('app');
  return root && root.innerHTML.trim() === '';
}

2. 自愈处理

if (isWhiteScreen()) {
  console.warn('白屏检测触发，正在执行容灾策略...');
  location.reload(); // or 跳转备用页
}

你也可以设置白名单 + 限流条件，避免无限刷新：

if (isWhiteScreen() && localStorage.getItem('repair') !== '1') {
  localStorage.setItem('repair', '1');
  location.href = '/safe-mode';
}

---

🧩 六、系统化构建建议

模块	设计建议
错误聚合	按错误类型 + 路径聚类（异常 hash + 分页展示）
触发阈值	某接口 10 分钟内异常 >100 次自动熔断
规则中心	后台定义“某类错误 → 自动跳转/降级”
上报性能	使用 navigator.sendBeacon 或队列批量发送
运维对接	接入飞书/钉钉机器人，支持一键通知/报警回调

---

✍️ 七、总结与思考

• 前端稳定性不只是监控，更是抗打击能力建设
• 字节跳动的稳定性平台是一个自动响应、规则驱动、低成本容错系统
• 中小团队从“异常采集 + 降级策略 + 自动熔断”三件事做起，也能构建可自愈能力

---

🎁 拓展推荐

• Sentry 开源异常平台
• 《大型前端项目架构设计实战》稳定性章节
• 字节跳动技术博客：《前端稳定性治理全景图》