下一篇: Vue知识点整理

js错误上报

一、常见错误

1.SyntaxError

语法错误,js解析时会提示错误,代码停止解析

2.TypeError

类型错误,属于js运行时错误,基本类型当成对象来使用等,导致js停止运行

3..ReferenceError

指向错误,调用不存在的方法或者变量,属于运行时错误,导致js停止运行

二、错误处理

js错误会导致程序终止运行,可以通过一些方法捕获,捕获之后如果没有重新抛出,那么浏览器没有捕获到这些错误,程序可以继续运行.

1.使用try...catch...捕获错误,当前错误已经被catch

try {
  a
} catch (e) {
  //...
}

2.使用try...catch...finally...与try...catch...的区别是:无论是否捕获到错误,finally中的逻辑都会运行

try {
  //...
} catch(e) {
  //...
} finally {
  //...
}

3.利用throw重新抛出错误

上面point1,point2都介绍了如何catch错误,catch到的错误如果不做抛出处理,那么程序会继续往下执行,使用throw可以重新抛出错误

throw new Error('error!')  //浏览器接受到错误后,程序终止运行

//在try...catch中重新抛出错误
try {
  //....
} catch (e) {
  throw new Error(e)
}

三、错误上报

使用window.onerror进行错误上报,建议将错误上报的代码置顶,才能尽可能收集到更多错误

<script>
      window.onerror = function (message, url, line, column, error) {
              //...
        }
</script>

1.同一个script标签的解析时错误window.onerror接收不到,但是运行时错误能接收到

//window.onerror接收不到与之同标签的解析时错误
<script>
      window.onerror = function (message, url, line, column, error) {
        console.log('message: ', message);
                 console.log('url: ', url);
              console.log('line: ', line);
              console.log('column: ', column);
        console.log('stack: ', error.stack);
        }
        function a () {      //解析时错误,window.onerror接收不到,
</script>
//window.onerror置顶,能接收到与之同标签的运行时错误
<script>
  window.onerror = function (message, url, line, column, error) {
      console.log('message: ', message);
             console.log('url: ', url);
          console.log('line: ', line);
          console.log('column: ', column);
      console.log('stack: ', error.stack);
    }
    a        //运行时错误
</script>

2.跨标签的错误上报

script标签遵循自上而下的解析和运行顺序,出现在前的标签先解析先执行,出现在后的标签后解析后执行,因此就产生了下面两种现象.

//window.onerror在发生错误的script标签之前,解析和运行时错误都能接收到
<script>
      window.onerror = function (message, url, line, column, error) {
        console.log('message: ', message);
                 console.log('url: ', url);
              console.log('line: ', line);
              console.log('column: ', column);
        console.log('stack: ', error.stack);
        }
</script>
<script>
      function a () {      //解析时错误
</script>
<script>
      a                   //运行时错误
</script>

//window.onerror在发生错误的script标签之后,解析和运行时错误都不能接收到  
<script>
      function a () {      //解析时错误
</script>
<script>
      a                   //运行时错误
</script>
<script>
      window.onerror = function (message, url, line, column, error) {
        console.log('message: ', message);
                 console.log('url: ', url);
              console.log('line: ', line);
              console.log('column: ', column);
        console.log('stack: ', error.stack);
        }
</script>
下一篇: Vue知识点整理