一、javascript的错误类型

| SyntaxError 对象    | SyntaxError对象是解析代码时发生的语法错误。                                                                                                      | ```
// 变量名错误 var 1a; // Uncaught SyntaxError: Invalid or unexpected token  // 缺少括号 console.log 'hello'); // Uncaught SyntaxError: Unexpected string  JSON.parse('{name:xiaoming}') // SyntaxError: Unexpected token n in JSON at position 1
``` |
| ReferenceError 对象 | ReferenceError对象是引用一个不存在的变量时发生的错误。                                                                                               | ```
console.log(zzz) // Uncaught ReferenceError: zzz is not defined this = 1 // ReferenceError: Invalid left-hand side in assignment
```                                                                                                        |
| RangeError 对象     | RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。                                                  | ```
// 数组长度不得为负数 new Array(-1) // Uncaught RangeError: Invalid array length
```                                                                                                                                                                 |
| TypeError 对象      | TypeError对象是变量或参数不是预期类型时发生的错误                                                                                                    | ```
new 123 // Uncaught TypeError: number is not a func const obj = {}; obj.unknownMethod() // Uncaught TypeError: obj.unknownMethod is not a function obj = 1 // Uncaught TypeError: Assignment to constant variable.
```                      |
| URIError 对象       | URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。 | ```
decodeURI('%2') // URIError: URI malformed
```                                                                                                                                                                                              |
| EvalError 对象      | 不再使用                                                                                                                             |                                                                                                                                                                                                                                                 |

# 二、需要处理哪些异常

-   js语法错误、代码异常
-   AJAX请求异常
-   静态资源加载异常
-   Promise异常
-   Iframe异常
-   跨域Script error
-   崩溃和卡顿

# 三、处理方法

1.  try-catch：只能捕获到同步运行时错误。对异步错误无法处理，并且对语法错误（SyntaxError）也捕获不到
1.  window.onerror：能异步错误能捕获到，但是语法错误捕获不到，同时静态资源异常，接口异常都捕获不到
1.  静态资源异常可以通过window.addEventListener('error', () => {}）捕获，但是受兼容性影响
1.  Promise Catch：可以增加全局的window.addEventListener("unhandledrejection"，() => {}）方法监听。处理漏掉的没有被catch到的promise异常。
1.  vue中：Vue.config.errorHandler = () => {}
1.  react：componentDidCatch
1.  React error boundary：像组件一样使用即可，然后再componentDidCatch中根据错误渲染不同组件。

参考：[如何处理前端异常](http://jartto.wang/2018/11/20/js-exception-handling/#)