前端代码异常监控实战

示例：运行时同步错误

/*** @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对应的组件名称，定位到是哪一个组件报错；

异常上报方式

---

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

1. 通过 Ajax 发送数据

2. 动态创建 img 标签的形式

实例 - 动态创建 img 标签进行上报
function report(error) {var reportUrl = ‘http://xxxx/report’;new Image().src = reportUrl + ‘error=’ + error;}

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

vuex**

5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-JE95sH4Y-1714179899950)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-owtJYJOW-1714179899952)]