JavaScript异常如何处理

OECOM

发布于 2020-07-02 11:43:30

1.6K0

发布于 2020-07-02 11:43:30

文章被收录于专栏：OECOM

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

异常出现的区域

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

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

解决方案

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

try-catch

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

先来看一下同步的异常捕获

 try {
    let name = 'oecom';
    console.log(nam);
} catch(e) {
    console.log('捕获到异常：',e);
}

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

再来看一下对于语法错误的异常

try {
    le name = 'oecom';
    console.log(nam);
} catch(e) {
    console.log('捕获到异常：',e);
}

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

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

还有一个就是异步的以异常，上面我们说过他也是无法捕获的。下面例子我们采用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}`;
}

文章参考：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-12-07，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

javascript

android

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度