封装工具类的全局错误处理函数

需求

在工作中我们可能会需要封装很多工具类函数给到组里的小伙伴使用，也许这些函数非常多，调用非常频繁，但是出错了，又没办法定位到到底是工具函数出错了，还是业务流程错了，毕竟我们个人的封装不会那么尽善尽美，想到方方面面。谁敢称自己是大佬呢。基于上述的需求，本文提供一个封装全局错误处理函数的思路。

1. 需要有别于一般的业务类方法，能够区分开这是工具类方法的报错
2. 不能每写一个工具函数，就try...catch...一次
3. 错误的回调能让使用者去自定义处理函数

代码实操：先来看我们的工具类代码，我们定义了如下的函数，并向外暴露foo和registerErrorHandle

1. 一个全局回调函数是一个null，
2. 一个工具函数foo，a和b都是传入的参数
3. 一个用于注册发生错误后的回调函数registerErrorHandle
4. 统一的错误处理函数callWithErrorHandling

// utils.js
let errorHandler = null

function foo(a, b) {
    callWithErrorHandling(() => {
        console.log(a, b)
    })
}

function registerErrorHandle(fn) {
    errorHandler = fn
}

function callWithErrorHandling(fn) {
    try {
        fn && fn()
    } catch (error) {
        errorHandler && errorHandler(error)
    }
}

export { foo, registerErrorHandle }

1. 上述的代码我们暴露了一个registerErrorHandle注册函数，接收一个回调函数fn，调用时将会把回调函数fn赋值给全局的errorHandler。errorHandler用于工具函数触发Error时的回调。使用者可以定义特殊的打印字符，来区别工具函数的错误还是业务函数的错误。
2. 每一个工具函数也不用写一段段的try...catch...，只需要调用callWithErrorHandling，将具体的逻辑包装在callWithErrorHandling这个函数内。他统一捕获错误，统一的上报的错误，符合我们项目中统一封装的思想。

使用者使用

1. 导入错误注册函数registerErrorHandle，工具类函数foo
2. 注册函数，自定义错误的类型，打印的类型
3. 调用工具类函数。

import { registerErrorHandle, foo } from "./utils/utils.js";
export default {
  mounted() {
    registerErrorHandle((error) => {
      console.log(error, "mounted");
    });
    this.test();
  },
  methods: {
    test() {
      foo(1,2);
    },
  },
};
</script>