如何捕捉所有的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的所有五个属性,这些属性如下– 1.
- event – 人类可读的错误信息,以字符串的形式描述问题。
-
source – 产生错误的脚本文件的URL。它也是一个字符串的形式。
-
lineno – 产生错误的脚本文件的行号。它是整数格式。
-
colon – 产生错误的脚本文件的列号。它是整数格式的。
-
error – 这是被抛出的错误对象。
注意:window.onerror只收到五个参数,当涉及到Element.onerror时,我们只收到一个ErrorEvent onbject。
步骤
步骤1 – 在一个文本编辑器中打开你的HTML文件
步骤2 – 在你的HTML中添加一个你想显示错误信息的元素。你可以使用一个带有id属性的div元素,像这样。
步骤3 – 在你的HTML中添加一个脚本元素并定义window.onerror事件处理函数。每当你的JavaScript代码中出现错误时,这个函数就会被调用。
步骤4 – 你可以使用这些参数在你的HTML元素中显示错误细节。
步骤5 – 在你的HTML中添加一个按钮或任何其他元素来触发错误。你可以使用onclick事件处理程序来调用一个产生错误的函数。
例子1:使用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代码中出现错误时就会被触发。