不能直接用 console.error 捕获所有错误，因为它仅输出不触发上报；需结合 window.onerror、unhandledrejection 和 document.error 三大原生钩子全覆盖错误类型。
为什么不能直接用 console.error 捕获所有错误？
因为 console.error 只是输出，不触发任何上报逻辑；真正要捕获的是未处理的运行时错误、资源加载失败、Promise 拒绝这些。Layui 本身不提供全局错误监听机制，得靠原生 API 补齐：
-
window.onerror能捕获同步 JS 错误（含脚本 URL、行号、列号） -
window.addEventListener('unhandledrejection')必须加，否则fetch或axios抛出的 Promise 拒绝会被静默吞掉 -
document.addEventListener('error')捕获图片、CSS、JS 资源加载失败（注意：它会冒泡，且 event.target 可能是<img alt="layui怎么实现一个轻量级的纯前端错误日志上报监控系统" >或<link>）
这三个钩子缺一不可，否则日志漏报率极高——尤其在 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、脚本反复报错、甚至恶意脚本模拟错误，都会导致日志爆炸。必须在前端做轻量限流：
- 用
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但内容为空，视为初始化失败
这类补丁没法覆盖全部，但能抓到高频业务错误点。真正稳定的方案，是在你自己的业务 JS 里，所有 layui.use 的回调都包一层 try/catch，并在 catch 里调 reportError。
纯前端日志系统真正的难点不在上报，而在错误归因——同一个 Cannot read property 'xxx' of undefined 在不同页面、不同 Layui 版本、不同用户行为路径下含义完全不同。所以字段设计比实现更重要，别省那几个字节。
