怎么利用JavaScript进行前端错误监控？

try...catch

window.onerror

window.addEventListener('error', ...)

onerror

try...catch

addEventListener('error', ...)

.catch()

window.addEventListener('unhandledrejection', ...)

// 全局错误捕获
window.onerror = function(message, source, lineno, colno, error) {
    console.error('Caught by window.onerror:', { message, source, lineno, colno, error });
    // 在这里将错误信息上报到后端或监控服务
    // reportErrorToService({ type: 'js_error', ... });
    return true; // 返回true阻止浏览器默认的错误处理
};

// 更细粒度的错误捕获，可以捕获到资源加载错误等
window.addEventListener('error', function(event) {
    // 检查event.target，区分是JS错误还是资源加载错误
    if (event.error) { // JS运行时错误
        console.error('Caught by addEventListener("error"):', event.error);
        // reportErrorToService({ type: 'js_runtime_error', ... });
    } else if (event.target && event.target !== window) { // 资源加载错误
        console.error('Resource loading error:', event.target.src || event.target.href);
        // reportErrorToService({ type: 'resource_load_error', url: event.target.src || event.target.href, ... });
    }
    // 阻止浏览器默认行为
    event.preventDefault();
}, true); // 使用捕获阶段，确保能捕获到所有错误

// 捕获Promise未处理的拒绝
window.addEventListener('unhandledrejection', function(event) {
    console.error('Unhandled Promise Rejection:', event.reason);
    // reportErrorToService({ type: 'promise_rejection', reason: event.reason, ... });
    event.preventDefault(); // 阻止浏览器控制台默认打印
});

// 对于同步代码块，仍然可以使用try...catch
function riskySyncOperation() {
    try {
        // 可能会抛出错误的代码
        throw new Error('This is a synchronous error.');
    } catch (e) {
        console.error('Caught by try...catch:', e);
        // reportErrorToService({ type: 'sync_error_handled', ... });
    }
}
riskySyncOperation();

error.stack

XMLHttpRequest

fetch

try...catch

try...catch

setTimeout

Promise

.then()

.catch()

try...catch

setTimeout

try...catch

try...catch

try...catch

window.addEventListener('unhandledrejection', ...)

catch

.catch()

<img>

src

<script>

try...catch

window.addEventListener('error', ...)

event.target

event.target

<img>

Access-Control-Allow-Origin

// 捕获Promise未处理的拒绝
// 比如：
new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('Something went wrong asynchronously!'); // 这个拒绝没有被.catch()处理
    }, 100);
});

// 捕获资源加载失败
// 比如一个不存在的图片：
const img = document.createElement('img');
img.src = 'https://example.com/non-existent-image.jpg';
document.body.appendChild(img);
// 此时，如果图片加载失败，window.addEventListener('error', ...) 会捕获到

// 对于跨域脚本的错误，如果服务器没有设置CORS，可能会是"Script error."
// <script src="https://another-domain.com/bad-script.js"></script>
// 如果bad-script.js里有错误，且another-domain.com没有设置CORS头，
// window.onerror 或 addEventListener('error') 将只会得到 "Script error."

{
    "errorType": "TypeError",
    "errorMessage": "Cannot read property 'name' of undefined",
    "stackTrace": "at someFunction (http://example.com/app.js:123:45)",
    "timestamp": "2023-10-27T10:30:00Z",
    "url": "http://example.com/products/detail/123",
    "userId": "user_abc",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36",
    "breadcrumbs": [
        {"type": "navigation", "message": "/home -> /products"},
        {"type": "click", "message": "Clicked product item with id 123"},
        {"type": "api_request", "message": "GET /api/product/123 status: 200"}
    ],
    "appVersion": "1.2.0",
    ""componentState": {"productId": 123, "isLoading": false}
}