HTML笔记 ·

JavaScript异常如何处理

在前端的开发工作当中,我们对于异常的处理可能关注的不是太多,因为js有基本的异常处理能力,很多错误会直接抛出来,打开控制台就能看到。但是如果因为异常导致网站卡死,甚至崩溃无法继续进行下去,对于用户的体验是相当差的,我们应该及时的捕获这些异常,对用户进行一些简要的温馨提示,并将异常进行及时的上报,以便于快速解决。

异常出现的区域

那么一般情况下什么情况最容易出现异常呢,基本上有如下几点:

  • JS语法错误、代码异常
  • AJAX异步请求异常
  • 静态资源加载异常
  • Promise异常
  • iframe异常
  • 跨域或script异常
  • 网站崩溃和卡顿

解决方案

看了上面这么多种异常情况,我们该如何进行捕获呢?很多人第一想到的应该是try-catch捕获,但是它不是万能的,下面我们了一一说一下对于异常捕获的解决方案。

try-catch

我们首先来说一下try-catch,这个方法也是我们最常用的方法,但是它只能捕获到同步运行时的异常错误,对于语法和异步错误确实没有办法的。

  1. 先来看一下同步的异常捕获
 try {
    let name = 'oecom';
    console.log(nam);
} catch(e) {
    console.log('捕获到异常:',e);
}

上面这段代码很明显是可以捕获到异常的,异常捕获如下

  1. 再来看一下对于语法错误的异常
try {
    le name = 'oecom';
    console.log(nam);
} catch(e) {
    console.log('捕获到异常:',e);
}

我们吧let声明变量的标志写错,看看浏览器它是否会捕获到

gg了,直接抛出了红色错误

  1. 还有一个就是异步的以异常,上面我们说过他也是无法捕获的。下面例子我们采用sitTimeout的形式来模拟异步
 try {
    setTimeout(() => {
        undefined.map(v => v);
    }, 1000)
    } catch(e) {
        console.log('捕获到异常:',e);
    }


我们可以看到还是没有捕获到异常,但是我在这里有一点不明白,就是在浏览器提示error之前他打印出来了一行数字,我不理解是哪里来,如果各位知道的话感谢解答。

window.onerror

当js运行时发生错误,window会触发一个ErrorEvent接口的error时间,并执行window.onerror()。具体使用方式如下:

 /**
* @param {String} message 错误信息
* @param {String} source 出错文件
* @param {Number} lineno 行号
* @param {Number} colno 列号
* @param {Object} error Error对象(对象)
*/
window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常:',{message, source, lineno, colno, error});
}

我们不再去一一来测试了,他和try-catch的区别主要是他可以捕获异步异常,相同之处在于他们都可以捕获同步异常,不能捕获语法错误异常和静态资源加载异常。

在这我们来看一下异步的捕获吧

 window.onerror = function(message, source, lineno, colno, error) {
console.log('捕获到异常:',{message, source, lineno, colno, error});
}
setTimeout(() => {
        undefined.map(v => v);
}, 1000)


你可以发现,在上图中我执行了两次,但是第二次没有红色的错误异常,是因为window.onerror函数只有在返回true的时候,异常在不会向上抛出,否则即使是知道异常的发生,控制台还是会显示Uncaught Error:xxxx

到这里基本就清晰了:在实际的使用过程中,onerror 主要是来捕获预料之外的错误,而 try-catch 则是用来在可预见情况下监控特定的错误,两者结合使用更加高效。

window.addEventLinstener

当一项资源(如图片或脚本)加载失败,加载资源的元素会触发一个 Event 接口的 error 事件,并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window ,不过(至少在 Firefox 中)能被单一的window.addEventListener 捕获。

<script>
window.addEventListener('error', (error) => {
console.log('捕获到异常:', error);
}, true)
</script>
<img src="./oecom.png">

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

需要注意:

  • 不同浏览器下返回的 error 对象可能不同,需要注意兼容处理。
  • 需要注意避免 addEventListener 重复监听。

Promise catch捕获异常

在promise中使用catch可以非常方便的捕获到异步 error ,这个很简单。

没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到,所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。

解决方案: 为了防止有漏掉的 Promise 异常,建议在全局增加一个对 unhandledrejection 的监听,用来全局监听Uncaught Promise Error。使用方式:

window.addEventListener("unhandledrejection", function(e){
console.log(e);
});

可以发现输出结果为

为了防止有漏掉的 Promise 异常,建议在全局增加一个对 unhandledrejection 的监听,用来全局监听 Uncaught Promise Error。

补充一点:如果去掉控制台的异常显示,需要加上:

event.preventDefault();

用来阻止默认事件

VUE errorHandler

对于前端的错误处理,Vue 提供了 Vue.config.errorHandler 的错误全局收集机制,我们可以写一个全局错误处理器 GlobalHandler,在业务内处理业务内错误,其他错误直接抛出,由全局处理器处理,十分便利。

但 Vue.config.errorHandler 不支持捕获异步错误,于是对于网络请求等异步逻辑的错误我们只能主动将错误送到 GlobalHandler:

import Vue from 'vue'
//系统错误捕获
const errorHandler = (error, vm)=>{
  console.error('抛出全局异常');
  console.error(vm);
  console.error(error);

}

Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);

对于异步的情况需要自行去try-catch或自行判断捕捉,亦或者说你在VUE初始化的时候,判断函数是否是异步函数,将所有的异步函数在封装一层,调用后劫持Promise。

Vue.prototype.$await = async function(action) {
    try {
        await action();
    } catch (err) {
        // 这里是你处理错误的逻辑
        console.log("Cought Error: ", err);
    }
};

调用的时候可以采用下面的方式:

doSomething(...args) {
    this.$await(async () => {
        await asyncDealWith(...args);
    });
}

React 异常捕获

React 16 提供了一个内置函数 componentDidCatch,使用它可以非常简单的获取到 react 下的错误信息

componentDidCatch(error, info) {
console.log(error, info);
}

除此之外,我们可以了解一下:error boundary UI 的某部分引起的 JS 错误不应该破坏整个程序,为了帮 React 的使用者解决这个问题,React 16 介绍了一种关于错误边界(error boundary)的新观念。

需要注意的是: error boundaries 并不会捕捉下面这些错误。

1.事件处理器 2.异步代码 3.服务端的渲染代码 4.在 error boundaries 区域内的错误

我们来举一个小例子,在下面这个 componentDIdCatch(error,info) 里的类会变成一个 error boundary:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
logErrorToMyService(error, info);
}

render() {
    if (this.state.hasError) {
    // You can render any custom fallback UI
    return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
    }
}

然后我们像使用普通组件那样使用它:

<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

componentDidCatch() 方法像 JS 的 catch{} 模块一样工作,但是对于组件,只有 class 类型的组件(class component )可以成为一个 error boundaries 。

实际上,大多数情况下我们可以在整个程序中定义一个 error boundary 组件,之后就可以一直使用它了!

iframe 异常

对于 iframe 的异常捕获,我们还得借力 window.onerror:

<iframe src="./iframe.html" frameborder="0"></iframe>
<script>
window.frames[0].onerror = function (message, source, lineno, colno, error) {
    console.log('捕获到 iframe 异常:',{message, source, lineno, colno, error});
    return true;
};
</script>

Script Error

在单页面应用中,当我们使用script标签引入了JS文件,当该JS文件的来源域名和网页的域名不同时,这时如果该JS文件内部报错,则我们只能捕获到Script Error,而不是详细的错误信息,这是由于浏览器的跨域限制。

解决方案

  • 需要在跨域的script标签中加入crossorigin属性
  • 需要给跨域资源的服务器的response header设置允许跨域:Access-Control-Allow-Origin:*

崩溃和卡顿

卡顿也就是网页暂时响应比较慢, JS 可能无法及时执行。但崩溃就不一样了,网页都崩溃了,JS 都不运行了,还有什么办法可以监控网页的崩溃,并将网页崩溃上报呢?

崩溃和卡顿也是不可忽视的,也许会导致你的用户流失。

一种方法就是利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。

window.addEventListener('load', function () {
    sessionStorage.setItem('good_exit', 'pending');
    setInterval(function () {
        sessionStorage.setItem('time_before_crash', new Date().toString());
    }, 1000);
});

window.addEventListener('beforeunload', function () {
    sessionStorage.setItem('good_exit', 'true');
});

if(sessionStorage.getItem('good_exit') && sessionStorage.getItem('good_exit') !== 'true') {
    /*
    insert crash logging code here
    */
    alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
}

还有一种方法就是使用Service Worker,他有以下几点特点:

  • Service Worker 有自己独立的工作线程,与网页区分开,网页崩溃了,Service Worker 一般情况下不会崩溃;
  • Service Worker 生命周期一般要比网页还要长,可以用来监控网页的状态;
  • 网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW 发送消息。

但是他的兼容性并不是很乐观

上报错误

既然我们已经捕获到了异常,那就应该及时的上报,以便于尽快的解决异常。但是通过ajax来请求本身也有可能会发生异常,而且有可能会引发跨域问题,一般情况下更推荐使用动态创建 img 标签的形式进行上报,这就有点类似于埋点。

function report(error) {
    let reportUrl = 'http://jartto.wang/report';
    new Image().src = `${reportUrl}?logs=${error}`;
}

文章参考:

参与评论