JS：错误捕获（try...catch/window.onerror/window.addEventListener）

一、try...catch

1.在同步任务中

    <script>
      let a = 0;
      try {
        //要执行的代码
        console.log(b);
      } catch (e) {
        //如果有错误，执行这里的代码
        console.log(e); //ReferenceError: b is not defined
      }
    </script>

2.在异步任务中

2.1 promise中

    <script>
      new Promise((resolve, reject) => {
        // 异步操作
        setTimeout(() => {
          throw new Error("异步错误");
        }, 1000);
      }).catch((error) => {
        // 捕获并处理错误
        console.error("Promise 异步错误:", error);
      });
    </script>

2.2 async/await中

    <script>
      const fetchData = async () => {
        try {
          const response = await fetch("啥也没有");
        } catch (error) {
          console.error("fetch 数据时出错:", error); // Error: fetch 数据时出错: TypeError: Failed to fetch
        }
      };
      fetchData();
    </script>

二、window.onerror

1.简介

window.onerror是一个全局的错误处理函数，它是一个全局属性。

在浏览器环境下，它会在脚本执行过程中遇到未被捕获的运行时错误时被触发，如果一个错误已经被例如try...catch的方式捕获，那么window.onerror不会捕获这个错误。

window.onerror在某些情况下可能无法捕获到所有类型的错误，比如跨域脚本错误或某些特定条件下的加载错误。

2.基本使用

    <script>
      // 定义一个全局错误处理函数
      window.onerror = function () {
        console.error(); //Uncaught ReferenceError: nonExistentFunction is not defined
      };
      // 测试示例
      nonExistentFunction(); // 这将触发一个ReferenceError错误
    </script>

3.让控制台不报错

    <script>
      // 定义一个全局错误处理函数
      window.onerror = function () {
        console.log("不用管");
        return true;
      };
      // 测试示例
      nonExistentFunction(); // 这将触发一个ReferenceError错误
    </script>

4.参数

    <script>
      window.onerror = function (message, source, lineno, colno, error) {
        // message：错误信息
        // source：出错文件
        // lineno：出错文件的行号
        // colno：出错文件的列号
        // error：Error对象
        console.error(
          "捕获到错误:",
          message,
          "在文件",
          source,
          "第",
          lineno,
          "行,第",
          colno,
          "列"
        ); //捕获到错误: Uncaught ReferenceError: nonExistentFunction is not defined 在文件 http://127.0.0.1:5500/getError.html 第 31 行,第 7 列
        // 根据需要，返回true可以阻止浏览器默认的错误提示信息
        return false; // 返回false则错误信息会在console中打印
      };
      // 测试示例
      nonExistentFunction(); // 这将触发一个ReferenceError错误
    </script>

三、window.addEventListener

1.简介

window.addEventListener是JavaScript中用于添加事件监听器的方法。在错误捕获方面，我们可以使用window.addEventListener('error', handler)来监听error事件。用法与window.onerror类似，错误捕获比window.onerror更加全面。

2.用法

    <script>
      window.addEventListener("error", function (event) {
        // 处理错误的逻辑
        console.error(
          "捕获到错误:",
          event.message,
          "在文件",
          event.filename,
          "的第",
          event.lineno,
          "行"
        ); //捕获到错误: Uncaught ReferenceError: nonExistentFunction is not defined 在文件 http://127.0.0.1:5500/getError.html 的第 23 行
      });
      // 测试示例
      nonExistentFunction(); // 这将触发一个ReferenceError错误
    </script>