前端try catch是如何捕获异常的_一文告诉你如何优雅处理前端异常？
前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。
一、为什么要处理异常？
异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。
1.增强用户体验；
2.远程定位问题；
3.未雨绸缪，及早发现问题；
4.无法复线问题，尤其是移动端，机型，系统都是问题；
5.完善的前端方案，前端监控系统；
对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。
二、需要处理哪些异常？
对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：
- JS 语法错误、代码异常
- AJAX 请求异常
- 静态资源加载异常
- Promise 异常
- Iframe 异常
- 跨域 Script error
- 崩溃和卡顿
下面我会针对每种具体情况来说明如何处理这些异常。
三、Try-Catch 的误区
try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。
1.同步运行时错误：
try { let name = 'jartto'; console.log(nam); } catch(e) { console.log('捕获到异常：',e); } 输出：
捕获到异常： ReferenceError: nam is not defined at :3:15 2.不能捕获到语法错误，我们修改一下代码，删掉一个单引号：
try { let name = 'jartto; console.log(nam); } catch(e) { console.log('捕获到异常：',e); } 输出：
Uncaught SyntaxError: Invalid or unexpected token 不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。
3.异步错误
try { setTimeout(() => { undefined.map(v => v); }, 1000) } catch(e) { console.log('捕获到异常：',e); } 我们看看日志：
Uncaught TypeError: Cannot read property 'map' of undefined at setTimeout (:3:11) 并没有捕获到异常，这是需要我们特别注意的地方。
四、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}); } 1.首先试试同步运行时错误
window.onerror = function(message, source, lineno, colno, error) { // message：错误信息(字符串)。 // source：发生错误的脚本URL(字符串) // lineno：发生错误的行号(数字) // colno：发生错误的列号(数字) // error：Error对象(对象) console.log('捕获到异常：',{message, source, lineno, colno, error}); } Jartto; 可以看到，我们捕获到了异常：
2.再试试语法错误呢？
window.onerror = function(message, source, lineno, colno, error) { console.log('捕获到异常：',{message, source, lineno, colno, error}); } let name = 'Jartto 控制台打印出了这样的异常：
Uncaught SyntaxError: Invalid or unexpected token 什么，竟然没有捕获到语法错误？
3.怀着忐忑的心，我们最后来试试异步运行时错误：
window.onerror = function(message, source, lineno, colno, error) { console.log('捕获到异常：',{message, source, lineno, colno, error}); } setTimeout(() => { Jartto; }); 控制台输出了：
捕获到异常： {message: "Uncaught ReferenceError: Jartto is not defined相关文章：
区块链热度不断，那么究竟是泡沫还是未来？
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 区块链究竟是泡沫还是未来，需要落脚到实际运用中去判断。区块链区别于传统服务器，其宗旨不是为现实世界带来某个特定的产品&…
集成 Kendo UI for Angular 2 控件
伴随着 Angular 2 的正式 release，Kendo UI for Angular 2 的第一批控件已经发布了，当前是 Beta 版本，免费使用。 官方站点：Kendo UI for Angular 2 Kendo UI for Angular 被打包成独立的多个 NPM package，在 Progres…
按钮垂直居中_带下拉按钮的动态图表
小伙伴们好啊，今天和大家一起分享一个图表制作的技巧，先来看看效果：这个图表里，其实有三个数据系列，分别是一深一浅两个颜色的条形图，再就是大大的圆圈儿，其实是用散点图模拟出来的。先来看数据…
第一周Access课总结
第一周Access课总结 1：这节课学到了什么？ 这节课重点学了数据库是用来干什么 做什么的 老师怕我们理解不了 用了很长时间向我们举了很多的例子 让我们终于知道了数据库是用来干嘛的了 顾名思义 数据库就是存放数据的仓库 是长期存放在计算机内 有组织…
以太坊，EOS和其他DApps的总数达到2,432，但没有大规模采用
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 根据分散应用监测网站StateOfTheDApps，每月创建的新DApps数量的最高水平是2018年12月。去年最后一个月共有179个新的DApps上线。 以太…
docker logstash_用于监视Kubernetes和Docker的六大开源工具
Kubernetes和Docker是在DevOps圈中最常听到的两个词。Docker是一个工具，它使你能够以容器化的方式运行应用程序，Kubernetes是一个用于编排、管理容器的平台——如果你想使用Docker CLI去手动地管理数千个容器，这是不切实际的。然而࿰…
大道至简第一章读后感
当今社会，信息化飞速发展，软件的需求也越来越高，而《大道至简》给我们点透了编程的精义。 大道至简第一是讲的便是编程的精义，文章借愚公移山这个故事来阐释编程的基本思路：出现一个问题（惩山北之塞&#x…
nginx resolver 指令的使用
官方解释下就是：反向代理的场景，upstream后端用域名时，配置resolver以便于nginx能够解析该域名 Configures name servers used to resolve names of upstream servers into addresses 官网地址：http://nginx.org/en/docs/http/ngx…
以太坊和EOS DApp数量上升
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 目前，在最受欢迎的智能合约平台以太坊和EOS上，每月大约有180个新的去中心化应用程序(DApps)，该数量处于历史最高…
转载iOS开发中常见的警告及错误
iOS警告收录及科学快速的消除方法 前言：现在你维护的项目有多少警告？看着几百条警告觉得心里烦么？你真的觉得警告又不是错误可以完全不管么？ 如果你也被这些问题困惑，可以和我一起进行下面的操作。其实大部分的警告都是…
数学思想 —— 低维与高维的统一
在平面几何有勾股定理：“假设三角形ABC的两边AB、AC互相垂直，则有关系： AB2AC2BC2当我们拓展到空间，类比平面几何的勾股定理并研究三棱锥的侧面面积与底面面积的关系时，我们可得到相应结论：假设三棱锥A-BCD…
python键_在Python中创建键命令
我正在根据我在网上找到的一个脚本编写我自己的简单键记录器。但是，我正在尝试编写一个键命令，以便在键入此命令时记录器程序将关闭。我该怎么做？（我也知道它一点也不安全，但这与这个程序无关） 例如&#x…
对标以太坊的EOS再火，也拼不过InterValue的区块链4.0
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 2017年6月26日上线的数字货币EOS，仅用5天时间，就融了1.85亿美元，一举打破ICO的融资记录。 至2018年4月12日&a…
python中ttk和tkinter_Python tkinter与ttk日历
我正在使用 this代码在我的Tkinter上创建一个简单的日历.当我在主根窗口上放置日历时,日历显示正常.因此,我决定放置另一个按钮,它将创建一个Tkinter顶层窗口并在顶层窗口上放置另外一个日历.但这次它无法显示日历,而是它给了我这个错误,“TclError：无法打包. 18913…
Ubuntu dns
在Ubuntu系统网络设备启动的流程中，会依赖/etc/network/interface的配置文件初始化网络接口，所以直接在/etc/network/interface之中配置好对应的dns服务器会最先写入/etc/resolv.conf。所以我们可以在其中添加如下内容： dns-nameserve…
web图片识别
<!doctype html><html lang"en"><head> <meta charset"UTF-8"> <title>图像识别</title> <script src"../js/jquery.js"></script></head><body><canvas id"canv…
通俗易懂，到底什么是区块链？
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 2017年9月4日，中国政府正式明令禁止ICO和数字货币交易行为，随即关闭了多个数字货币交易所。同时政府也多次声明࿰…
select三级联动 怎么删除前一个的_python测试开发django57.xadmin选项二级联动
前言当我们选择项目分类的时候，一个项目下关联多个模块，同时有这两个选项框的时候，需要实现选中一个项目，模块里面自动删除出该项目下的模块，如下图这种解决基本思路：1.写个jqeury脚本监听change事件2.ajax…
安装wdcp的方法和bug
1.Wdcp安装SSH登录系统,这里讲解源码编译安装和RPM包安装两种 a.源码编译安装 下载源码包wget http://dl.wdlinux.cn:5180/lanmp_laster.tar.gz 解压并安装 tar zxvf lanmp_laster.tar.gz sh in.sh linux安装wdcp之后mysql找不到my.cnf，locate my-medium.cnf。 cp /…
第七周读书笔记
《深入理解计算机系统》从程序设计与性能优化的角度介绍了计算机系统，让我从程序员的角度了解了计算机系统，更深入地理解了硬件、操作系统和编译系统等对应用程序性能和正确性的影响，并掌握了基本的程序优化设计技术，为编写更高效…
是什么限制了区块链技术的应用？
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 2017年已经匆匆离去，回顾过去一整年，似乎区块链应用一直处于隐忍未发的状态，很多项目的落地已处于验证阶段&…
软件包管理（rpmyum）
一、rpm包管理器 rpm是一个功能强大的包管理工具，可用于构建，安装，查询，验证，更新和卸载软件包。 用法： rpm [OPTION...] 配置文件： /var/lib/rpm/ 已安装rpm包的元数据 选项： -i&am…
python yield理解_对Python中Yield的理解
看到下面这段程序的时候，有点不明白这个yield到底是个啥东西，看了网上很多的博客，大致理解了yield的含义，所以记录下来。要说yield首先要说python中的生成器，那么什么是生成器?假设有一个包含一百万个元素的列表&…
Linux下文件的三种时间戳
Linux下文件的三种时间标记 三种时间对应关系表 columncolumncolumn访问时间Accessatime修改时间Modifymtime状态改动时间Changectime如何查看文件文件的三种时间戳 stat filename 三种时间戳的解释 访问时间：读一次文件的内容，这个时间就会更新。比如mo…
比特币和以太坊本质有什么区别？
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 14年的时候，币圈 （当时还没有链圈之说，链圈应该是17年的事情了，区块链概念的流行是15年底…
HDU1402（FFT入门）
题目链接：http://acm.hdu.edu.cn/status.php?userReykjavik11207&pid1402&status5 本题数据范围为5e4，常规方法O(n2)肯定是不行的。 FFT是离散傅里叶变换DFT的快速形式 对多项式f(x) a0 a1x a2x2 an-1xn-1，有两种表示法&#x…
python怎么读_如何用Python读写文件
前面我们已经介绍了很多Python相关的基础知识，大家是不是对Python已经有了进一步认识了呢？作为人工智能时代的热门编程语言，开始接触并学习Python的孩子越来越多，家长们都不想让自己的孩子落于人后，近期前来找陈老师咨…
什么是区块链智能合约？
链客，专为开发者而生，有问必答！ 此文章来自区块链技术社区，未经允许拒绝转载。 自从2009年第一枚比特币诞生，九年多时间里，区块链技术正在被应用在人们生活的各方各面，从1.0时代的数字货币&…
python数据分析基础 余本国_Python数据分析基础
本书根据作者多年教学经验编写, 条理清楚, 内容深浅适中, 尽量让读者从实例出发, 结合课后练习, 少走弯路。本书涉及的内容主要包括Python数据类型与运算、流程控制及函数与类、Pandas库的数据处理与分析等。作者通过近三轮的教学，对Python3.x的基础知识进行了筛选和…
stm32F042 (二) 按键触发中断
已经实现GPIO口输出高低电平控制LED，这里实现按键触发中断来改变LED闪亮的频率，因为PB3连着LED，所以PB3的输出模式没有改变，随意选一个GPIO口PA7接按键产生中断。因为nucleo开发板是裸板，所以按键、上拉电阻是另找在面…