SSE 实现日志实时监控需服务端按协议推送 JSON 日志（data: {...}），前端用 EventSource 监听 event: error-log，做 XSS 防护与滚动条数控制，并支持断线重连、状态反馈及级别/关键词过滤。
在日志实时监控系统中，用 JavaScript 的 SSE（Server-Sent Events）实现流式错误日志输出，核心是建立浏览器与服务端的单向长连接，服务端持续推送新产生的错误日志，前端即时渲染，无需轮询或 WebSocket 的双向复杂性。
服务端需按 SSE 协议格式推送日志数据
SSE 要求响应头必须包含 Content-Type: text/event-stream 和 Cache-Control: no-cache，且每条消息以 data: 开头、空行结尾。错误日志通常按行或按条推送，建议每条日志为一个独立 event：
- 每条日志封装为 JSON 字符串，通过
data: {...}发送 - 可选添加
event: error-log自定义事件类型，便于前端区分 - 保持连接活跃：服务端定期发送注释行（
:keepalive）或空 data 行防超时 - Node.js Express 示例片段：
res.writeHead(200, {<br> 'Content-Type': 'text/event-stream',<br> 'Cache-Control': 'no-cache',<br> 'Connection': 'keep-alive'<br>});<br>logStream.on('data', log => {<br> res.write(`event: error-log\ndata: ${JSON.stringify(log)}\n\n`);<br>});
前端用 EventSource 监听并安全渲染日志
JavaScript 使用 EventSource 建立连接，监听 error-log 事件，避免直接使用 message 以防混入其他事件：
- 创建实例时传入日志流接口地址，如
new EventSource('/api/logs/error/stream') - 绑定
onerror处理连接异常（自动重连机制已内置，但需判断是否永久失败） - 用
addEventListener('error-log', e => {...})解析e.data中的 JSON 日志对象 - 渲染前做 XSS 防护：不直接
innerHTML，优先用textContent或白名单过滤 HTML 标签 - 控制日志条数：只保留最近 500 条，用
Array.push()+shift()维护滚动列表
支持断线重连与连接状态反馈
网络波动或服务重启会导致连接中断，仅依赖 EventSource 默认重试（约 3s）不够友好：
立即学习“Java免费学习笔记（深入）”；
- 监听
onerror时检查eventSource.readyState：0=关闭，1=打开中，0=关闭且未重连 → 可手动调用eventSource.close(); new EventSource(...) - 在 UI 显示连接状态（如右上角小圆点：绿色=正常，橙色=重连中，红色=失败）
- 服务端可在首次连接时推送一条
event: init data: {"ts":...,"count":128}，前端据此显示“已加载最近 128 条错误”
结合日志级别与过滤提升实用性
真实场景中错误日志常混杂 warn/info，纯流式推送可能信息过载：
- 服务端支持 query 参数，如
/api/logs/error/stream?level=error&service=auth，按需过滤 - 前端提供筛选控件（如 level 下拉、关键词搜索），触发重新建立 EventSource 连接
- 对高频重复错误（如同一堆栈 10 秒内出现 5 次），服务端可聚合后推送
data: {"type":"collapsed","origin":..., "count":5,"first_ts":...}，前端展开查看细节
