前端开发常见问题之一： 资源异常、js异常；
页面出了问题常见的想法是：如何看到错误信息，资源脚本是否正常；
像js、css、图片这些资源文件经常受网络等原因，导致资源加载异常，这些会直接影响我们的页面； 所以我们也需要有对资源加载是否正常有监控；
1.资源加载错误监控
这块主要是对资源加载错误，找不到文件或者网络原因导致资源加载超时导致的失败；
常用方法：
- 添加一个error监听函数捕获方法：
该方法是相对比较推荐，因为页面error监听函数可以捕获到页面所有移除信息，只需要自行获取异常信息即可；
参考一个例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /** * 监控页面静态资源加载报错 */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也没有办法处理；
看个例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // 浏览器获取网页时会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个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 方法：
指定具体的静态资源，如某个图片元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 图片：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结构，可以捕获并处理这些错误；
1 2 3 4 5 6 7 8 | try { // 尝试执行的代码 someFunctionThatMightThrow();} catch (error) { // 错误处理 console.error('捕获到错误:', error); reportError(error); // 自定义的错误上报函数} |
- 全局错误监听
为整个JavaScript环境添加全局错误监听器，可以捕获未被捕获的异常。即 window.onerror方法， 由于上面已经介绍过，这里就重复介绍；
1 2 3 4 5 | window.onerror = function(message, source, lineno, colno, error) { console.error('全局错误捕获:', message, '在', source, '行', lineno); reportError(message, source, lineno); // 自定义的错误上报函数 return false; // 返回false阻止默认的错误页面显示}; |
- 添加error监方法
使用window.addEventListener监听捕获异常，上面已经介绍过，这里就不重复介绍；
1 2 3 4 5 6 7 8 9 10 | 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；
都可以覆盖资源加载异常和业务逻辑异常
到此这篇关于前端监控页面异常的常用方法的文章就介绍到这了,更多相关前端监控页面异常内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
