1. Uncaught TypeError: Cannot read property
若是你是一個JavaScript開發者，這種錯誤大概你已經見怪不怪了。在Chrome下，當你從一個不存在的對象(undefined)獲取屬性或則進行函數調用，就會報這樣的錯。你能夠在Chrome瀏覽器控制檯測試：javascript
有不少種緣由能夠致使這種狀況的出現，一個常見的狀況是在渲染UI部件的時候，沒有正確地初始化狀態(state)。咱們來看一個真實的例子。在這裏我選用React，不過內在的原理一樣適用於Angular、Vue或則其它框架。java
2. TypeError: ‘undefined’ is not an object (evaluating
在Safari下，若是在一個未定義(undefined)的對象上讀取屬性或則調用函數，就會觸發這樣的錯誤。你能夠在Safari控制檯測試。這個錯誤根本上來講和第一個在Chrome下的錯誤是同樣的，只是錯誤的消息不一樣。git
備註：Fundebug早已機智地將這兩種狀況聚合爲一個錯誤了，更加方便分析，歡迎各位老鐵試用！設計模式
3. TypeError: null is not an object (evaluating
在Safari下，若是你嘗試從null讀取屬性或則調用方法，就會報錯。以下：跨域
有趣的是，在JavaScript中，null和undefined是不一樣的，因此咱們看到兩個不一樣的錯誤消息。Undefined指的是一個變量沒有被賦值，而null指的是值爲空。咱們能夠用===來判斷：數組
一種現實中可能的狀況就是：若是你嘗試在一個DOM元素加載以前使用它。那麼DOM API就會返回null。任何處理DOM元素的JS代碼都應當在DOM加載完畢以後調用。JS代碼是按照代碼的順序從上往下依次解釋執行。若是在DOM元素前有腳本，那麼在瀏覽器分析HTML頁面的時候，JS代碼也在執行了。若是JS代碼執行的時候，DOM尚未建立好，那麼你會遇到這個錯誤。瀏覽器
4. (unknown): Script error
當未捕獲的 JavaScript 錯誤（經過window.onerror處理程序引起的錯誤，而不是捕獲在try-catch中）被瀏覽器的跨域策略限制時，會產生這類的腳本錯誤。 例如，若是您將您的 JavaScript 代碼託管在 CDN 上，則任何未被捕獲的錯誤將被報告爲「腳本錯誤」 而不是包含有用的堆棧信息。這是一種瀏覽器安全措施，旨在防止跨域傳遞數據，不然將不容許進行通訊。安全
5. TypeError: Object doesn’t support property
在IE中，若是調用未定義的方法就會發生這種錯誤。您能夠在IE開發者控制檯中進行測試。閉包
至關於 Chrome 中的 「TypeError：」undefined「 is not a function」 錯誤。 對於相同的錯誤，不一樣的瀏覽器具備不一樣的錯誤消息。框架
在IE裏使用JavaScript的命名空間時，就很容易碰到這個錯誤。發生這個錯誤十有八九是由於IE沒法將當前命名空間裏的方法綁定到this關鍵字上。例如，假設有個命名空間Rollbar，它有一個方法叫isAwesome()。在Rollbar命名空間中，能夠直接使用this關鍵字來調用這個方法：
6. TypeError: ‘undefined’ is not a function
在Chrome下，調用一個未定義的函數時就會發生這個錯誤，能夠在Chrome/Mozilla開發者控制檯測試：
隨着js代碼的編碼技巧和設計模式愈來愈複雜，在回調函數、閉包等各類做用域中this的指向的層級也隨之增長，這就是js代碼中this/that指向容易混淆的緣由。
好比下面這段代碼：
執行上面的代碼會報錯：「Uncaught TypeError: undefined is not a function」。由於在調用setTimeout()方法時，其實是在調用window.setTimeout()。傳給setTimeout()的匿名函數的this其實是window，而window並不包含clearBoard()方法。
7. Uncaught RangeError: Maximum call stack
在Chrome裏，有幾種狀況會發生這個錯誤，其中一個就是函數的遞歸調用，而且不能終止。這個錯誤能夠在Chrome開發者控制檯重現。
還有，若是傳給函數的值超出可接受的範圍時，也會出現這個錯誤。不少函數只接受指定範圍的數值，例如，Number.toExponential(digits)和Number.toFixed(digits)方法，只接受0到20的數值，而Number.toPrecision(digits)只接受1到21的數值。
8. TypeError: Cannot read property ‘length’
在Chrome中，若是讀取未定義變量的長度屬性，會報錯。
若是數組未初始化，或者由於做用域的問題而沒有正確地獲取到，則可能會遇到此錯誤。讓咱們用下面的例子來理解這個錯誤。
函數的參數名會覆蓋全局的變量名。也就是說，全局的testArray被函數的參數名覆蓋了，因此在函數體裏訪問到的是本地的testArray，但本地並無定義testArray，因此出現了這個錯誤。
9. Uncaught TypeError: Cannot set property
若是對undefined變量進行賦值或讀取操做，會拋出「Uncaught TypeError: cannot set property of undefined」異常。
由於test對象不存在，就會拋出「Uncaught TypeError: cannot set property of undefined」異常。
10. ReferenceError: event is not defined
當訪問一個未定義的對象或超出當前做用域的對象，就會發生這個錯誤。
結論
看到這裏，你會發現這十大錯誤幾乎都是null/undefined錯誤。若是有一個好的靜態類型檢查系統，好比使用TypeScript能夠幫助你在編譯的時候就發現問題。若是沒有使用TypeScript，那麼請多多使用條件語句作判斷，防止這種狀況出現。
在生產環境中會出現各類不可預期的錯誤。關鍵是要及時發現那些影響用戶體驗的錯誤，並使用適當的工具快速發現和解決這些問題。Fundebug提供JavaScript的bug監控，助你實時發現bug。經過首創的用戶行爲記錄技術，方便開發者更好地理解爲何出錯，以下所示：
