layui怎么实现一个轻量级的纯前端错误日志上报监控系统-Layui教程-PHP中文网

不能直接用 console.error 捕获所有错误，因为它仅输出不触发上报；需结合 window.onerror、unhandledrejection 和 document.error 三大原生钩子全覆盖错误类型。

layui怎么实现一个轻量级的纯前端错误日志上报监控系统

为什么不能直接用 `console.error` 捕获所有错误？

因为 console.error 只是输出，不触发任何上报逻辑；真正要捕获的是未处理的运行时错误、资源加载失败、Promise 拒绝这些。Layui 本身不提供全局错误监听机制，得靠原生 API 补齐：

window.onerror 能捕获同步 JS 错误（含脚本 URL、行号、列号）
window.addEventListener('unhandledrejection') 必须加，否则 fetch 或 axios 抛出的 Promise 拒绝会被静默吞掉
document.addEventListener('error') 捕获图片、CSS、JS 资源加载失败（注意：它会冒泡，且 event.target 可能是或）

这三个钩子缺一不可，否则日志漏报率极高——尤其在 Layui 配合动态加载模块（如 layui.use(['table', 'form'])）时，异步模块加载失败就只能靠 document.error 捕获。

怎么把错误数据压缩后发到后端而不阻塞页面？

前端上报最怕同步 XHR 或 fetch 等待响应，一旦后端慢或挂了，用户操作直接卡住。必须用「发送即弃」策略：

用 navigator.sendBeacon() 发送，它不等待响应、支持跨域、兼容性到 Chrome 39+/Firefox 31+（IE 不支持，需降级）
数据先 JSON 序列化，再用 JSON.stringify() + encodeURIComponent() 编码，避免特殊字符破坏 URL
关键字段只保留必要信息：message、url、line、col、stack（截断前 200 字）、ua、timestamp、page（location.pathname）
对 stack 做清洗：去掉本地文件路径（如 file:///）、过滤 Layui 内部堆栈（正则匹配 /layui.js/ 或 /lay/modules/）减少噪音

示例上报代码片段：

const reportError = (data) => {
  const payload = encodeURIComponent(JSON.stringify({
    message: data.message,
    url: location.href,
    line: data.lineNumber,
    col: data.columnNumber,
    stack: (data.error?.stack || '').slice(0, 200).replace(/file:///[^\n]+/g, ''),
    ua: navigator.userAgent,
    page: location.pathname,
    timestamp: Date.now()
  }));
  // sendBeacon 兼容性 fallback
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/log/error', payload);
  } else {
    fetch('/api/log/error', {
      method: 'POST',
      body: payload,
      keepalive: true // 防止页面卸载中断
    });
  }
};

如何防止重复上报和刷量攻击？

用户狂点 F5、脚本反复报错、甚至恶意脚本模拟错误，都会导致日志爆炸。必须在前端做轻量限流：

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

用 localStorage 记录最近 10 秒内同错误消息（message + line）的上报次数，超 3 次就丢弃
对 unhandledrejection 单独计数，因为它的 reason 可能是字符串或 Error 对象，统一转成 reason.toString() 再哈希比对
禁止上报来自 localhost 或 127.0.0.1 的请求（开发环境跳过）
加一个简单指纹：取 screen.width + screen.height + navigator.platform 拼接后取前 8 位，服务端可用来聚类同一设备

注意：别用时间戳做唯一 ID，因为多个错误可能在同一毫秒发生；也别依赖 Math.random()，它不可重现，不利于去重。

Layui 组件内部错误怎么捞？

Layui 的 table、upload、carousel 等组件出错时，往往不会抛到全局，而是静默失败或只调 console.error。这时得主动打补丁：

重写 layui.table.config.error 回调（如果存在），把参数透传给 reportError
对 layui.upload，在 done 和 error 回调里手动捕获 response 异常状态码（如 401、500）并上报
拦截 layui.element.init 后的 DOM 渲染异常：用 MutationObserver 监听 .layui-table 或 .layui-upload-list 是否出现 layui-hide 但内容为空，视为初始化失败