資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何捕獲所有 JavaScript 錯誤？
為了捕獲所有 JavaScript 錯誤，我們可以使用 window.onerror() 方法，它就像一個全域性的 try-catch 語句。onerror 事件處理程式是第一個用於簡化 JavaScript 錯誤處理的功能。每當頁面上發生異常時，都會在視窗物件上觸發錯誤事件。
onerror 事件處理程式提供三條資訊來識別錯誤的確切性質：
錯誤訊息 - 瀏覽器為給定錯誤顯示的相同訊息
URL - 發生錯誤的檔案
行號 - 給定 URL 中導致錯誤的行號
語法
以下是使用 window.onerror 方法捕獲所有 JavaScript 錯誤的語法：
window.onerror = function (event, souce, lineno, colon, error) { }
或
Window.addEventListener( "error" , ( ErrorEvent ) => { })
在這裡我們可以看到兩種語法都在做同樣的事情，但在 onerror 中接收五個引數，而 addEventListener 接收一個引數，該引數包含了 onerror 的所有五個屬性，這些屬性如下：
event - 以字串形式描述問題的可讀錯誤訊息。
source - 生成錯誤的指令碼檔案的 URL。它也以字串形式表示。
lineno - 生成錯誤的指令碼檔案的行號。它是整數格式。
colon - 生成錯誤的指令碼檔案的列號。它是整數格式。
error - 這是丟擲的錯誤物件。
注意：window.onerror 僅接收五個引數，當涉及到 Element.onerror 時，我們只接收一個 ErrorEvent 物件。
步驟
要使用 window.onerror 事件處理程式捕獲所有 JavaScript 錯誤，請按照以下步驟操作：
步驟 1 - 在文字編輯器中開啟 HTML 檔案
步驟 2 - 在 HTML 中新增一個元素，您希望在其中顯示錯誤訊息。您可以使用帶有 id 屬性的 div 元素，如下所示
步驟 3 - 在 HTML 中新增一個指令碼元素並定義 window.onerror 事件處理程式函式。每當 JavaScript 程式碼中發生錯誤時，都會呼叫此函式。
步驟 4 - 您可以使用這些引數在 HTML 元素中顯示錯誤詳細資訊。
步驟 5 - 在 HTML 中新增一個按鈕或任何其他元素，該元素將觸發錯誤。您可以使用 onclick 事件處理程式來呼叫生成錯誤的函式。
示例：使用 window.onerror() 方法
在此示例中，我們建立一個輸入標籤，並在單擊輸入標籤時呼叫一個不存在的函式，並透過使用 window.onerror 列印錯誤。
<html>
<head>
<h2> Catching all JavaScript errors using window.onerror </h2>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
<div id = "result"><div>
<script>
window.onerror = function (error, source, lineno, colno, error) {
// Print the error message
let output = document.getElementById("result");
output.innerHTML += "Message : " + error + "<br>";
// Print the url of the file that contains the error
output.innerHTML += "Url : " + source + "<br>";
// Print the line number from which the error generated
output.innerHTML += "Line number : " + lineno + "<br>";
// Print the column number of the error line
output.innerHTML += "Column number : " + colno + "<br>";
// Print he error object
output.innerHTML += "Error Object : " + error;
}
</script>
</body>
</html>
示例 2：使用 window.adEventListener() 方法
這與第一個示例相同，但我們使用 addEventListener 而不是 onerror。
<html>
<body>
<h2> Catching all JavaScript errors using addEventListener </h2>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
<div id = "result"></div>
<script>
num = 20;
window.addEventListener("error", (ErrorEvent) => {
let output = document.getElementById("result");
// Print the error message
output.innerHTML += "Message : " + ErrorEvent.message + "<br>";
// Print the url of the file that contains the error
output.innerHTML += "Url : " + ErrorEvent.filename + "<br>";
// Print the line number from which the error generated
output.innerHTML += "Line number : " + ErrorEvent.lineno + "<br>";
// Print the column number of the error line
output.innerHTML += "Column number : " + ErrorEvent.colno + "<br>";
// Print he error object
output.innerHTML += "Error Object : " + ErrorEvent.error;
})
</script>
</body>
</html>
總而言之，要捕獲所有 JavaScript 錯誤，可以使用 window.onerror 方法或 window.addEventListener 方法。這些方法就像一個全域性的 try-catch 語句，並在 JavaScript 程式碼中發生錯誤時觸發。
11K+ 次檢視
