錯誤一定會發生 當 JavaScript 引擎執行 JavaScript 代碼時,會發生各種錯誤: 可能是語法錯誤,通常是程式員造成的編碼錯誤或錯別字。 可能是拼寫錯誤或語言中缺少的功能(可能由於瀏覽器差異)。 可能是由於來自伺服器或用戶的錯誤輸出而導致的錯誤。 當然,也可能是由於許多其他不可預知的 ...
錯誤一定會發生
當 JavaScript 引擎執行 JavaScript 代碼時,會發生各種錯誤:
可能是語法錯誤,通常是程式員造成的編碼錯誤或錯別字。
可能是拼寫錯誤或語言中缺少的功能(可能由於瀏覽器差異)。
可能是由於來自伺服器或用戶的錯誤輸出而導致的錯誤。
當然,也可能是由於許多其他不可預知的因素。
JavaScript 拋出錯誤
當錯誤發生時,當事情出問題時,JavaScript 引擎通常會停止,並生成一個錯誤消息。
描述這種情況的技術術語是:JavaScript 將拋出一個錯誤。
JavaScript 測試和捕捉
try 語句允許我們定義在執行時進行錯誤測試的代碼塊。
catch 語句允許我們定義當 try 代碼塊發生錯誤時,所執行的代碼塊。
JavaScript 語句 try 和 catch 是成對出現的。
語法
try { //在這裡運行代碼 } catch(err) { //在這裡處理錯誤 }
實例
在下麵的例子中,我們故意在 try 塊的代碼中寫了一個錯字。
catch 塊會捕捉到 try 塊中的錯誤,並執行代碼來處理它。
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()">
</body>
</html>
Throw 語句
throw 語句允許我們創建自定義錯誤。
正確的技術術語是:創建或拋出異常(exception)。
如果把 throw 與 try 和 catch 一起使用,那麼您能夠控製程序流,並生成自定義的錯誤消息。
語法
throw exception
異常可以是 JavaScript 字元串、數字、邏輯值或對象。
實例
本例檢測輸入變數的值。如果值是錯誤的,會拋出一個異常(錯誤)。catch 會捕捉到這個錯誤,並顯示一段自定義的錯誤消息:
<script> function myFunction() { try { var x=document.getElementById("demo").value; if(x=="")throw "empty"
; if(isNaN(x))throw "not a number"
; if(x>10)throw "too high"
; if(x<5)throw "too low"
; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="Error: " + err + "."; } } </script> <h1>My First JavaScript</h1> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="mess"></p>
onerror監聽錯誤
我們不可能對所有的代碼都使用try-catch來防止錯誤的出現,好在瀏覽器提供了onerror,可以用來全局監聽所有的錯誤。
語法
window.onerror = function(message, source, lineno, colno, error) { ... }
函數參數:
message
:錯誤信息(字元串)。可用於HTMLonerror=""
處理程式中的event
。source
:發生錯誤的腳本URL(字元串)lineno
:發生錯誤的行號(數字)colno
:發生錯誤的列號(數字)error
:Error對象(對象)
實例
<script>
window.onerror = function (msg, url, lineNo, columnNo, error) {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
return false;
};
function myFunction()
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
Fundebug JavaScript監控插件
Fundebug是前端JavaScript錯誤實時監控平臺,經過大量相容性調試,Fundebug的JavaScript監控插件已經能夠在各種主流瀏覽器中自動捕獲錯誤,並且可以獲取最全面的錯誤信息,幫助開發者更快的Debug。
典型的,比如因為不同的平臺報錯信息不同,需要進行一個聚合。Fundebg的錯誤智能聚合技術可以將大量看似不同實則相同的錯誤很好的整合。
同樣的代碼產生的同一個錯誤,在不同瀏覽器上的報錯信息是各不相同的。
name不同的錯誤可能是同一個錯誤:
例如SyntaxError與ReferenceError;message不同的錯誤可能是同一個錯誤,
例如can not find variable fundebug與fundebug is not defined。並且,同一個錯誤在不同瀏覽器下的lineNumber,columnNumber,stack,與url都有可能不同。
使用方法
一行代碼接入插件:
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="API-KEY"></script>
支持多種框架:AngularJS、Angular1、Angular2、Vue、React等等。