10种频率最高的Javascrip错误-js教程-PHP中文网

首页

web前端

js教程

10种频率最高的Javascrip错误

小云云

Feb 09, 2018 am 10:22 AM

javascript js 错误

数据才是王道，我们收集并分析了出现频次排前 10 的 JavaScript 错误。 Rollbar 会收集每个项目的所有错误，并总结每个错误发生的次数。我们通过根据 “指纹”（rollbar 用到的一种算法，详见：https://rollbar.com/docs/grouping-algorithm/）对错误进行分组。基本上，如果第二个错误只是第一个错误的重复，我们会把两个错误分到同一组。这会给用户一个很好的概括，而不是像在日志文件中看到的那样直接一大堆让人感觉到十分压迫的 dump。

我们专注于最有可能影响您和您的用户的错误。为此，我们通过研究各种不同公司的项目集来对于错误进行排列。如果我们只查看每个错误发生的总次数，那么客户量大的的项目产生的错误可能会压倒其他错误，导致实际收集到的是与大多数读者无关的错误数据集。

以下是 JavaScript 错误 Top 10：

为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。

1. Uncaught TypeError: Cannot read property

如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。

我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

class Quiz extends Component {
 componentWillMount() {
  axios.get(&#39;/thedata&#39;).then(res => {
   this.setState({items: res.data});
  });
 }
 render() {
  return (
   <ul>
    {this.state.items.map(item =>
     <li key={item.id}>{item.name}</li>
    )}
   </ul>
  );
 }
}

登录后复制

这里有两件重要的事情要实现：

组件的状态（例如 this.state）从 undefined 开始。

当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map' of undefined”。

这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

class Quiz extends Component {
 // Added this:
 constructor(props) {
  super(props);
  // Assign state itself, and a default value for items
  this.state = {
   items: []
  };
 }
 componentWillMount() {
  axios.get(&#39;/thedata&#39;).then(res => {
   this.setState({items: res.data});
  });
 }
 render() {
  return (
   <ul>
    {this.state.items.map(item =>
     <li key={item.id}>{item.name}</li>
    )}
   </ul>
  );
 }
}

登录后复制

在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。

2. TypeError: ‘undefined' is not an object

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

3. TypeError: null is not an object

这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。要验证它们不相等，请尝试使用严格的相等运算符 ===：

在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。因为 DOM API 对于空白的对象引用返回值为 null。

任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。

在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

<script>
 function init() {
  var myButton = document.getElementById("myButton");
  var myTextfield = document.getElementById("myTextfield");
  myButton.onclick = function() {
   var userName = myTextfield.value;
  }
 }
 document.addEventListener(&#39;readystatechange&#39;, function() {
  if (document.readyState === "complete") {
   init();
  }
 });
</script>
<form>
 <input type="text" id="myTextfield" placeholder="Type your name" />
 <input type="button" id="myButton" value="Go" />
</form>

登录后复制

4. (unknown): Script error

当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。

要获得真正的错误消息，请执行以下操作：

1. 发送 ‘Access-Control-Allow-Origin' 头部

将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。在这里看到更多。

这里有一些关于如何在各种环境中设置这个头文件的例子：

Apache

在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：

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

Nginx

将 add_header 指令添加到提供 JavaScript 文件的位置块中：

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

登录后复制

HAProxy

将以下内容添加到您为 JavaScript 文件提供资源服务的后端：

rspadd Access-Control-Allow-Origin:\ *

2. 在

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信条阴影：贝壳谜语解决方案
1 周前 By DDD

R.E.P.O.如果您听不到任何人，如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

在哪里可以找到原子中的起重机控制钥匙卡
1 周前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7444

15

CakePHP 教程

1371

52

steam的账户名称是什么格式

76

11

win11激活密钥永久

38

19

NYT连接提示和答案

9

6

显示更多

Related knowledge

无法完成操作（错误0x0000771）打印机错误 Mar 16, 2024 pm 03:50 PM
如果您在使用打印机时遇到错误消息，例如操作无法完成（错误0x00000771），可能是因为打印机已断开连接。在这种情况下，您可以通过以下方法解决问题。在本文中，我们将讨论如何在Windows11/10PC上修复此问题。整个错误信息说：操作无法完成（错误0x0000771）。指定的打印机已被删除。修复WindowsPC上的0x00000771打印机错误若要修复打印机错误操作无法完成（错误0x0000771），指定的打印机已在Windows11/10PC上删除，请遵循以下解决方案：重新启动打印假脱机

 Windows沙盒启动失败-访问被拒绝 Feb 19, 2024 pm 01:00 PM
Windows沙盒是否终止，并显示Windows沙盒无法启动，错误0x80070005，拒绝访问消息？一些用户报告说，Windows沙盒无法打开。如果您也遇到此错误，您可以按照本指南进行修复。Windows沙盒启动失败-访问被拒绝如果Windows沙盒终止，并显示Windows沙盒无法启动，错误0x80070005，拒绝访问消息，请确保您以管理员身份登录。此类错误通常是由于权限不足引起的。因此，请尝试以管理员身份登录并查看是否解决问题。如果问题仍然存在，可以尝试以下解决方案：以管理员身份运行Wi

揭秘HTTP状态码460的出现原因 Feb 19, 2024 pm 08:30 PM
解密HTTP状态码460：为什么会出现这个错误？引言：在日常的网络使用中，经常会遇到各种各样的错误提示，其中包括HTTP状态码。这些状态码是HTTP协议定义的一种机制，用于指示请求的处理情况。在这些状态码中，有一种比较罕见的错误码，即460。本文将深入探讨这个错误码，并解释为什么会出现这个错误。HTTP状态码460的定义：首先，我们需要了解HTTP状态码的基

 Windows Update 更新提示Error 0x8024401c错误的解决方法 Jun 08, 2024 pm 12:18 PM
目录解决方法一解决方法二一、删除Windows更新的临时文件二、修复受损的系统文件三、查看并修改注册表项四、关闭网卡IPv6五、运行WindowsUpdateTroubleshootor工具进行修复六、关闭防火墙和其它相关的杀毒软件。七、关闭WidowsUpdate服务。解决方法三解决方法四华为计算机Windows更新出现“0x8024401c”报错问题现象问题原因解决方案仍未解决？最近web服务器因为系统漏洞需要更新，登录服务器之后，更新提示错误代码0x8024401c解决方法一

 服务器在创建新的虚拟机时遇到错误，0x80070003 Feb 19, 2024 pm 02:30 PM
在使用Hyper-V创建或启动虚拟机时，如果遇到错误代码0x80070003，可能是由于权限问题、文件损坏或配置错误造成的。解决方法包括检查文件权限、修复损坏文件、确保正确配置等。可通过逐一排除不同可能性来解决此问题。整个错误消息如下所示：服务器在创建[虚拟机名]时遇到错误。无法创建新的虚拟机。无法访问配置存储：系统找不到指定的路径。(0x80070003)。导致此错误的一些可能原因包括：虚拟机文件已损坏。这可能是由于恶意软件、病毒或广告软件攻击而发生的。虽然发生这种情况的可能性很低，但你不能完

 修复先锋错误代码Kadena-Keesler Feb 19, 2024 pm 02:20 PM
如果你在玩《使命召唤：先锋》时遇到了Kadena-Keesler错误，这篇文章可能会对你有所帮助。根据一些玩家的反馈，游戏在WindowsPC、Xbox和PlayStation等平台上都存在这个问题。触发后，您可能会收到以下错误消息：连接失败没有网络连接失败。您必须有活动的网络连接才能在线或通过本地网络进行游戏。[原因：Kadena-Keesler]您还可能收到以下错误消息：连接失败无法访问在线服务。[原因：Kadena-Keesler]此错误在Xbox上的另一个实例如下：您必须有活动的网络连接

 推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

 解决代码0xc000007b错误 Feb 18, 2024 pm 07:34 PM
终止代码0xc000007b在使用电脑时，有时会遇到各种各样的问题和错误代码。其中，终止代码最为令人困扰，尤其是终止代码0xc000007b。这个代码表示某个应用程序无法正常启动，给用户带来了不便。首先，我们来了解一下终止代码0xc000007b的含义。这个代码是Windows操作系统的错误代码，通常发生在32位应用程序尝试在64位操作系统上运行时。它表示应

See all articles