如何捕捉所有的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>