【监控】日志上报的方法

日志上报的方法

相关文章

日志上报的方法

一、什么是日志上报

日志上报是指将应用程序运行过程中产生的日志信息发送到指定的位置或者服务器，以便后续进行统计、分析和监控。在前端开发中，日志上报通常用于收集客户端运行时的错误、警告、用户操作等信息，帮助开发人员及时发现和解决问题，提高应用程序的稳定性和用户体验。

二、日志上报的方式

基于Img

基于 <img> 进行日志上报是一种简单而常用的方法，它通过动态创建 <img> 元素，并将日志信息作为 URL 参数附加在图片的 src 属性中，从而实现日志数据的传输。

示例

function reportLog(logData) {
    var img = new Image();
    img.src = 'http://example.com/log.gif?' + encodeURIComponent(logData);
}

// 构造日志数据
var logData = 'timestamp=' + Date.now() + '&level=error&message=Something%20went%20wrong';

// 上报日志
reportLog(logData);

优点

跨域支持：使用 <img> 的 src 属性进行日志上报时，可以实现跨域请求，适用于将日志数据发送到不同域名的服务器。
简单易用：实现简单，无需引入额外的库或依赖，适用于简单的日志记录需求。
兼容性好：支持大多数现代浏览器，兼容性良好。

缺点

只能发送 GET 请求：由于使用的是 <img> 元素，只能发送 GET 请求，不能发送其他类型的请求。
无法获取服务器响应：因为是通过图片加载触发请求，所以无法获取服务器的响应数据。
有请求限制：在一些浏览器或环境中可能会受到请求限制，例如最大并发请求数、最大 URL 长度等。

基于Beacon

Beacon API 是 HTML5 中新增的一项 API，用于在浏览器后台发送异步请求，通常用于日志、分析和监控等场景。它具有以下特点：

// 发送日志数据到服务器端
function sendLogData(logData) {
  // 使用 Beacon API 发送 POST 请求
  navigator.sendBeacon('http://example.com/log', logData);
}

// 构造日志数据
var logData = 'timestamp=' + Date.now() + '&level=error&message=Something%20went%20wrong';

// 上报日志数据
sendLogData(logData);

优点

异步请求： Beacon API 允许在页面卸载、关闭或者刷新时发送异步请求，不会阻塞页面的卸载过程，适用于需要在页面关闭时进行后台操作的场景。
可靠性高： Beacon API 设计用于在浏览器关闭时发送请求，因此比其他方法更可靠，即使页面关闭时也可以成功发送数据，而不会因为页面关闭导致数据丢失。
支持 POST 请求： Beacon API 支持发送 POST 请求，可以携带大量的数据，并且不受浏览器 URL 长度限制。
跨域支持： Beacon API 支持跨域请求，可以将数据发送到不同域名的服务器，适用于需要将数据发送到第三方服务的场景。
自动处理超时和重试： Beacon API 会自动处理请求超时和重试，保证数据能够成功发送到服务器端。

缺点

请求处理限制：浏览器对 Beacon API 请求的处理有一定的限制，例如可能会对请求进行排队、合并或者延迟发送，以保证浏览器性能和用户体验。这可能会导致数据发送延迟或者不按预期的顺序发送。
仅限于后台发送： Beacon API 仅适用于在页面关闭时进行后台操作的场景，不能用于实时交互或者需要用户交互的场景。因此，在一些场景下可能不太适用。
不支持设置请求头： Beacon API 发送的请求不能设置请求头，因此无法在请求中携带一些自定义的信息，可能会受到一些限制。
不支持同步请求： Beacon API 只支持发送异步请求，不支持发送同步请求，因此无法在发送请求时立即获取服务器的响应数据。

喜欢这篇文章？打赏一下支持一下作者吧！