前端日志记录的核心在于捕获错误、格式化日志信息并安全上报。1.使用window.onError、try…catch和unhandledrejection捕获全局错误、特定代码块错误及promise rejection；2.通过formatlog定义日志格式，包含时间戳、日志级别、用户信息、浏览器信息等；3.采用fetch或image beacon方式上报日志数据；4.处理敏感数据需脱敏、设置白名单、传输加密、服务器端过滤及获取用户授权；5.避免日志量过大应控制日志级别、采样、批量上报、本地存储及压缩日志；6.利用performance api监控性能指标，并将其与日志关联分析问题，也可借助sentry等工具实现自动化监控。
前端日志记录，简单来说，就是把你在浏览器里遇到的问题，用代码记录下来，然后传给服务器，方便你或者你的团队排查bug。
实现前端日志记录，核心在于捕获错误、格式化日志信息、以及安全可靠地上报日志。
解决方案
-
错误捕获：
立即学习“前端免费学习笔记（深入）”；
-
window.onerror: 这个是全局的错误捕获，任何未被try…catch捕获的错误都会被这里捕获。 你可以拿到错误信息、文件名、行号等。
window.onerror = function(message, source, lineno, colno, error) { console.error('全局错误捕获:', message, source, lineno, colno, error); // 在这里可以进行日志上报 return true; // 阻止错误继续向上冒泡，避免浏览器默认行为 }; -
try…catch: 针对特定代码块，可以更精确地捕获错误。
try { // 可能会出错的代码 JSON.parse(someInvalidJson); } catch (e) { console.error('JSON解析错误:', e); // 在这里可以进行日志上报 } -
Promise rejection： 未处理的Promise rejection也会导致问题。
window.addEventListener('unhandledrejection', function(event) { console.error('未处理的Promise rejection:', event.reason, event.promise); // 在这里可以进行日志上报 });
-
-
日志格式化：
-
你需要定义一个日志格式，包含时间戳、日志级别（info, warn, error等）、用户信息（如果已登录）、浏览器信息、页面URL、错误信息等等。
function formatLog(level, message, data = {}) { return { timestamp: new Date().toISOString(), level: level, userAgent: navigator.userAgent, url: window.location.href, message: message, ...data // 其他自定义数据 }; } // 示例 const errorLog = formatLog('error', '用户点击按钮失败', { buttonId: 'myButton', userId: '123' }); console.log(errorLog);
-
-
日志上报：
-
fetch 或 XMLHttpRequest: 选择一个你喜欢的方式，把日志数据发送到服务器。
async function sendLog(logData) { try { const response = await fetch('/api/logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(logData) }); if (!response.ok) { console.error('日志上报失败:', response.status); } } catch (error) { console.error('日志上报发生异常:', error); } } // 使用示例 sendLog(errorLog); -
Image Beacon: 一种更轻量级的上报方式，通过创建一个Image对象，并设置src属性来发送数据。 这种方式不会阻塞页面加载，但数据量有限。
function sendLogWithImage(logData) { const img = new Image(); img.src = `/api/logs?data=${encodeURIComponent(JSON.stringify(logData))}`; // 注意URL长度限制 } // 使用示例 sendLogWithImage(errorLog);
-
如何处理敏感数据，避免用户信息泄露？
在日志记录中处理敏感数据是个大问题。 绝对不能直接上传用户的密码、信用卡信息等。 以下是一些建议：
-
数据脱敏： 对敏感数据进行脱敏处理。 例如，只记录用户ID，而不是用户名和密码。 对手机号、身份证号等进行部分遮蔽。
-
白名单/黑名单： 只允许记录特定类型的日志，或者禁止记录某些类型的日志。 例如，可以禁止记录包含特定关键词（如“password”）的日志。
-
传输加密： 使用https协议进行数据传输，确保数据在传输过程中不被窃取。
-
服务器端处理： 在服务器端对接收到的日志数据进行进一步的清洗和过滤，确保敏感数据不被存储。
-
用户授权： 在某些情况下，可能需要征得用户的同意才能记录他们的行为。 例如，如果需要记录用户的点击流，应该明确告知用户，并提供退出选项。
如何避免日志量过大，影响性能？
大量的日志会显著影响前端性能，并增加服务器的存储压力。 可以考虑以下策略：
-
日志级别控制： 只记录重要的日志，例如错误日志和警告日志。 可以根据环境（开发环境、测试环境、生产环境）调整日志级别。
-
采样： 只记录一部分日志。 例如，可以只记录1%的错误日志。
-
批量上报： 不要每产生一条日志就立即上报，而是将日志缓存起来，达到一定数量或时间间隔后再批量上报。 可以使用requestIdleCallback在浏览器空闲时执行上报操作。
-
本地存储： 将日志先存储在本地，例如使用localStorage或IndexedDB，然后在合适的时机上报。 这样可以避免网络不稳定导致日志丢失。
-
日志压缩： 在上报日志之前，对日志数据进行压缩，例如使用gzip算法。
如何监控前端性能指标，并将性能数据与日志关联？
除了错误日志，前端性能指标也是非常重要的信息。 可以使用Performance API来收集性能数据，例如页面加载时间、首屏渲染时间、资源加载时间等。
-
Performance API: Performance API提供了丰富的性能指标。
const performance = window.performance; if (performance) { const timing = performance.timing; const loadTime = timing.loadEventEnd - timing.navigationStart; console.log('页面加载时间:', loadTime); // 更多指标... } -
与日志关联： 将性能数据与日志关联起来，可以更方便地分析问题。 例如，可以在错误日志中包含页面加载时间等信息。
-
监控工具： 使用专业的前端监控工具，例如Sentry、Fundebug等。 这些工具可以自动收集性能数据和错误日志，并提供强大的分析功能。 很多工具也支持自定义指标上报。
