浏览器监听错误发送给后端

2023-11-01 21:07:21

前言

Web应用程序在浏览器中运行时，不可避免地会出现各种错误。这些错误可能源于多种因素，包括脚本错误、网络问题或服务器端故障。为了确保应用程序的稳定性和用户体验的流畅性，捕获和处理这些错误至关重要。本文将探讨如何在浏览器中监听错误并将其发送到后端，以实现有效的错误报告和故障排除。

监听浏览器错误

window.onerror

window.onerror 是一个全局事件处理程序，用于捕获未处理的 JavaScript 错误。它会在页面上发生 JavaScript 错误时触发，提供错误信息、堆栈跟踪和事件对象。

语法：

window.onerror = function(message, source, lineno, colno, error) {
  // 处理错误信息
};

window.addEventListener('error')

window.addEventListener('error') 允许监听窗口中的所有错误事件，包括 JavaScript 错误、图像加载错误和资源加载错误。它提供了一个 Event 对象，其中包含有关错误的详细信息。

语法：

window.addEventListener('error', function(event) {
  // 处理错误信息
});

发送错误信息到后端

XMLHttpRequest

XMLHttpRequest (XHR) 可用于通过 HTTP 请求将错误信息异步发送到后端服务器。

示例：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/error-reporting');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
  message: error.message,
  stack: error.stack,
  url: window.location.href
}));

Fetch API

Fetch API 是一种现代的替代方案，用于使用 Promises 发送和处理 HTTP 请求。

示例：

fetch('https://example.com/error-reporting', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    message: error.message,
    stack: error.stack,
    url: window.location.href
  })
});