前端如何收集错误

前端收集错误的核心方法包括：使用全局错误处理器、监控网络请求、捕获资源加载错误、利用第三方错误监控工具、记录用户操作路径。 其中，使用全局错误处理器是一种非常有效的方法，它能够捕获在全局范围内未被捕获的错误，确保你不会错过任何一个未处理的异常。

使用全局错误处理器可以通过window.onerror和window.addEventListener('error', handler)来实现。这些方法允许你在错误发生时，自动记录错误信息并将其发送到服务器或错误监控工具进行进一步分析。这种方法不仅能够捕获同步代码中的错误，还能捕获异步代码中的错误，例如Promise中的未处理拒绝。

一、全局错误处理器

全局错误处理器是一种强大的工具，可以帮助开发人员捕获和处理所有未处理的错误。这不仅能够提高应用程序的稳定性，还能提供宝贵的调试信息。

1、使用window.onerror

window.onerror是一个最早被广泛使用的全局错误处理器。它可以捕获大多数类型的错误，包括运行时错误和资源加载错误。

window.onerror = function(message, source, lineno, colno, error) {
    // 记录错误信息
    console.error('Error message: ' + message);
    console.error('Source: ' + source);
    console.error('Line: ' + lineno);
    console.error('Column: ' + colno);
    console.error('Error object: ' + error);
    // 向服务器发送错误信息
    sendErrorToServer({
        message: message,
        source: source,
        lineno: lineno,
        colno: colno,
        error: error
    });
}

2、使用window.addEventListener('error')

window.addEventListener('error', handler)是另一种捕获错误的方法。与window.onerror相比，它提供了更多的定制选项和更好的兼容性。

window.addEventListener('error', function(event) {
    // 记录错误信息
    console.error('Error message: ' + event.message);
    console.error('Source: ' + event.filename);
    console.error('Line: ' + event.lineno);
    console.error('Column: ' + event.colno);
    console.error('Error object: ' + event.error);
    // 向服务器发送错误信息
    sendErrorToServer({
        message: event.message,
        source: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error
    });
});

3、捕获Promise中的未处理拒绝

在现代JavaScript应用中，Promise被广泛使用，因此捕获未处理的Promise拒绝也是非常重要的。

window.addEventListener('unhandledrejection', function(event) {
    console.error('Unhandled promise rejection: ' + event.reason);
    // 向服务器发送错误信息
    sendErrorToServer({
        message: 'Unhandled promise rejection',
        reason: event.reason
    });
});

二、监控网络请求

监控网络请求是前端错误收集的重要组成部分。它能够帮助你捕获在与服务器交互时发生的错误，例如请求失败、超时或响应状态码异常。

1、使用XMLHttpRequest

传统的AJAX请求可以通过覆盖XMLHttpRequest对象的方法来实现监控。

(function(open) {
    XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
        this.addEventListener('error', function() {
            console.error('AJAX request error: ' + url);
            sendErrorToServer({
                message: 'AJAX request error',
                url: url
            });
        });
        this.addEventListener('load', function() {
            if (this.status >= 400) {
                console.error('AJAX request failed: ' + url + ' Status: ' + this.status);
                sendErrorToServer({
                    message: 'AJAX request failed',
                    url: url,
                    status: this.status
                });
            }
        });
        open.call(this, method, url, async, user, password);
    };
})(XMLHttpRequest.prototype.open);

2、使用Fetch API

对于现代应用，Fetch API是进行网络请求的常用方法，通过在请求和响应阶段添加错误处理逻辑，可以监控Fetch请求的状态。

(function(fetch) {
    window.fetch = function() {
        return fetch.apply(this, arguments).then(response => {
            if (!response.ok) {
                console.error('Fetch request failed: ' + response.url + ' Status: ' + response.status);
                sendErrorToServer({
                    message: 'Fetch request failed',
                    url: response.url,
                    status: response.status
                });
            }
            return response;
        }).catch(error => {
            console.error('Fetch request error: ' + error);
            sendErrorToServer({
                message: 'Fetch request error',
                error: error
            });
            throw error;
        });
    };
})(window.fetch);

三、捕获资源加载错误

资源加载错误（如图片、脚本、样式表等）也是前端开发中常见的问题。通过捕获这些错误，你可以了解哪些资源未能成功加载，从而进行相应的处理。

1、监听window的error事件

通过监听window的error事件，可以捕获资源加载错误。

window.addEventListener('error', function(event) {
    if (event.target && (event.target.tagName === 'IMG' || event.target.tagName === 'SCRIPT' || event.target.tagName === 'LINK')) {
        console.error('Resource failed to load: ' + event.target.src || event.target.href);
        sendErrorToServer({
            message: 'Resource failed to load',
            src: event.target.src || event.target.href
        });
    }
}, true);

2、使用onerror属性

对于特定的资源，可以直接使用onerror属性来捕获加载错误。

<img src="image.jpg" onerror="handleResourceError('image.jpg')">
<script src="script.js" onerror="handleResourceError('script.js')"></script>
<script>
function handleResourceError(src) {
    console.error('Resource failed to load: ' + src);
    sendErrorToServer({
        message: 'Resource failed to load',
        src: src
    });
}
</script>

四、利用第三方错误监控工具

除了自行实现错误收集机制，使用成熟的第三方错误监控工具可以极大地简化错误监控的过程，并提供更为全面的分析和报告功能。

1、Sentry

Sentry是一个流行的错误监控工具，它支持多种编程语言和框架，能够捕获并报告前端和后端的错误。

// 安装Sentry
// npm install --save @sentry/browser
import * as Sentry from '@sentry/browser';
Sentry.init({ dsn: 'YOUR_DSN_URL' });
// 捕获错误
Sentry.captureException(new Error('Something went wrong'));

2、Rollbar

Rollbar是另一个强大的错误监控工具，提供实时错误报告和智能通知。

// 安装Rollbar
// npm install --save rollbar
import Rollbar from 'rollbar';
const rollbar = new Rollbar({
    accessToken: 'YOUR_ACCESS_TOKEN',
    captureUncaught: true,
    captureUnhandledRejections: true,
});
// 捕获错误
try {
    throw new Error('Something went wrong');
} catch (error) {
    rollbar.error(error);
}

五、记录用户操作路径

在某些情况下，仅仅捕获错误信息是不够的。了解用户在错误发生前的操作路径，可以帮助开发人员更好地重现和解决问题。

1、记录用户操作

通过记录用户的操作（如点击、输入等），可以重现用户的操作路径，提供更多的上下文信息。

let userActions = [];
function recordAction(action) {
    userActions.push({
        action: action,
        timestamp: new Date().toISOString()
    });
    // 如果需要，可以将操作记录发送到服务器
    sendActionsToServer(userActions);
}
document.addEventListener('click', function(event) {
    recordAction({
        type: 'click',
        target: event.target.tagName,
        x: event.clientX,
        y: event.clientY
    });
});
document.addEventListener('input', function(event) {
    recordAction({
        type: 'input',
        target: event.target.tagName,
        value: event.target.value
    });
});

2、关联错误和用户操作

在错误发生时，可以将记录的用户操作信息与错误信息关联起来，提供更为详尽的上下文。

window.addEventListener('error', function(event) {
    sendErrorToServer({
        message: event.message,
        source: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        error: event.error,
        userActions: userActions
    });
});

六、总结

前端错误收集是确保应用程序稳定性和用户体验的重要环节。通过使用全局错误处理器、监控网络请求、捕获资源加载错误、利用第三方错误监控工具和记录用户操作路径，开发人员可以全面地捕获和分析错误信息，从而快速定位和解决问题。

在实际项目中，推荐使用成熟的错误监控工具如Sentry或Rollbar，结合自定义的错误处理逻辑，确保错误收集的全面性和准确性。此外，团队协作和项目管理也是保证前端开发质量的重要一环，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，以提高团队的工作效率和项目管理水平。