1. Uncaught TypeError: Cannot read property

JavaScript 开发人员最常遇到的错误。

image.png

导致原因

当读取一个属性或调用一个未定义对象的方法时，Chrome 中就会报出这样的错误。

2.TypeError: undefined is not an object (evaluating '....')

TypeError: undefined is not an object (evaluating '....')
TypeError: null is not an object (evaluating 'null.a')
在 Safari 中读取属性或调用未定义对象上的方法时发生的错误，这与 Chrome 的上述错误基本相同，只是 Safari 使用不同的错误消息。

image.png

3.(unknown): Script Error

当未捕获的 JavaScript 错误违背跨边界原则时，就会发生脚本错误。例如，如果将 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误（通过 window.onerror 处理程序发出的错误，而不是 try-catch 中捕获到的错误）将仅报告为“脚本错误”。这是浏览器的一种安全措施，主要用于防止跨域传递数据的情况出现。

要获取真实的错误消息，需要执行以下操作：

Access-Control-Allow-Origin

将 Access-Control-Allow-Origin 设置为 ，表示可以从任何域正确访问资源。 如有必要，也可以用自己的域名进行替换，例如：

Access-Control-Allow-Origin: www.example.com。

以下是在各种环境中设置的一些示例：

Apache

在 JavaScript 文件夹中，创建一个 .htaccess 文件，并包含以下内容：

Header add Access-Control-Allow-Origin "*"

Nginx

将 add_header 指令添加到提供 JavaScript 文件的 location block 中：

location ~ ^/assets/ {
    add_header Access-Control-Allow-Origin *;
}

HAProxy

将以下内容添加到提供 JavaScript 文件的静态资源配置后端：

rspadd Access-Control-Allow-Origin:\ *

在脚本标签上设置 crossorigin =“anonymous”

在你的 HTML 源代码中，为每一个脚本设置 Access-Control-Allow-Origin，在设置 SCRIPT 标签中，设置crossorigin="anonymous"。在将 crossorigin 属性添加到脚本标签之前，请确保正在向脚本文件发送 header。在 Firefox 中，如果 crossorigin 属性存在但 Access-Control-Allow-Origin 标题不存在，则脚本不会执行。

4. TypeError: Object Doesn’t Support Property

TypeError: Object Doesn’t Support Property: 当调用未定义的方法时，IE 中会发生这样的错误。
TypeError: ‘undefined’ Is Not a Function: chomre | firefox

image.png

5.Uncaught RangeError: Maximum Call Stack

这是在很多种情况，Chrome 中发生的错误，一种情况是当你调用一个不会终止的递归函数时。

image.png

6.TypeError: Cannot Read Property ‘length’

因为读取了未定义长度属性的变量。

image.png

7.Uncaught TypeError: Cannot Set Property

在 Chrome 浏览器中，如果 a 对象不存在，就会出现这种错误：

image.png

8.ReferenceError: Event Is Not Defined

尝试访问未定义的变量或当前范围之外的变量时会引发此错误。

image.png

参考文献： http://www.cnblogs.com/powertoolsteam/p/top-10-javascript-errors.html
https://dzone.com/articles/top-10-javascript-errors-from-1000-projects-and-ho-1