数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何捕获所有 JavaScript 错误？
为了捕获所有 JavaScript 错误，我们可以使用 `window.onerror()` 方法，它就像一个全局的 try-catch 语句。`onerror` 事件处理程序是 JavaScript 中最早用于简化错误处理的功能。每当页面上发生异常时，就会在 `window` 对象上触发 `error` 事件。
`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 - 生成错误的脚本文件的行号。它是整数格式。
colno - 生成错误的脚本文件的列号。它是整数格式。
error - 这是抛出的 Error 对象。
注意：`window.onerror` 只接收五个参数，而对于 `Element.onerror`，我们只接收一个 `ErrorEvent` 对象。
步骤
要使用 `window.onerror` 事件处理程序捕获所有 JavaScript 错误，请按照以下步骤操作：
步骤 1 - 在文本编辑器中打开您的 HTML 文件
步骤 2 - 在 HTML 中添加一个元素，您想在其中显示错误消息。您可以使用带有 id 属性的 div 元素，如下所示
步骤 3 - 在 HTML 中添加一个 script 元素并定义 `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.addEventListener()` 方法
这与第一个示例相同，但我们使用 `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+ 次查看
