如何把浏览器端的 JavaScript 错误采集到 Kibana？

整体流程：在浏览器端用 window.onerror 和 unhandledrejection 捕获错误 → 通过 HTTP 发送到日志收集服务（如 Logstash/Fluentd）→ 写入 Elasticsearch → 在 Kibana 中查看和分析。

第一步：浏览器端捕获错误

// 捕获全局错误
window.onerror = function(message, source, lineno, colno, error) {
  sendError({
    type: 'error',
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    stack: error ? error.stack : null,
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString()
  });
};

// 捕获未处理的 Promise 拒绝
window.addEventListener('unhandledrejection', function(event) {
  sendError({
    type: 'unhandledrejection',
    message: event.reason ? event.reason.message : 'Unknown',
    stack: event.reason ? event.reason.stack : null,
    url: window.location.href,
    timestamp: new Date().toISOString()
  });
});

function sendError(data) {
  fetch('/api/log-error', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  }).catch(() => {});  // 发送失败也不影响用户
}

第二步：后端接收并写入 Elasticsearch

后端提供一个接收接口，把错误数据转发到 Logstash 或直接写入 Elasticsearch。

第三步：Kibana 中查看

在 Kibana 中创建索引模式，按错误类型、URL、时间维度分析。

观测云对照

上述方案需要自建收集管道。观测云 RUM（用户访问监测）提供了开箱即用的前端错误采集：只需在页面中引入观测云 RUM SDK，即可自动捕获 JS 错误、Promise 异常、资源加载失败，并附带用户会话、页面路径、设备信息，在观测云控制台直接分析，无需自建管道。

常见问题（FAQ）

Q：window.onerror 能捕获所有错误吗？
A：不能。跨域脚本的错误会被浏览器隐藏（只报 "Script error"），需要给 script 标签加 crossorigin 属性并让 CDN 返回 CORS 头。

Q：Source Map 怎么用？
A：压缩混淆后的代码堆栈不可读，需要上传 Source Map 到错误监控平台，还原原始代码位置。观测云 RUM 支持 Source Map 自动还原。

Q：发送错误会不会影响页面性能？
A：用 navigator.sendBeacon() 替代 fetch 更可靠（页面关闭时也能发出），且异步不阻塞页面。