10种最常见的Javascript错误(频率最高)

　　

为了回馈我们的开发者社区,我们查看了数千个项目的数据库,发现了JavaScript中频度最高的10种错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些“陷阱”,你将会成为一个更好的开发者。

　　

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

　　

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

　　

以下是JavaScript错误前十名:

　　

　　

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

　　

<强> 1。未捕获TypeError:无法读取属性

　　

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

　　

　　

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

　　

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

　　 　　 　　类测试扩展组件{ 　　componentWillMount () { 　　axios.get('/数据”)。然后(res=比;{ 　　这一点。设置状态({项目:res.data}); 　　}); 　　} 　　呈现(){ 　　回报( 　　& lt; ul> 　　{this.state.items。地图(项=比; 　　& lt;李关键={item.id}在{item.name} & lt;/li> 　　)} 　　& lt;/ul> 　　); 　　} 　　} 　　 　　

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

　　

组件的状态(例如。状态)从定义开始。
　　

　　

当异步获取数据时,不管它是在构造函数componentWillMount还是componentDidMount中获取的,组件在数据加载之前至少会呈现一次,当测试第一次呈现时,this.state。项目是未定义的。这又意味着ItemList将项目定义为定义,并且在控制台中出现错误——“未捕获TypeError:不能读取属性的映射定义”。

　　

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

　　 　　 　　类测试扩展组件{//添加: 　　构造函数(道具){ 　　超级(道具);//分配状态本身,和项目的默认值 　　这一点。状态={ 　　项目:[] 　　}; 　　} 　　componentWillMount () { 　　axios.get('/数据”)。然后(res=比;{ 　　这一点。设置状态({项目:res.data}); 　　}); 　　} 　　呈现(){ 　　回报( 　　& lt; ul> 　　{this.state.items。地图(项=比; 　　& lt;李关键={item.id}在{item.name} & lt;/li> 　　)} 　　& lt;/ul> 　　); 　　} 　　} 　　 　　

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

　　

<强> 2。TypeError:‘定义’并不是一个对象

　　

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

　　

　　

<强> 3。TypeError: null不是一个对象

　　

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

10种最常见的Javascript错误(频率最高)