没有Beacon，你还能怎样进行前端日志上报？

前端日志上报方式五花八门

在前端应用中，为了监控其运行情况，我们需要收集错误和性能等数据，并最终将这些数据上报到服务端。虽然理论上只要能将数据发送至服务端即可，但浏览器中发送请求的方式多种多样。

以下是一些常见的发送请求的方式：

• XHR
• Fetch
• Script标签
• Image标签

XHR

XHR（XMLHttpRequest）是一种在浏览器中发送HTTP请求的API。它允许您发送GET、POST、PUT、DELETE等请求，并在请求完成后接收响应。XHR是前端开发人员常用的日志上报方式之一。

优点：

• 跨域请求：XHR支持跨域请求，这意味着您可以从一个域向另一个域发送请求。
• 进度跟踪：XHR允许您跟踪请求的进度，以便在请求完成之前显示进度条等UI元素。
• 取消请求：XHR允许您取消请求，以便在请求完成之前中止它。

缺点：

• 浏览器支持：XHR在IE8及以下浏览器中不被支持。
• 同源策略：XHR受同源策略的限制，这意味着您只能向与当前页面同源的服务器发送请求。

Fetch

Fetch是W3C标准的一个新API，它允许您在浏览器中发送HTTP请求。Fetch的语法与XHR类似，但它提供了更丰富的功能和更好的性能。

优点：

• 浏览器支持：Fetch在现代浏览器中都得到支持，包括IE11及以上。
• 跨域请求：Fetch支持跨域请求，这意味着您可以从一个域向另一个域发送请求。
• 进度跟踪：Fetch允许您跟踪请求的进度，以便在请求完成之前显示进度条等UI元素。
• 取消请求：Fetch允许您取消请求，以便在请求完成之前中止它。

缺点：

• Fetch在IE11及以下浏览器中不支持。
• Fetch受同源策略的限制，这意味着您只能向与当前页面同源的服务器发送请求。

Script标签

Script标签可以用来发送请求。当浏览器遇到Script标签时，它会向标签中指定的URL发送请求。请求完成后，浏览器会执行Script标签中的代码。

优点：

• 浏览器支持：Script标签在所有浏览器中都得到支持。
• 跨域请求：Script标签支持跨域请求，这意味着您可以从一个域向另一个域发送请求。

缺点：

• 无法跟踪请求的进度。
• 无法取消请求。

Image标签

Image标签也可以用来发送请求。当浏览器遇到Image标签时，它会向标签中指定的URL发送请求。请求完成后，浏览器会将图像渲染到页面中。

优点：

• 浏览器支持：Image标签在所有浏览器中都得到支持。
• 跨域请求：Image标签支持跨域请求，这意味着您可以从一个域向另一个域发送请求。

缺点：

• 无法跟踪请求的进度。
• 无法取消请求。

总结

在前端应用中，有许多方式可以发送请求，包括XHR、Fetch、Script标签和Image标签。每种方式都有其优缺点，您需要根据自己的需求选择最合适的方式。