再来一个装饰类的
/** * 检查是不是需要代理 * @param {*} method * @param {*} descriptor */ function shouldProxy(method, descriptor) { return typeof descriptor.value === 'function' && !isBuiltinMethods(method) && descriptor.configurable && descriptor.writable && !descriptor.value.bound } function catchClass(targetArg, ...params) { // 获得所有自定义方法，未处理Symbols const target = targetArg.prototype || targetArg let descriptors = getOwnPropertyDescriptors(target) for (let [method, descriptor] of Object.entries(descriptors)) { if (shouldProxy(method, descriptor)) { defineProperty(target, method, catchMethod(target, method, descriptors[method], ...params)) } } }最后暴露一个自动识别方法和类的方法
/** * * 未拦截getter和setter * 未拦截Symbols属性 */ export default function catchError(...args) { const lastArg = args[args.length - 1] // 无参数方法 if (isDescriptor(lastArg)) { return catchMethod(...args) } else { // 无参数class?? 需要改进 if (args.length === 1 && typeof args[0] !== 'string') { return catchClass(...args) } // 有参 return (...argsList) => { // 有参数方法 if (isDescriptor(argsList[argsList.length - 1])) { return catchMethod(...[...argsList, ...args]) } // 有参数class return catchClass(...[...argsList, ...args]) } } }基本成型。
怎么调用
装饰类
@catchError('HeHe') class HeHe extends React.Component { state = { clicked: false } onClick(){ this.setState({ clicked:true }) this.x.y.z.xxx } render(){ return ( <input type="button" value="点击我" onClick={this.onClick}/> ) } }装饰方法
class HeHe extends React.Component { state = { clicked: false } @catchError('HeHe onClick') onClick(){ this.setState({ clicked:true }) this.x.y.z.xxx } render(){ return ( <input type="button" value="点击我" onClick={this.onClick}/> ) } }当然你还可以既装饰类又装饰方法， 这个时候方法的装饰优先于类的装饰，不会重复装饰
@catchError('HeHe') class HeHe extends React.Component { state = { clicked: false } @catchError('HeHe onClick') onClick(){ this.setState({ clicked:true }) this.x.y.z.xxx } onClick2(){ } render(){ return ( <React.Fragment> <input type="button" value="点击我" onClick={this.onClick}/> <input type="button" value="点击我2" onClick={this.onClick2}/> </React.Fragment> ) } }如上，细心的人可以发现， 没有 onClick.bind(this)， 是的， catchError会自动完成bind，是不是很cool。
如上，现在的所有的事件处理都会被catchError里面定义的handleError处理，怎么处理就看你自己了。
有人就问了，我要是想捕捉后还要有额外处理的了，比如来个提示框之类的。
这个就取决你的需求和怎么处理，你依旧可以在你的事件处理器try catch。
二是，你没看到@catchError里面可以传递参数么，可以提供额外的错误信息，比如场景，是不是致命错误等等信息。
她解决了你未显示处理的事件处理错误，有没有很优雅，有没有。
你们都说没有的话， 我就放弃前端了，可是我还有老婆孩子要养，所以你们一定要有人说有。
error-boundaries
React异常处理
catching-react-errors
react进阶之异常处理机制-error Boundaries
core-decorators
autobind.js