前端代码异常监控实战

示例：异步错误

代码

try {setTimeout(() => {error // 异步错误})} catch(e) {console.log(‘我感知不到错误’);console.log(e);}复制

除非你在 setTimeout 函数中再套上一层 try-catch，否则就无法感知到其错误，但这样代码写起来比较啰嗦。

window.onerror 异常处理

window.onerror 捕获异常能力比 try-catch 稍微强点，无论是异步还是非异步错误，onerror 都能捕获到运行时错误。

示例：运行时同步错误

/*** @param {String} msg 错误信息* @param {String} url 出错文件* @param {Number} row 行号* @param {Number} col 列号* @param {Object} error 错误详细信息*/window.onerror = function (msg, url, row, col, error) {console.log(‘我知道错误了’);console.log({msg, url, row, col, error})return true;};error;

示例：异步错误

window.onerror = function (msg, url, row, col, error) {console.log(‘我知道异步错误了’);console.log({msg, url, row, col, error})return true;};setTimeout(() => {error;});

然而 window.onerror 对于语法错误还是无能为力，所以我们在写代码的时候要尽可能避免语法错误的，不过一般这样的错误会使得整个页面崩溃，还是比较容易能够察觉到的。

在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

需要注意的是，window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示

Uncaught Error: xxxxx

。

关于 window.onerror 还有两点需要值得注意

1. 对于 onerror 这种全局捕获，最好写在所有 JS 脚本的前面，因为你无法保证你写的代码是否出错，如果写在后面，一旦发生错误的话是不会被 onerror 捕获到的。

2. 另外 onerror 是无法捕获到网络异常的错误。

当我们遇到

报 404 网络请求异常的时候，onerror 是无法帮助我们捕获到异常的。

由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。

这点知识还是需要知道，要不然用户访问网站，图片 CDN 无法服务，图片加载不出来而开发人员没有察觉就尴尬了。

Promise 错误

通过 Promise 可以帮助我们解决异步回调地狱的问题，但是一旦 Promise 实例抛出异常而你没有用 catch 去捕获的话，onerror 或 try-catch 也无能为力，无法捕捉到错误。

window.addEventListener(‘error’, (msg, url, row, col, error) => {console.log(‘我感知不到 promise 错误’);console.log(msg, url, row, col, error);}, true);Promise.reject(‘promise error’);new Promise((resolve, reject) => {reject(‘promise error’);});new Promise((resolve) => {resolve();}).then(() => {throw ‘promise error’});

虽然在写 Promise 实例的时候养成最后写上 catch 函数是个好习惯，但是代码写多了就容易糊涂，忘记写 catch。

所以如果你的应用用到很多的 Promise 实例的话，特别是你在一些基于 promise 的异步库比如 axios 等一定要小心，因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它，所以你最好添加一个 Promise 全局异常捕获事件 unhandledrejection。

window.addEventListener(“unhandledrejection”, function(e){e.preventDefault()console.log(‘我知道 promise 的错误了’);console.log(e.reason);return true;});Promise.reject(‘promise error’);new Promise((resolve, reject) => {reject(‘promise error’);});new Promise((resolve) => {resolve();}).then(() => {throw ‘promise error’});

vue项目的异常处理

---

vue提供了一个全局配置 errorHandle,，用于收集Vue运行时发生的错误。

Vue.config.errorHandler = function (err, vm, info) {

// handle error

// info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子

// 只在 2.2.0+ 可用

let componentName = formatComponentName(vm);

}

// 获取组件的名称

function formatComponentName(vm) {

if (vm.$root === vm) return ‘root’;

let name = vm._isVue

? (vm.KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& vm.options.name) ||

(vm. KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& vm.options._componentTag)

vm.name;

return (

(name ? ‘component <’ + name + ‘>’ : ‘anonymous component’) +

(vm._isVue && vm.KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& vm.options.__file

? ’ at ’ + (vm. KaTeX parse error: Expected 'EOF', got '&' at position 9: options &̲& vm.options.__file)

‘’)

);

}

拿到vue对应的实例之后，就可以获取vue对应的组件名称，定位到是哪一个组件报错；

异常上报方式

---

监控拿到报错信息之后，接下来就需要将捕捉到的错误信息发送到信息收集平台上，常用的发送形式主要有两种:

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！