Vue设计与实现——错误处理

本文正在参加「金石计划」

最近在深入的理解vue3的一些知识点，从源码层面对一些新加入的特性来进行分析，本文主要的内容是来自《Vue.js设计与实现》，笔者对其中的印象比较深的章节做了一些整理成文章笔记进行分享。本文正在参加[「金石计划」]。

错误处理

错误处理是一个衡量框架是否稳健的特征，优秀的错误处理能减少用户在使用时候的不必要操作，更多的是能对使用时候产生问题作出更好的处理，比如错误监控的功能，可以极大的减少错误排查的时间，对于vue3之间的错误处理，我们一起来简单的了解一下吧

示例

如果我们想提供一个多个功能的工具库，应该如何对工具库抛出的功能做出某些异常处理

util.js
export default {
    foo(fn){
        fn()
    }
}

import tst from "./util.js";
tst.foo()//fn is not a function

这里使用工具库中提供的函数，当然工具库中可以使用fn&&fn()的方法来避免错误，但是如果产生无法预期的错误，应该如何进行解决

使用trycatch

util.js
export default {
    foo(fn){
     try{
        fn&&fn()
     }catch(e){
         //
     }
    }
}

在库中添加try catch是一个很好的选择，但库中存在多个工具函数，重复进行trycatch效果不好，可以对其进行封装

export default {
    foo(fn){
        catchFn(fn)
    },
    goo(fn){
        catchFn(fn)
    },
    catchFn(fn){
        try{
            fn&&fn()
        }catch(e){
            console.log(e);
        }
    }
}

这里选择多封装一个函数来对错误进行处理，不用重复的在foo和goo中单独的进行try，而是统一进行处理并且执行，但书中也提到，以上部分并不是重点，重点是可以抛出一供用户使用的错误处理函数，用户可以自定义错误处理的内容

let handleError = null
export default {
    foo(fn){
        catchFn(fn)
    },
    setHandlerFn(fn){
        handleError = fn
    }
}
function catchFn(fn){
    try{
        fn()
    }catch(e){
        handleError(e)
    }
    
}

以上代码使用了闭包的方法，保存了用户自定义的错误监控函数，之后执行的函数错误都会通过用户自定义的错误监控函数来执行。下面是使用方法

import tst from "./tst.js";
tst.setHandlerFn((e)=>{
    console.log('u r error',e) //用户自定义 使用函数错误的时候会执行
})
tst.foo()