javascript报错

JS异常处理的方式

2022-01-17 11:32:17 更新   浏览量: 315
上一章:js报错和处理 下一章:window.addEventListener 来捕获错误

JS异常处理的方式

前端错误类型:语法错误、运行错误;

语法错误:语法错误不会通过解析器,他会被标记为非法的JS并报告在控制台中。
看一下这个代码,却少右括号,所以是一个语法错误。控制台会打印出Uncaught SyntaxError: missing ) after argument list(…)

var alarm = "Dragons approach!"; 
alert(alarm

运行错误:

alert(alarm);

这段代码是语法正确的,但是在C语言中,alarm是没有定义的,会被报告语法错误,所以静态语言的查错能力提前了,在程序编译的时候就会指出这种错误,但是JS没有这种能力,在解析器尝试运行这段代码的时候,会抛出“run-time error”。

try-catch

通过catch捕获到错误,做一些处理(上报错误)

try {
        msg
    } catch (e) {
        console.log('catch error!');
        console.log(e)
    }

限制:无法捕获语法、异步错误,但是:可以捕获async await错误

  • 语法错误
  • try {
      // 括号未闭合
        console.log('error'
      } catch (e) {
        console.error('try-catch', e);
      }
  • 异步错误
  • try {
        setTimeout(() => {
          throw '出错啦!';
        }, 1000)
      } catch (e) {
        console.error(e);
      }

捕获async-await

function p() {
    let x = new Promise((resolve, reject) => {
      reject('出错啦!')
    })
    return x;
  }

  async function f() {
    try {
      await p();
    } catch (e) {
      console.error('try-catch', e);
    }
  }
  f();

运行结果


window.onerror

优点:可以捕获异步错误

window.onerror=function(errMsg,url,row,col,error){
  console.log({msg, url, row, col, error});
 return true
}

限制:不能捕获资源加载错误错误

<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<img src="./404.png">

需要注意的是,window.onerror 函数只有在返回 true 的时候,异常才不会向上抛出,否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。

addEventListener(error,handle)

优点:除了onerror捕获的错误之外,还可以捕获资源加载错误

window.addEventListener('error', (e) => {
        console.log(e, e.message)
    },true)

由于网络请求异常不会事件冒泡,因此必须在捕获阶段将其捕捉到才行,但是这种方式虽然可以捕捉到网络请求的异常,但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等,所以还需要配合服务端日志才进行排查分析才可以。

addEventListener("unhandledrejection",handle)

捕获未catch 的 promise 错误

扫二微码
上一章:js报错和处理 下一章:window.addEventListener 来捕获错误

最近更新 免责声明 关于我们

Copyright © 2004-2021 前端教程 qianduan.cn All Rights Reserved   陕ICP备2021014585号-1 陕公网安备 61012402000223号 前端教程

友情链接:  前端工具 前端插件