前端怎么做错误监控？

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

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 });
});

题目要点：

• 捕获 JavaScript 错误：使用 window.onerror 和 window.addEventListener 进行全局错误捕获。
• 使用专业工具：集成 Sentry、Rollbar、LogRocket 等工具提供丰富的监控功能。
• 监控 AJAX 请求错误：拦截 XMLHttpRequest 和 fetch 请求以捕获网络请求错误。
• 记录用户行为：记录用户操作和上下文，辅助排查问题。