前端错误监控

为什么要有前端错误监控？

    为什么要有前端错误监控，它又能帮助你做什么？这个问题在我刚步入开发时根本没有听说过，那么今天就来讲讲。
    个人认为，前端错误监控和自身所参与的项目大小或者重要性存在着必要的联系。像我以前做的都是一些小平台小项目中，不是一些内部系统没有交易就是面向的客诉少，基本不构成用户体验投诉。而当项目业务逐渐拓展，客户人群、交易数额会自然递增。为留客、避免交易纠纷，要尽量做到早发现早解决，那么前端错误监控顺势而生。

前端有哪些监控的方法？

全局错误监控方法

window.onerror

<script>
  window.onerror = function(message, source, lineno, colno, error) {
    console.log('全局错误', message, source, lineno, colno, error);
    return true
  };
  console.log(a + b);
</script>
<img src="./img/xxx.png" alt="">
<script src="./main.js" crossorigin></script>

    从上述实例中可以看到window.onerror可以监控到变量未定义与js资源加载失败的错误，未监控到图片加载失败的错误。
    可能有小伙伴注意到了window.onerror函数体内的return true，那么我给大家把他删除再看一眼控制台。

    可以很明显的观察到控制台显示了红的错误信息。

window.addEventListener(‘error’,()=>{})

<script>
  window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
  }, true)
  console.log(a + b);
</script>
<img src="./img/xxx.png" alt="">
<script src="./main.js" crossorigin></script>

    同理从上述实例中，我们可以看到此方法既监控到了变量未定义、js加载失败，也监控到了图片加载失败。不过此方法无法像window.onerror函数体内添加return true来屏蔽控制台错误。
    可能又有小伙伴注意到了window.addEventListener的第三个参数传了true，那么我给大家把他改为false再看一眼控制台。    同理可以很明显的对比出控制台缺失了图片加载失败的错误信息。

window.addEventListener(‘unhandledrejection’,()=>{})

<script>
  window.addEventListener('unhandledrejection', function(evt) {
      console.log('unhandledrejection', evt)
  });
  new Promise((res, rej) => {
    rej(123)
  })
  console.log(a + b);
</script>
<img src="./img/xxx.png" alt="">
<script src="./main.js" crossorigin></script>

    此方法主要用于监控promise.catch错误，同样此处有一个疑问，实例中的promise没有写.catch，那么如果存在呢？

<script>
  window.addEventListener('unhandledrejection', function(evt) {
      console.log('unhandledrejection', evt)
  });
  new Promise((res, rej) => {
    rej(123)
  }).catch(err => {
    console.log('catch', err);
  })
  console.log(a + b);
</script>
<img src="./img/xxx.png" alt="">
<script src="./main.js" crossorigin></script>

    结果：window.addEventListener(‘unhandledrejection’,()=>{})监控的是未定义.catch的promise。

vue脚本错误监控errorHandler

    在main.js中定义errorHandler

app.config.errorHandler = (err, vm, info) => {
    let {
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack,  // 异常堆栈信息
    } = err;
    console.log('vue错误', {
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack,  // 异常堆栈信息
    }, vm, info)
};

    错误示例：

<template>
  <div>
    <button @click="arrpop">arrpop</button>
    <div>{{plusOne}}</div>
    <button @click="change(1)">add</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
export default {
  name: 'App',
  setup() {
      const arrpop = (arg) => {
        arg.pop();
      }

      const count = ref('change')
      // 创建一个只读性计算属性，依赖于count值
      const plusOne = computed(() => count.value.slice(1))
      const change = (arg) => {
        count.value = arg;
      }
      

      return {
        arrpop,
        plusOne,
        change
      }
    }
}
</script>

局部错误监控方法

• promise.catch
• try catch

    局部错误监控可在可疑代码处自行添加上报，不做展开讲解。

上报方式有哪些

1. 通过 ajax 上报，但是 ajax 请求也有可能会发生异常或跨域问题，所以此方法不推荐。
2. 通过img上报。

let img = new Image();
img.src = api + '&errData=' + encodeURIComponent(encodeURIComponent(errData));
img = null;

总结

目录就是总结，哈哈哈哈。