javascript怎麼進行全域錯誤處理-js教程-PHP中文網

首頁

web前端

js教程

javascript怎麼進行全域錯誤處理

青灯夜游

Apr 20, 2021 pm 02:20 PM

javascript錯誤處理

在JavaScript中，可以透過綁定「window.onerrot」事件來進行頁面全域error錯誤處理，語法格式「function 函數名稱(msg,url,l,c,error){//程式碼} window.onerror = 函數名;」。

javascript怎麼進行全域錯誤處理

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript引擎執行JavaScript程式碼時，會發生各種錯誤：可能是語法或拼字錯誤，可能是瀏覽器差異（使用了瀏覽器獨特功能），也可能是伺服器傳回異常未處理，當然還有許多其它不可預測的因素。當錯誤發生時，JavaScript 引擎會中斷後續程式碼執行，並產生一個錯誤訊息。為了讓程式碼更健壯，避免程式碼意外中斷，我們需要處理各種異常。

1、局部錯誤處理

局部錯誤處理指程式碼可能出錯的地方進行錯誤捕捉處理，需要程式猿進行硬code，JavaScript錯誤處理相關有4條語句：

1）try, catch語句，錯誤捕捉語句

2）finall語句，錯誤捕捉處理後，return前製執行語句

3）throw語句，錯誤拋出語句

案例1:

try {
　　window.abcdefg();
} catch (e) {
　　alert(&#39;发生错误啦，错误信息为：&#39; e.message);
} finally {//总是会被执行
　　alert(&#39;我都会执行！&#39;);
}

控制台輸出：

發生錯誤啦，錯誤訊息為： window. abcdefg is not a function
我都會執行

finally語句在catch後，return前執行。

案例2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Throw Demo</title>
</head>
<body>
<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "不能为空";
  if(isNaN(x)) throw "不是有效数字";
  if(x>10)     throw "不能大于10";
  if(x<5)      throw "不能小于5";
  } catch(err) {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>
<p>请输入一个5到10的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>

throw的作用就是將可預見或不可預見的錯誤轉義成使用者可認知的錯誤。

【推薦學習：javascript高階教學】

2、全域錯誤處理

由於前端開發人員等級不一、程式碼規格程度不一，不是所有JavaScript程式碼都有錯誤處理。因此，JavaScript程式碼在執行過程中常常會因為不可預見異常而導致程式碼意外終止，為此，我們需要全域捕捉錯誤異常，並及時提醒開發人員修改程式碼。只要綁定window.onerrot事件即可進行頁面全域js error錯誤處理，程式碼如下：

	function globalErrorHandle(msg,url,l,c,error) {
		console.error("global js error: ", msg, l);
      		// TODO other things.
	}
	window.onerror = globalErrorHandle;

綁定window.onerrot事件，js報錯就會呼叫globalErrorHandle，其中：

#msg：錯誤訊息
url：報錯頁面url
#l：程式碼報錯行號
c: 列號
error: 錯誤物件

#把上文的案例1，用全域錯誤來捕捉，程式碼如下圖：

javascript怎麼進行全域錯誤處理
控制台輸出：

3、錯誤上報模組設計

全域錯誤處理並不能阻塞程式碼意外終止，也就是說當js執行過程中報錯又沒有try-catch錯誤處理，則會呼叫globalErrorHandle，但是後續程式碼會意外終止不再執行。因此，全域錯誤處理更多是全域錯誤記錄並上報。通常做3件事：

globalErrorHandle，全域錯誤捕捉；
將錯誤訊息回報到伺服器（錯誤頁面、行號、列號等） ;
管理員在伺服器上發現js錯誤訊息時，命令相關人員修改；

看個案例，截圖如下：

javascript怎麼進行全域錯誤處理
上圖就是一個簡單的js錯誤上報模組，錯誤查看頁面，資訊包括：錯誤來源（哪個頁面），錯誤描述，行號，作業系統瀏覽器，操作人，操作時間等。

有幾個注意事項：

1）回報內容過濾

##如上圖所示，好多錯誤訊息都是一樣的，如果在某個大循環裡不斷的在觸發錯誤，則會不斷向伺服器發送錯誤訊息，因此錯誤訊息發送前先做過濾，操作如下：

全域錯誤捕捉時，產生的錯誤來源錯誤描述hashcode是否已經存在，不存在則上報錯誤訊息；

2）上報哪些內容

為了錯誤重現，建議盡可能使錯誤訊息詳細，至少應包含：

錯誤描述、錯誤行號、列號、stack訊息
瀏覽器和作業系統資訊
操作時間，甚至操作人、參數

更多程式相關知識，請造訪：

程式設計影片！！

以上是javascript怎麼進行全域錯誤處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。