前端怎么做错误监控？

前端错误监控是确保应用稳定性和用户体验的重要手段。以下是一些常见的前端错误监控方法：

1. 捕获 JavaScript 错误

方法：

• 使用 window.onerror 事件：捕获全局 JavaScript 错误。
• 使用 window.addEventListener('error')：捕获未处理的错误和资源加载错误。
• 使用 window.addEventListener('unhandledrejection')：捕获未处理的 Promise 拒绝错误。

示例代码：

// 捕获 JavaScript 错误
window.onerror = function (message, source, lineno, colno, error) {
  console.log("Error captured:", { message, source, lineno, colno, error });
  // 发送错误信息到服务器
  sendErrorToServer({ message, source, lineno, colno, error });
  return true; // 防止浏览器默认处理
};

// 捕获未处理的 Promise 拒绝
window.addEventListener("unhandledrejection", function (event) {
  console.log("Unhandled rejection:", event.reason);
  // 发送错误信息到服务器
  sendErrorToServer({ reason: event.reason });
});

// 发送错误信息到服务器
function sendErrorToServer(error) {
  fetch("/log-error", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(error),
  });
}

2. 使用监控工具

集成专业的前端错误监控工具可以提供更多功能，如自动错误捕获、用户上下文、异常堆栈跟踪等。

常用工具：

• Sentry：提供 JavaScript 错误捕获、性能监控、用户上下文等功能。
• Rollbar：实时错误监控和日志记录，支持自定义错误报告。
• LogRocket：记录用户会话、错误和性能数据。
• New Relic：性能监控和错误捕获，集成各种前端和后端数据。

示例代码（以 Sentry 为例）：

<script src="https://browser.sentry-cdn.com/7.7.0/bundle.tracking.min.js"></script>
<script>
  Sentry.init({ dsn: "https://your-dsn@sentry.io/your-project-id" });

  // 捕获 JavaScript 错误
  try {
    // 可能抛出错误的代码
  } catch (error) {
    Sentry.captureException(error);
  }

  // 捕获 Promise 拒绝
  window.addEventListener("unhandledrejection", (event) => {
    Sentry.captureException(event.reason);
  });
</script>

3. 监控 AJAX 请求错误

方法：

• 拦截 AJAX 请求和响应：在发起请求前和收到响应后处理错误。

示例代码：

// XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
  this.addEventListener("error", function () {
    console.log("XHR error:", url);
    // 发送错误信息到服务器
    sendErrorToServer({ type: "XHR", url, status: this.status });
  });
  return originalOpen.apply(this, arguments);
};

// Fetch API
const originalFetch = window.fetch;
window.fetch = function (url, options) {
  return originalFetch(url, options).catch((error) => {
    console.log("Fetch error:", url, error);
    // 发送错误信息到服务器
    sendErrorToServer({ type: "Fetch", url, error });
    throw error; // 继续抛出错误
  });
};

4. 记录用户行为和上下文

方法：

• 记录用户操作：在发生错误时记录用户的操作历史和上下文，以便进行故障排查。
• 集成工具：使用用户行为分析工具，如 LogRocket，提供用户会话回放和上下文信息。

示例代码：

// 示例：记录用户行为
document.addEventListener("click", function (event) {
  console.log("User clicked:", event.target);
  // 发送行为数据到服务器
  sendUserActionToServer({ type: "click", target: event.target.tagName });
});