前端|前端如何监控页面异常

前端开发常见问题之一：资源异常、js异常；

页面出了问题常见的想法是：如何看到错误信息，资源脚本是否正常；

像js、css、图片这些资源文件经常受网络等原因，导致资源加载异常，这些会直接影响我们的页面；所以我们也需要有对资源加载是否正常有监控；

1.资源加载错误监控

这块主要是对资源加载错误，找不到文件或者网络原因导致资源加载超时导致的失败；

常用方法：

添加一个error监听函数捕获方法：

该方法是相对比较推荐，因为页面error监听函数可以捕获到页面所有移除信息，只需要自行获取异常信息即可；

参考一个例子


js
 代码解读
复制代码
/** * 监控页面静态资源加载报错 */ 
function loadResourceError() { 
    window.addEventListener('error', function(e) { 
        console.log(e, '错误捕获==='); 
        if(e){ 
            let target = e.target || e.srcElement; 
            let isElementTarget = target instanceof HTMLElement; 
            if (!isElementTarget) { 
                // js错误 
                console.log('js错误==='); 
                // js error处理 
                let { filename, message, lineno, colno, error} = e; 
                let { message: ErrorMsg, stack } = error; 
            }else{ 
                // 页面静态资源加载错误处理 
                console.log('资源加载错误==='); 
                let { type, timeStamp, target } = e; 
                let { localName, outerHTML, tagName, src } = target; 
                let typeName = target.localName; 
                let sourceUrl = ""; 
                if (typeName === "link") { 
                    sourceUrl = target.href; 
                } else if (typeName === "script") { 
                    sourceUrl = target.src; 
                } 
                alert('资源加载失败，请刷新页面或切换网络重试。('+sourceUrl+')') 
             } 
         } 
        // 注意：由于网络请求异常不会事件冒泡，因此必须在捕获阶段才能捕获到异常；
        // 设为true表示捕获阶段调用，会在元素的onerror前调用,在window.addEventListener('error')后调用 
       },true); 
} 
   // 我们根据e.target的属性来判断它是link标签，还是script标签。目前只关注只监控了css，js文件加载错误的情况。

运行结果

补充一个知识点：

window.addEventListener('error') 与 window.onerror 有什么区别？

‌window.addEventListener('error') 和 window.onerror 都是用来捕获全局错误的方法，但它们在使用方式、功能特性以及适用场景上有所不同。

定义：

window.onerror‌ 是一个全局事件处理函数，当有JavaScript运行时错误发生时，会自动调用该函数。它接受五个参数：错误信息（message）、发生错误的脚本URL（source）、行号（lineno）、列号（colno）和错误对象（error）。如果该函数返回true，则阻止默认的事件处理函数执行；如果返回false或不返回，错误信息会在控制台中打印‌
window.addEventListener('error') ‌ 通过事件监听的方式来捕获错误。它可以绑定多个回调函数，并且会按照顺序执行这些回调函数。与window.onerror不同，addEventListener的回调函数不会自动执行，需要显式添加。它也可以在捕获阶段捕获错误，适用于需要精确控制错误处理流程的场景‌

功能：

‌捕获错误的范围‌：window.addEventListener('error') 可以在捕获阶段捕获错误，比 window.onerror 更早触发。它不仅可以捕获js运行时错误，还可以捕获网络请求错误（如果设置为在捕获阶段执行），但无法捕获Promise相关的错误和资源加载异常‌
‌错误处理‌：window.onerror 可以接受多个参数，提供更详细的错误信息。它可以在错误发生时立即处理，但无法捕获Promise错误和资源加载异常。而 window.addEventListener('error') 可以绑定多个回调函数，提供更灵活的错误处理机制‌

使用：

‌window.onerror‌ 适用于需要立即处理全局JavaScript错误的场景，尤其是在无法使用try-catch的情况下。它适合简单的错误捕获和处理，但由于其限制，不适合复杂的错误管理和异步错误处理‌
window.addEventListener('error') ‌ 适用于需要更灵活和精确控制错误处理的场景。它适合复杂的Web应用，特别是那些需要捕获和处理多种类型错误的场景。通过在捕获阶段使用，它还可以捕获网络请求错误，但需要注意同源策略的限制‌
performance.getEntries()方法：

可以获取到当前所有加载成功的资源列表。然后在onload事件中遍历出所有资源集合。再从所有列表中过滤出成功的资源列表，剩下的就是加载失败的资源；

虽然能排查出一些加载失败的静态资源，但受到检查时机的影响，还有遇到遇到异步加载的js也没有办法处理；

看个例子


js
 代码解读
复制代码
// 浏览器获取网页时会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。而通过window.performance.getEntries方法，则可以以数组形式，返回这些请求的时间统计信息，每个数组成员均是一个PerformanceResourceTiming对象！ 
//原理是通过捕获浏览器发出的http请求信息
function performanceGetEntries(){ 
    // 判断浏览器是否支持 
    if (!window.performance && !window.performance.getEntries) { 
        return false; 
    } 

    var result = []; 
    // 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析 
    window.performance.getEntries().forEach((item) => { 
        result.push({ 
            'url': item.name, 
            'entryType': item.entryType, 
            'type': item.initiatorType, 
            'duration(ms)': item.duration 
         }); 
    }); 
    // 控制台输出统计结果 
    console.table(result); // 表示已经加载的资源  -这是加载成功的列表
    
   //一个最简单的方法是数量相差得出失败的数量
   // 然后把整个资源的数量减去已经加载好的资源，剩下的就是没有加载出来的资源的数量。 
}

运行效果

onerror 方法：

指定具体的静态资源，如某个图片元素


js
 代码解读
复制代码
图片：
let image = document.getElementByid('#img')
image.onerror = (e)=>{
    //错误信息
    console.log(e)
}

js脚本
let script = document.createElement('script');
script.onload = function() {
    console.log('脚本加载成功');
    // 脚本加载成功后的操作
};
script.onerror = function() {
    console.error('脚本加载失败');
    // 脚本加载失败后的操作
};

2. js逻辑异常

代码逻辑中

直接用try catch获取js错误信息和上报

在可能抛出异常的代码块使用try……catch结构，可以捕获并处理这些错误；


js
 代码解读
复制代码
try {
    // 尝试执行的代码
    someFunctionThatMightThrow();
} catch (error) {
    // 错误处理
    console.error('捕获到错误:', error);
    reportError(error); // 自定义的错误上报函数
}

全局错误监听

为整个JavaScript环境添加全局错误监听器，可以捕获未被捕获的异常。即 window.onerror方法，由于上面已经介绍过，这里就重复介绍；


js
 代码解读
复制代码
window.onerror = function(message, source, lineno, colno, error) {
    console.error('全局错误捕获:', message, '在', source, '行', lineno);
    reportError(message, source, lineno); // 自定义的错误上报函数
    return false; // 返回false阻止默认的错误页面显示
};

添加error监方法

使用window.addEventListener监听捕获异常，上面已经介绍过，这里就不重复介绍；


js
 代码解读
复制代码
window.addEventListener('error', function(event) {
    var message = event.message;
    var filename = event.filename || event.filename;
    var lineno = event.lineno;
    var colno = event.colno;
    var error = event.error; // Error object if available
 
    console.error('未捕获的异常:', message, '在', filename, '行', lineno);
    reportError(message, filename, lineno); // 自定义的错误上报函数
}, true); // 使用capture参数为true来捕获事件冒泡阶段的事件

使用第三方sdk

总结

前端监控页面异常设计的时候，可以考虑：1.window.addEventListener ；2.window.onerror；

都可以覆盖资源加载异常和业务逻辑异常

1.资源加载错误监控

2. js逻辑异常

总结

评论记录：