js怎么实现前端日志记录 浏览器日志采集与上报

前端日志记录的核心在于捕获错误、格式化日志信息并安全上报。1.使用window.onerror、try…catch和unhandledrejection捕获全局错误、特定代码块错误及promise rejection；2.通过formatlog定义日志格式，包含时间戳、日志级别、用户信息、浏览器信息等；3.采用fetch或image beacon方式上报日志数据；4.处理敏感数据需脱敏、设置白名单、传输加密、服务器端过滤及获取用户授权；5.避免日志量过大应控制日志级别、采样、批量上报、本地存储及压缩日志；6.利用performance api监控性能指标，并将其与日志关联分析问题，也可借助sentry等工具实现自动化监控。

前端日志记录，简单来说，就是把你在浏览器里遇到的问题，用代码记录下来，然后传给服务器，方便你或者你的团队排查bug。

实现前端日志记录，核心在于捕获错误、格式化日志信息、以及安全可靠地上报日志。

解决方案

1. 错误捕获：

   立即学习“前端免费学习笔记（深入）”；

   • 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);
     // 在这里可以进行日志上报
     });

2. 日志格式化：

   • 你需要定义一个日志格式，包含时间戳、日志级别（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);

3. 日志上报：

   • 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等。 这些工具可以自动收集性能数据和错误日志，并提供强大的分析功能。 很多工具也支持自定义指标上报。