10个最常见的Javascript错误-总结了1000多个项目以及如何避免10种错误。我们将告诉您导致这些错误的原因以及如何防止它们发生。如果你能避免陷入这些“陷阱”，你就会成为更好的开发人员。数据为王，我们收集并分析了Top10JavaScript错误。Rollbar收集每个项目的所有错误并汇总每个错误发生的次数。我们通过根据错误的“指纹”（rollbar使用的算法，请参阅：https://rollbar.com/docs/grouping-algorithm/）对错误进行分组来做到这一点。基本上，如果第二个bug只是第一个bug的重复，我们会将这两个bug归为同一组。这将为用户提供一个很好的概览，而不是像在日志文件中看到的那样一大堆压倒性的转储。我们专注于最有可能影响您和您的用户的错误。为此，我们通过研究各个公司的程序集来对错误进行排序。如果我们只看每个错误的总发生次数，那么客户量大的项目产生的错误可能会压倒其他错误，导致实际收集到的错误数据集与大多数读者无关。以下是排名前10位的JavaScript错误：为了便于阅读，我们缩短了每个错误的描述。接下来，让我们深入研究每个错误，以确定导致错误的原因以及如何避免产生错误。1.UncaughtTypeError:Cannotreadproperty如果你是一名JavaScript开发者，你看到这个错误的次数可能比你敢承认的次数还多（哈哈……）。当您读取属性或调用未定义对象的方法时，Chrome中会出现此错误。您可以在ChromeDeveloperConsole中轻松测试（试用）。发生这种情况的原因有很多，但一个常见的原因是渲染UI组件时状态初始化不当。让我们看一个实际应用程序中发生的示例：我们选择React，但同样适用于Angular、Vue或任何其他框架。classQuizextendsComponent{componentWillMount(){axios.get('/thedata').then(res=>{this.setState({items:res.data});});}render(){return(
{this.state.items.map(item=>>{item.name})}
);}}这里有两件重要的事情要实现：组件的A状态（比如this.state）从undefined开始。异步取数据时，无论是在构造函数componentWillMount还是componentDidMount中取数据，在数据加载前组件至少渲染一次，而Quiz第一次渲染时，this.state.items是undefined。这反过来意味着ItemList将项目定义为未定义，并且我在控制台中收到错误-“未捕获的类型错误：无法读取未定义的属性‘映射’”。这很容易修复。最简单的方法：在构造函数中使用合理的默认值初始化状态。classQuizextendsComponent{//Addedthis:constructor(props){super(props);//赋值state本身，以及defaultvalueforitemsthis.state={items:[]};}componentWillMount(){axios.get('/thedata').then(res=>{this.setState({items:res.data});});}render(){return(
{this.state.items.map(item=>>{item.name})}
);}}您的应用程序中的确切代码可能不同，但我们希望我们已经为您提供了足够的线索来解决或避免应用程序中出现此问题.如果还没有，请继续阅读，因为我们将在下面介绍更多相关错误示例。2.TypeError:'undefined'isnotanobject这是在Safari中读取未定义对象的属性或调用方法时出现的错误。您可以在SafariDeveloperConsole中轻松测试它。这基本上与1中提到的Chrome错误相同，但Safari使用不同的错误消息。3.TypeError:nullisnotanobject这是在Safari中读取一个空对象的属性或调用一个方法时出现的错误。您可以在SafariDeveloperConsole中轻松测试它。有趣的是，在JavaScript中，null和undefined是不一样的，这就是为什么我们会看到两条不同的错误消息。undefined通常是尚未赋值的变量，null表示该值为空。要验证它们不相等，请尝试使用严格的相等运算符===：在真实世界的示例中，可能发生此类错误的一种情况是，如果您在加载元素之前尝试在JavaScript中使用该元素。因为DOMAPI为空对象引用返回null。任何执行和处理DOM元素的JS代码都应该在DOM元素创建之后执行。JS代码按照HTML中的规定从上到下进行解释。所以，如果DOM元素之前有标签，浏览器解析HTML页面的时候就会执行script标签里面的JS代码。如果在加载脚本之前尚未创建DOM元素，则会发生此错误。在此示例中，我们可以通过添加一个事件侦听器来解决此问题，该事件侦听器会在页面准备就绪时通知我们。一旦addEventListener被触发，init()方法就可以使用DOM元素。
4.(unknown):Scripterror当一个未捕获的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文件：HeaderaddAccess-Control-Allow-Origin"*"Nginx将add_header指令添加到提供JavaScript文件的位置块：location~^/assets/{add_headerAccess-Control-Allow-Origin*;}HAProxy将以下内容添加到提供JavaScript文件的后端：rspaddAccess-Control-Allow-Origin:\*2。在
