vue.js 阅读0.1

框架核心-错误处理

假设开发了工具模块

//utils.js
export default {
    foo(fn){
    fn&&fn()
    }
}

在用户侧使用的时候

import utils from 'utils.js'
utils.foo(()=>{
//....
})

如果这时候出错了，需要try，catch 第一个办法，让用户自己try catch，但这会增加用户的心智负担，如果有成千上百个类似foo的函数

//utils.js
export default {
    foo(fn){
        try{
        fn&&fn()
        }catch{
        //做错误处理
        }
    },
    bar(fn){
        try{
        fn&&fn()
        }catch{
        //做错误处理
        }
    }, 
}

第二个方法是我们进一步将错误处理程序封装成一个函数，假设叫它callwithErrorHandling

export default {
foo(fn){
    callwithErrorHandling(fn)
    },
    bar(fn){
    callwithErrorHandling(fn)
    }
}
function callwithErrorHandling(fn) {
    try {
        fn&&fn()
    }catch(e){
        console.log(e)
    }
}

这样做不仅简洁，真正的好处是我们能为用户提供统一的错误处理接口

//utils.js
let handleError = null
export default {
    foo(fn){
    callwithErrorHandling(fn)
    },
    //用户可以调用该函数注册统一的错误处理函数
    registerErrorHandler(fn){
      handleError = fn
    }
}

function callwithErrorHandling(fn) {
    try {
        fn&&fn()
    }catch(e){
       handleError(e) 
    }
}

我们提供了registerErrorHandler 函数，用户可以使用它注册错误处理程序，然后在callwithErrorHandling函数内部捕获错误后，把错误传递给用户注册的错误处理程序 这样用户侧的代码就会非常简洁和健壮

import utils from 'utils.js'
utils.registerErrorHandler((e)=>{
//用户做处理
console.log(e)
})

utils.foo(()=>{/**/})
utils.bar(()=>{/**/})

这时错误处理的能力完全由用户控制，用户既可以选择忽略错误，也可以调用上报程序将错误上报给监控系统

这就是Vue.js错误处理的原理，可以在源码中搜到callwithErrorHandling函数，另外在Vue.js中，也可以注册统一的错误处理函数

import App from 'App.vue'
const app = createApp(App)
app.config.errorHandler = ()=>{
//错误处理程序
}