来自早读君：

上周分享如何收集前端bug，今天就来看看怪异js如何修复。上周在某个项目中就有报下面某个类型的bug，用onerror妥妥的。

正文从这开始～

调试 JavaScript 也许是一场噩梦：一些错误非常难理解，并且给出的错误行号并不是总是很有帮助。如果有一个列表，列举这些错误的意思和如何修复它们，将对我们非常有帮助。

本文列举了 JavaScript 中一些奇怪的错误。对于相同的错误不同的浏览器可能给出不同的提示，所以分别给出了不同的例子。

如何阅读错误

进入正题之前，我们先快速分析一下错误消息的结构，这对我们理解错误消息非常有用，同时也将有助于你理解那些没有在本文中列举的错误。

Chrome 中一个典型的错误看起来像这样：

Uncaught TypeError: undefined is not a function

该错误的结构如下：

1）Uncaught TypeError: 该部分并不是很有用。Uncaught 表示该错误没有被 catch 语句捕获，TypeError 是错误名。

2）undefined is not a function: 是消息体，需要从字面上理解。例如本例中，它的字面意思是，代码尝试将 undefined 当作函数使用。

其他基于 webkit 的浏览器，比如 Safari，错误消息与 Chrome 基本一样。Firefox 的错误消息与上面非常相似，但并不总是都包含第一部分，最近版本的 IE 的错误消息也比 Chrome 的简单，但在这里，更简单并不意味着更好。

下面看看我们经常会遇到的一些错误。

Uncaught TypeError: undefined is not a function

同类错误：

1）number is not a function

2）object is not a function

3）string is not a function

4）Unhandled Error: ‘foo’is not a function

5）Function Expected

尝试将一个值（value）当作函数使用，但该值并不是一个函数。例如：

这个错误很常见，当调用对象中的一个方法，但写错了方法名：

访问对象中不存在的属性时将返回 undefined，上面代码就将出现该错误。

其他类似的错误，比如“number is not a function”发生在尝试将一个 Number 当作函数使用时。

如何修复：确保函数名正确。对于该错误，行号通常准确地指向了错误发生的位置。

Uncaught ReferenceError: Invalid left-hand side inassignment

同类错误：

Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’

Uncaught exception: ReferenceError: Cannot assign to ‘this’

当尝试给一个不能被赋值的变量赋值时将发生该错误。看下面的典型例子：

在上面例子中，开发人员不小心将 == 写成了 =，错误消息“left-hand side in assignment”指等号左边包含不能被赋值的变量。

如何修复：确保不给函数函数的返回值或 this 关键字赋值。

Uncaught TypeError: Converting circular structure toJSON

同类错误：

1）Uncaught exception: TypeError: JSON.stringify: Not anacyclic Object

2）TypeError: cyclic object value

3）Circular reference in value argument not supported

该错误总是发生在使用 JSON.stringify 序列化一个存在循环引用的对象时。

由于上面 a 和 b 两个对象都彼此相互引用，结果导致对象不能被转换为 JSON 字符串。

如何修复：移除将要被转换为 JSON 字符串对象内部的循环引用。

Unexpected token ;

同类错误：

1）Expected )

2）missing ) after argument list

通常发生在缺少括号或分号时。

该错误中所谓的符号（token）可以多种多样，如“Unexpected token ]”或“Expected {”等等。

如何修复：该错误提示的行号有时并不能指向正确的位置，这增加了修复难度。

错误信息中包含“[ ] { } ( )”时，通常是因为缺少配对的部分，检查所有括号，保证都是配对的。这种情况下，行号通常指向了其他位置，问不是错误的位置。

异常的 / 和正则表达式有关，行号指向了正确的位置。

异常的 ; 通常发生在对象、数组或函数调用时参数列表内部包含 ;，行号也指向了正确的位置。

Uncaught SyntaxError: Unexpected token ILLEGAL

同类错误：

1）Unterminated String Literal

2）Invalid Line Terminator

3）字符串字面量缺少闭合的引号。

如何修复：确保所有字符串都包含闭合的引号。

Uncaught TypeError: Cannot read property ‘foo’of null, Uncaught TypeError: Cannot read property ‘foo’of undefined

同类错误：

1）TypeError: someVal is null

2）Unable to get property ‘foo’of undefined or null reference

尝试将 null 过 undefined 作为一个对象使用，例如：

如何修复：通常是由于书写失误导致，确保错误提示的行号附近的变量都是书写正确的。

Uncaught TypeError: Cannot set property ‘foo’of null, Uncaught TypeError: Cannot set property ‘foo’of undefined

同类错误：

1）TypeError: someVal is undefined

2）Unable to set property ‘foo’of undefined or null reference

尝试为值为 null 或 undefined 的对象的属性赋值。

如何修复：这也通常是由于书写错误导致，检查错误提示的行号附近的变量名是否正确。

Uncaught RangeError: Maximum call stack size exceeded

同类错误：

1）Uncaught exception: RangeError: Maximum recursiondepth exceeded

2）too much recursion

3）Stack overflow

通常是由程序逻辑问题，导致了无限递归的函数调用。

如何修复：检查函数的递归调用，确保函数不是无限递归的。

Uncaught URIError: URI malformed

同类错误：URIError: malformed URIsequence

无效的 decodeURIComponent 调用将导致该错误。

如何修复：确保行号所指位置的 decodeURIComponent 调用的参数正确。

XMLHttpRequest cannot load http://some/url/. No ‘Access-Control-Allow-Origin’header is present on the requested resource

同类错误：

Cross-Origin RequestBlocked: The Same Origin Policy disallows reading the remote resource at http://some/url/

该错误总是由使用 XMLHttpRequest 时导致。

如何修复：确保请求的 url 满足同源策略。

InvalidStateError: An attempt was made to use anobject that is not, or is no longer, usable

同类错误：

1）InvalidStateError

2）DOMException code 11

该错误表示调用对象的方法时，对象的状态不对。在使用 XMLHttpRequest 时，在其准备好之前尝试调用其中的方法将导致该错误。

上例中将导致错误，因为 setRequestHeader 方法只能在 xhr.open 之后调用。

如何修复：检查行号指示的位置，确保代码运行在合适的时间，或在这之前添加必要的函数调用（比如xhr.open）。

来自早读君：

这些运用错误收集排查就很方便定位拉～

长按图片识别图中二维码