10 個最常見的 JavaScript 錯誤（以及如何避免它們）- 來自 Rollbar 1000 ...

板橋胡同37號 2020-01-29

展開全文

為了回饋我們的開發(fā)者社區(qū)，我們查看了數(shù)千個項目的數(shù)據(jù)庫，發(fā)現(xiàn)了 JavaScript 的 10 大錯誤。我們將向你展示這些錯誤的原因，以及如何防止這些錯誤發(fā)生。如果你避免了這些 “陷阱” ，這將使你成為一個更好的開發(fā)人員。

由于數(shù)據(jù)是國王，我們收集，分析并排名前十的 JavaScript 錯誤。 Rollbar 會收集每個項目的所有錯誤，并總結每個項目發(fā)生的次數(shù)。我們根據(jù) 指紋對錯誤進行分組，來做到這一點?；旧?，如果第二個錯誤只是第一個錯誤的重復，我們會把兩個錯誤分到同一組。這給用戶一個很好的概括，而不是像在日志文件中看到的那些壓迫性的一大堆垃圾描述。

我們專注于最有可能影響你和你的用戶的錯誤。為此，我們通過橫跨不同公司的項目數(shù)來排列錯誤。如果我們只查看每個錯誤發(fā)生的總次數(shù)，那么大流量的項目可能會淹沒與大多數(shù)讀者無關的錯誤的數(shù)據(jù)集。

以下是排名前 10 的 JavaScript 錯誤：

為了便于閱讀，沒有花大段的文字來描述每個錯誤。讓我們深入到每一個錯誤，來確定什么可以導致它，以及如何避免它發(fā)生。

1.Uncaught TypeError: Cannot read property

如果你是一個 JavaScript 開發(fā)人員，你可能已經(jīng)看到這個錯誤的次數(shù)比你敢承認的要多。當你讀取一個屬性或調(diào)用一個未定義的對象的方法時，這個錯誤會在 Chrome 中發(fā)生。你可以在 Chrome 開發(fā)者工具的控制臺中輕松測試。

發(fā)生這種情況的原因很多，但常見的一種情況是在渲染UI組件時不恰當?shù)爻跏蓟?state(狀態(tài))。我們來看一個在真實應用程序中如何發(fā)生的例子。我們將選擇 React，但不正確初始化的原則也適用于Angular，Vue或任何其他框架。

JavaScript 代碼:

classQuizextendsComponent{
componentWillMount() {
axios.get('/thedata').then(res => {
this.setState({items: res.data});
});
}
render() {
return(
<ul>
{this.state.items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
);
}
}

這里有兩件重要的事情要實現(xiàn)：

組件的狀態(tài)（例如 this.state）從 undefined 開始。
當您異步獲取數(shù)據(jù)時，組件在數(shù)據(jù)加載之前至少會渲染一次，而不管它是在構造函數(shù) componentWillMount 還是 componentDidMount 中獲取的。當 Quiz 第一次渲染時，this.state.items 是 undefined。這又意味著 ItemList 將 items 定義為 undefined ，并且在控制臺中出現(xiàn)錯誤 – “Uncaught TypeError: Cannot read property ‘map’ of undefined”。

這個問題很容易解決。最簡單的方法：在構造函數(shù)中用合理的默認值來初始化 state。

JavaScript 代碼:

classQuizextendsComponent{
// 添加這些代碼:
constructor(props) {
super(props);
// 分配 state(狀態(tài)) 本身，以及 items 的默認值
this.state = {
      items: []
};
}
  componentWillMount() {
    axios.get('/thedata').then(res => {
this.setState({items: res.data});
});
}
  render() {
return(
<ul>
{this.state.items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
);
}
}

你的應用中的確切代碼可能會有所不同，但是我們希望我們已經(jīng)給了你足夠的線索，來解決或避免在你的應用程序中出現(xiàn)這個問題。如果你還沒有碰到，請繼續(xù)閱讀，因為我們將在下面覆蓋更多相關錯誤的示例。

2.TypeError: ‘undefined’ is not an object (evaluating

這是在 Safari 中讀取屬性或調(diào)用未定義對象上的方法時發(fā)生的錯誤。你可以在 Safari Developer Console 中輕松測試。這與 Chrome 的上述錯誤基本相同，但 Safari 使用不同的錯誤消息。

3.TypeError: null is not an object (evaluating

這是在Safari中讀取屬性或調(diào)用空對象(null) 上的方法時發(fā)生的錯誤。您可以在 Safari Developer Console中輕松測試。

有趣的是，在 JavaScript 中，null 和 undefined 是不一樣的，這就是為什么我們看到兩個不同的錯誤信息。 undefined 通常是一個尚未分配的變量，而 null 表示該值為空。要驗證它們不相等，請嘗試使用嚴格相等運算符 === ：

在現(xiàn)實的例子中，這種錯誤可能發(fā)生的一種場景是：如果在加載元素之前嘗試在 JavaScript 中使用 DOM 元素。這是因為 DOM API 對于空白的對象引用返回 null 。

任何執(zhí)行和處理 DOM 元素的 JS 代碼都應在 DOM 元素創(chuàng)建后執(zhí)行。JS 代碼按照 HTML 中的規(guī)定從上到下進行解析。所以，如果 DOM 元素之前有一個 script 標簽， script 標簽內(nèi)的JS代碼將在瀏覽器解析 HTML 頁面時執(zhí)行。如果在加載腳本之前尚未創(chuàng)建 DOM 元素，則會出現(xiàn)此錯誤。

在這個例子中，我們可以通過添加一個事件監(jiān)聽器來解決這個問題，這個監(jiān)聽器會在頁面準備好的時候通知我們。一旦 addEventListener 被觸發(fā)，init() 方法就可以使用 DOM 元素。

HTML 代碼:

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

4.(unknown): Script error

當一個未捕獲的 JavaScript 錯誤違反了跨域策略時，就會出現(xiàn)這類腳本錯誤。例如，如果你將 JavaScript 代碼托管在 CDN 上，任何未被捕獲的錯誤（這個會冒泡到 window.onerror 處理程序，而不是在 try-catch 捕獲）將被報告為簡單的 “腳本錯誤” ，而不會包含有用的信息。這是一種瀏覽器安全措施，旨在防止跨域傳遞數(shù)據(jù)，否則將不允許進行通信。

如果你要獲取到真實的錯誤消息，請執(zhí)行以下操作：

發(fā)送 Access-Control-Allow-Origin 頭信息

將 Access-Control-Allow-Origin 頭信息設置為 * ，表示可以從任何域正確訪問資源。如有必要，您可以用你的域名替換 *，例如 Access-Control-Allow-Origin: www.example.com 。但是，處理多個域名會有些棘手，如果你使用 CDN ，由此出現(xiàn)的緩存問題可能會讓你感覺不值得付出努力。點擊這里看到更多。

下面是一些如何在不同環(huán)境中設置 Access-Control-Allow-Origin 頭信息的例子。

Apache

在 JavaScript 文件所在的文件夾中，使用以下內(nèi)容創(chuàng)建一個 .htaccess 文件：

.htaccess 代碼:

HeaderaddAccess-Control-Allow-Origin'*'

Nginx

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

Nginx 代碼:

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

HAProxy

將以下內(nèi)容添加到提供資源服務的后端，并提供 JavaScript 文件：

HAProxy 代碼:

rspadd Access-Control-Allow-Origin:\ *

在 script 標簽上設置屬性

在你的 HTML 源代碼中，對于你設置的 Access-Control-Allow-Origin 頭信息的每個腳本，在 script 標簽上設置。在添加腳本標記上的 crossorigin 屬性之前，請確保驗證上述頭信息是否正確發(fā)送。在 Firefox 中，如果存在 crossorigin 屬性，但 Access-Control-Allow-Origin 頭信息不存在，則腳本將不會執(zhí)行。

5.TypeError: Object doesn’t support property

這是你在調(diào)用未定義方法時發(fā)生在IE中的錯誤。你可以在IE開發(fā)者工具的控制臺進行測試。

這相當于 Chrome 中的錯誤：”TypeError: ‘undefined’ is not a function” 。是的，對于相同的邏輯錯誤，不同的瀏覽器可能會有不同的錯誤消息。

在使用 JavaScript 命名空間的Web應用程序中，這中錯誤對于 IE 來說是一個常見問題。在這種情況下，這種問題 99.9％是 IE 無法將當前名稱空間內(nèi)的方法綁定到 this 關鍵字。例如，如果你的 JS 命名空間 Rollbar 中有 isAwesome 方法。通常，如果你在 Rollbar 命名空間內(nèi)，則可以使用以下語法調(diào)用 isAwesome 方法：

JavaScript 代碼:

this.isAwesome();

Chrome，F(xiàn)irefox 和 Opera 會欣然地接受這個語法。 IE 則不會。因此，使用 JS 命名空間時最安全的選擇是始終以實際命名空間作為前綴。

JavaScript 代碼:

Rollbar.isAwesome();

6.TypeError: ‘undefined’ is not a function

當你調(diào)用未定義的函數(shù)時，在 Chrome 中會發(fā)生這種錯誤。你可以在 Chrome 開發(fā)者工具的控制臺和 Mozilla Firefox 開發(fā)者工具的控制臺中對此進行測試。

隨著 JavaScript 編碼技術和設計模式在這些年來越來越復雜，回調(diào)和閉包內(nèi)的自引用作用域也相應增加，這是使用 this/that 混亂的一個相當常見的原因。

考慮這個示例代碼片段：

JavaScript 代碼:

function clearBoard(){
alert('Cleared');
}
document.addEventListener('click', function(){
this.clearBoard(); // what is “this” ?
});

如果你執(zhí)行上面的代碼然后點擊頁面，會導致以下錯誤： “Uncaught TypeError: this.clearBoard is not a function”。原因是正在執(zhí)行的匿名函數(shù)在 document 上下文中，而 clearBoard 定義在 window 中。

一個傳統(tǒng)的，舊瀏覽器兼容的解決方案是簡單地將你的 this 保存在一個變量，然后該變量可以被閉包繼承。例如：

JavaScript 代碼:

varself=this;  // save reference to 'this', while it's still this!
document.addEventListener('click', function(){
self.clearBoard();
});

或者，在較新的瀏覽器中，可以使用 bind() 方法傳遞適當?shù)囊茫?/span>

JavaScript 代碼:

document.addEventListener('click',this.clearBoard.bind(this));

7.Uncaught RangeError: Maximum call stack

這是 Chrome 在一些情況下會發(fā)生的錯誤。一個情況是當你調(diào)用一個不終止的遞歸函數(shù)時。你可以在Chrome開發(fā)者工具的控制臺中進行測試。

如果你一個將值傳遞給超出范圍的函數(shù)，也可能會發(fā)生這種情況。許多函數(shù)只接受其輸入值的特定范圍的數(shù)字。
例如，Number.toExponential(digits) 和 Number.toFixed(digits) 接受0到20之間的數(shù)字，
和 Number.toPrecision(digits) 接受從1到21的數(shù)字。

此外，如果您將值傳遞給超出范圍的函數(shù)，也可能會發(fā)生這種情況。許多函數(shù)只接受其輸入值的特定范圍的數(shù)字。例如：Number.toExponential(digits) 和 Number.toFixed(digits) 接受 0 到 20 的數(shù)字，Number.toPrecision(digits) 接受 1 到 21 的數(shù)字。

JavaScript 代碼:

var a = newArray(4294967295);  //OK
var b = newArray(-1); //range error
var num = 2.555555;
document.writeln(num.toExponential(4));  //OK
document.writeln(num.toExponential(-2)); //range error!
num = 2.9999;
document.writeln(num.toFixed(2));   //OK
document.writeln(num.toFixed(25));  //range error!
num = 2.3456;
document.writeln(num.toPrecision(1));   //OK
document.writeln(num.toPrecision(22));  //range error!

8.TypeError: Cannot read property ‘length’

這是 Chrome 中發(fā)生的錯誤，因為讀取未定義變量的長度屬性。你可以在Chrome開發(fā)者工具的控制臺中進行測試。

你通常會在數(shù)組中找到定義的長度，但是如果數(shù)組未初始化或變量名隱藏在另一個上下文中，則可能會遇到此錯誤。讓我們用下面的例子來理解這個錯誤。

JavaScript 代碼:

var testArray= ['Test'];
function testFunction(testArray) {
for(var i = 0; i < testArray.length; i++) {
console.log(testArray[i]);
}
}
testFunction();

當你用參數(shù)聲明一個函數(shù)時，這些參數(shù)變成了本地參數(shù)。這意味著即使你有名稱為 testArray 的變量，函數(shù)中具有相同名稱的參數(shù)仍將被視為本地參數(shù)。

你有兩種方法可以解決這個問題：

刪除函數(shù)聲明語句中的參數(shù)（事實證明如果你想訪問那些在函數(shù)之外聲明的變量，你不需要將其作為你函數(shù)的參數(shù)傳入）：

JavaScript 代碼:

var testArray = ['Test'];
/* Precondition: defined testArray outside of a function */
function testFunction(/* No params */) {
for(var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
}
}
testFunction();

調(diào)用函數(shù)時，將我們聲明的數(shù)組傳遞給它：

JavaScript 代碼:

var testArray = ['Test'];
function testFunction(testArray) {
for(var i = 0; i < testArray.length; i++) {
console.log(testArray[i]);
}
}
testFunction(testArray);

9.Uncaught TypeError: Cannot set property

當我們嘗試訪問一個未定義的變量時，它總是返回 undefined ，我們不能獲取或設置任何 undefined 的屬性。在這種情況下，應用程序將拋出 “Uncaught TypeError cannot set property of undefined.” 錯誤。

例如，在Chrome瀏覽器中：

如果 test 對象不存在，錯誤將會拋出 “Uncaught TypeError cannot set property of undefined.” 。

10.ReferenceError: event is not defined

當你嘗試訪問未定義的變量或超出當前作用域的變量時，會引發(fā)此錯誤。你可以在Chrome瀏覽器中輕松測試。

如果你在使用事件處理時遇到這種錯誤，請確保你使用傳入的事件對象作為參數(shù)。像IE這樣的老瀏覽器提供了一個全局變量事件， Chrome 會自動將事件變量附加到處理程序。Firefox 不會自動添加它。像jQuery這樣的庫試圖規(guī)范化這種行為。不過，最佳實踐是使用傳遞到事件處理程序函數(shù)的方法。

JavaScript 代碼:

document.addEventListener('mousemove', function(event) {
  console.log(event);
})

總結

事實證明很多都是一些 null 或 undefined 錯誤。如果您使用嚴格的編譯器選項，比如 Typescript 這樣的好的靜態(tài)類型檢查系統(tǒng)可以幫助您避免它們。它可以警告你，如果一個類型是預期的，但尚未定義。

我們希望你學到了一些新的東西，并且可以避免將來出現(xiàn)這些錯誤，或者本指南幫助你解決了頭痛的問題。盡管如此，即使有最佳做法，生產(chǎn)環(huán)境中還是會出現(xiàn)意想不到的錯誤。了解影響用戶的錯誤非常重要，并有很好的工具來快速解決它們。

Rollbar 為你提供生產(chǎn)環(huán)境 JavaScript 錯誤的可視性，并為您提供更多上下文來快速解決它們。例如，它提供了額外的調(diào)試功能，例如遙測功能，可以告訴你用戶的瀏覽器發(fā)生了什么導致錯誤。這可以使在本地開發(fā)者工具的控制臺之外發(fā)現(xiàn)問題。你可以在 Rollbar 的 JavaScript 應用程序的完整功能列表中了解更多信息。