寮傚父澶勭悊鐨勬剰涔夐殢鐫€web椤圭洰瓒婃潵瓒婂鏉傦紝寰堝寮傚父閿欒鍦ㄥ紑鍙戝拰娴嬭瘯闃舵寰堥毦鍙戠幇銆傝櫧鐒朵綘鍙兘浼氶伩鍏嶈娉曠瓑甯歌閿欒锛屼絾涓嶅彲閬垮厤鐨勬槸锛屾渶閲嶈鐨勬槸浣犱粛鐒舵棤娉曢娴嬩唬鐮佸湪杩愯鏃剁殑閿欒銆傚亣璁炬湁濡備笅涓€娈礦ue浠ｇ爜锛屽湪鐢熷懡鍛ㄦ湡鐨刢reated闃舵寮傛璇锋眰鎺ユ敹閿欒鐨勬暟鎹紝鍙兘浼氬鑷撮〉闈㈡覆鏌撳嚭閿欙細{{test.obj.xxx}}......created(){this.getSomeData()},methods:{getSomeData(){this.fetch().then((res)=>{this.test=res//鍋囪杩欐槸閿欒鐨勬暟鎹姹倉)},}鑰屽鏋滄祴璇曚汉鍛樺強鏃跺彂鐜拌繖涓敊璇紝褰撲粬鎵撳紑鎺у埗鍙版椂锛屼粬寰€寰€浼氱珛鍗冲緱鍑虹粨璁猴細鍝︼紝鏄墠绔疨ot馃檪鍏跺疄锛屽彲鑳借繕鏈夋洿澶氣€濆疄闄呴」鐩腑鐨剋onderful鈥濋棶棰橈紝濡傛灉閿欒鍙彂鐢熷湪鏌愪簺鐢ㄦ埛绔紝鏄娴嬩笉鍒扮殑锛屾墍浠ユ垜浠細璁や负搴旇鍦ㄧ▼搴忎腑澶勭悊鎹曡幏杩愯鏃堕敊璇紝鍚戞湇鍔″櫒鎶ュ憡閿欒锛岀劧鍚庡垎鏋愬拰鏀硅繘浠ｇ爜鏉ヤ慨澶嶅凡鍙戠敓鐨勯敊璇€傞偅涔堝浣曞鐞嗗拰澶勭悊鏌愪簺鍙兘鍑虹幇鐨勯敊璇氨鎴愪簡鍓嶇寮€鍙戠殑蹇呬慨璇俱€傚綋鐒讹紝浣犲彲浠ュ湪姣忎釜浠ｇ爜鐗囨涓噸澶嶅啓try...catch...锛屽苟涓烘瘡涓狿romise澶勭悊catch锛屼絾杩欓毦鍏嶆樉寰楁湁鐐瑰按灏紝鎵€浠ユ垜鎯宠兘涓嶈兘鐢ㄦ洿浼橀泤鐨勬柟寮忔潵澶勭悊鎵€鏈夌粺涓€寮傚父锛屽叏灞€鎹曡幏閿欒骞朵笂鎶ュ垎鏋愩€傚叾瀹炲湪Vue涓疄鐜拌繖鏍风殑鍏ㄥ眬寮傚父澶勭悊骞朵笉闅俱€傝鎴戜滑鐪嬬湅鎴戞槸鎬庝箞鍋氱殑銆傚浣曞叏灞€鎹曡幏閿欒寮傚父鏌ヨVue鏂囨。銆傛垜浠彲浠ュ彂鐜板湪鍏ㄥ眬閰嶇疆涓湁杩欐牱涓€涓崟鑾烽敊璇殑澶勭悊閽╁瓙errorHandler銆傜敤娉曞緢绠€鍗曪細Vue.config.errorHandler=function(err,vm,info){//`info`鏄疺ue鐗规湁鐨勯敊璇俊鎭紝姣斿閿欒鎵€鍦ㄧ殑鐢熷懡鍛ㄦ湡閽╁瓙//2.2鎵嶆湁銆?+}鍙湁杩欎釜閽╁瓙鍙互澶勭悊澶у鏁癡ue搴旂敤涓殑閿欒锛堟瘮濡傜粍浠剁敓鍛藉懆鏈熶腑鐨勯敊璇紝鑷畾涔変簨浠跺鐞嗗嚱鏁板唴閮ㄩ敊璇紝v-onDOM鐩戝惉鍣ㄥ唴閮ㄦ姏鍑虹殑閿欒锛夛紝浠ュ強鑷甫鐨刬nfo鍙傛暟callback杩樻爣璁颁簡杩欎釜閿欒鍙兘灞炰簬鍝绫诲瀷鐨勯敊璇€傚悓鏃讹紝瀹冭繕鍙互澶勭悊杩斿洖鍒癙romise閾剧殑閿欒銆傚彲浠ヨ鏄緢寮哄ぇ浜嗭紝浣嗘槸涔熶笉鑳藉鐞嗘墍鏈夌殑寮傚父锛屼笉鐒舵枃绔犲氨瀹屼簡~鎺ヤ笅鏉ユ垜浠潵娴嬭瘯涓€涓嬨€傚厛鍦ㄥ叏灞€閿欒鎹曡幏涓緭鍑烘棩蹇楋紝寮€濮嬭繍琛岃姹傛暟鎹敊璇ず渚嬶細Vue.config.errorHandler=function(err,vm,info){console.log('vue寮傚父閿欒鎹曡幏:','Anerroroccurred鍦?+info)}涓紝鍙互鐪嬪埌寮傚父琚垚鍔熸崟鑾凤紝鍥犱负鎴戜滑妯℃嫙浜嗘暟鎹敊璇鑷存覆鏌撻敊璇紝鎵€浠ラ敊璇彂鐢熷湪娓叉煋灞傘€傚鏋滃嚱鏁颁腑鐨凱romise鍙戠敓閿欒鎬庝箞鍔烇紵璁╂垜浠瘯璇曪細asynccreated(){awaitthis.getSomeData()},method:{asyncgetSomeData(){constres=awaitthis.fetch()this.test=res},fetch(){asdasd=1//璧嬪€艰繖閲岀粰鏈畾涔夌殑鍙橀噺璧嬪€艰偗瀹氫細鎶ラ敊鏂规硶涓殑閿欒浠ユ煡鐪嬫晥鏋滐細Test.......doSomeThing(){aaaaaaaa=111111//灏嗗€艰祴缁欐湭瀹氫箟鐨勮繖閲岀殑variable鑲畾浼氭姤閿檥锛岃矊浼间簨浠朵篃鑳芥甯告崟鑾凤紝鎴戜滑鍐嶈瘯璇曞啓涓€涓粍浠讹紝鍦ㄧ粍浠堕噷鑷畾涔変竴涓簨浠讹紝鐪嬬湅缁撴灉锛?my-custom-comp@node-click="doSomeThing"/>//缁勪欢涓殑$emit瑙﹀彂锛歵his.$emit('node-click',item)杩欎釜寮傚父杩樻槸鎴愬姛鎹曡幏鐨勶紝褰撶劧lifecyclehook涓殑error寮傚父涔熸槸All鍙互鎴愬姛鎹曡幏锛屾墍浠ユ垜涓嶄細鍋氭洿澶氱殑婕旂ず銆傚埌姝や负姝㈡病鏈夐棶棰橈紝浣嗘槸濡傛灉Vue鍐呴儴涓嶆姤閿欐€庝箞鍔烇紵鍧忔寜閽?/buttonton>鍙互鐪嬪埌杩欎釜寮傚父娌℃湁琚垚鍔熸崟鑾枫€傚悓鏍凤紝濡傛灉澶栭儴JS浠ｇ爜鎶ラ敊锛屼篃鏃犳硶鎹曡幏銆備篃灏辨槸璇达紝杩欎釜閽╁瓙鍙兘鎹曡幏涓嶸ue鍏宠仈鐨勪簨浠跺畯浠诲姟涓殑閿欒銆傛崟鑾凤細.......fetch(){returnnewPromise((resolve)=>{setTimeout(()=>{asd=1//寮傛瀹忎换鍔″彂鐢熼敊璇痳esolve({})},1000)})}锛屽鏋淧romise寮傚父娌℃湁琚甯稿鐞嗭紝鍒欎笉浼氳鎹曡幏銆備互涓嬩唬鐮侊紝娉ㄦ剰create娌℃湁浣跨敤await鏉ヨ皟鐢ㄥ紓姝ユ柟娉曪細created(){this.getSomeData();},methods:{asyncgetSomeData(){await(asdasd=1);},},涓嬮潰鎴戜滑涓€涓€瑙ｅ喅杩欎袱绉嶅満鏅笅鐨勯敊璇崟鑾烽棶棰樸€傚鐞咼S涓殑棰濆閿欒锛屾垜浠彲浠ヤ娇鐢˙OM鎻愪緵鐨勫叏灞€閿欒澶勭悊鍑芥暟window.onerror鏉ュ皾璇曟崟鑾凤紝瀹冩帴鏀跺涓弬鏁帮細window.onerror=function(message,source,line,column,error){console.log('Globalcatcherror',message,source,line,column,error)}閿欒鐮侊細badbutton鐜板湪鍙互鎹曡幏鎵€鏈夌殑JS寮傚父閿欒锛屽寘鎷瑂etTimeout瀹弔asks寮傛閿欒涔熻兘琚崟鑾凤紝浣嗘槸鎴戜滑娉ㄦ剰鍒板鐞嗕笉褰撶殑Promise閿欒杩樻槸涓嶈兘琚垚鍔熸崟鑾枫€侾romise閿欒鐨勫鐞嗗弬鑰僔ue涓璭rror.js鐨勪唬鐮併€傚悓姝ヤ换鍔″紓甯告崟鑾锋槸涓€灞倀ry...catch...锛岃繖涔熻В閲婁簡涓轰粈涔圴ue鎹曡幏鐨勯敊璇笉浼氳鍏ㄥ眬鐨剋indow.onerror鍐嶆鎹曡幏锛屽洜涓鸿繖閲屽凡缁忔姏鍑恒€傚紓姝ヤ换鍔＄殑寮傚父澶勭悊灏辨槸鍒ゆ柇濡傛灉鏄疨romise锛岀劧鍚庡皢catch鎸囧悜閿欒澶勭悊锛氭垜浠彲浠ユā浠垮啓涓€涓彃浠舵潵澶勭悊Vue瀹炰緥涓柟娉曠殑寮傚父銆俧unctionisPromise(ret){returnret&&typeofret.then==='function'&&typeofret.catch==='function'}consthandleMethods=(instance)=>{if(instance.$options.methods){璁゛ctions=instance.$options.methods||{}for(constkeyinactions){if(Object.hasOwnProperty.call(actions,key)){letfn=actions[key]actions[key]=function(...args){letret=args.length>0锛焒n.apply(this,args):fn.call(this)if(isPromise(ret)&&!ret._handled){ret._handled=true杩斿洖ret銆俢atch((e)=>errorHandler(e,this,`CaughtanunhandledPromiseexception:(Promise/async)`))}}}}}}exportdefault{install:(Vue,options)=>{Vue.mixin({beforeCreate(){this.$route.meta.capture&&handleMethods(this)},})},}鍥犱负閬嶅巻鎵€鏈夋柟娉曞彲鑳戒細瀵艰嚧椤甸潰鎬ц兘鎹熷け锛屾墍浠ヨ繖閲屾垜鍔犱簡涓€涓潯浠讹紝闇€瑕佸湪璺敱涓彧鏈夎缃甿eta鎵嶈兘寮€鍚缁勪欢涓嬫柟娉曠殑棰濆寮傚父鎹曡幏銆傚啀娆″皾璇曚笂闈㈢殑閿欒浠ｇ爜浠ユ煡鐪嬬粨鏋滐細created(){this.getSomeData();},methods:{asyncgetSomeData(){await(asdasd=1);},},鍙互姝ｅ父鎹曡幏锛宼his鏂规硶鐨勫ソ澶勬槸鎴戜滑鍙互浼犲叆鍙戠敓閿欒鐨勫疄渚嬩俊鎭€傚鏋滀笉鎯崇敤杩欎釜鏂规硶锛屾垨鑰呯敤setup鏂规硶浠ｆ浛Vue3涓璷ptions鐨勫啓娉曪紝涔熷彲浠ヤ娇鐢ㄥ叏灞€浜嬩欢鐩戝惉鍣ㄦ潵鎹曡幏锛歸indow.addEventListener('unhandledrejection',(event)=>{console.log('鍏ㄥ眬鎹曡幏鏈鐞嗙殑Promise寮傚父',event)})瀹屾暣浠ｇ爜errorPlugin.jsfunctionerrorHandler(err,vm,info){console.log('vueexceptionerrorcapture:','errorinformation'+info)//TODO:澶勭悊閿欒鎶ュ憡}consthandleMethods=(instance)=>{if(instance.$options.methods){letactions=instance.$options.methods||{}for(constkeyinactions){if(Object.hasOwnProperty.call(actions,key)){letfn=actions[key]actions[key]=function(...args){letret=args.length>0锛焒n.apply(this,args):fn.call(this)if(isPromise(ret)&&!ret._handled){ret._handled=truereturnret.catch((e)=>errorHandler(e,this,`鎶撳埌涓€涓湭澶勭悊鐨凱romise寮傚父锛?Promise/async)`))}}}}}}functionisPromise(ret){returnret&&typeofret.then==='function'&&typeofret.catch==='function'}letGlobalError={install:(Vue,options)=>{Vue.config.errorHandler=errorHandler//eslint-disable-next-linemax-paramswindow.onerror=function(message,source,line,column,error){errorHandler(message,null,'鍏ㄥ眬鎹曡幏閿欒')//console.log('鍏ㄥ眬鎹曡幏閿欒',message,source,line,column,error)}window.addEventListener('unhandledrejection',(event)=>{errorHandler(event,null,'鍏ㄥ眬鎹曡幏鏈鐞嗙殑Promise寮傚父')})Vue.mixin({beforeCreate(){this.$route.meta.capture&&handleMethods(this)},})},}exportdefaultGlobalErrorintroducedinmain.jsimportvuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'Vue.config.productionTip=false//寮曞叆閿欒澶勭悊鎻掍欢importErrorPluginfrom'./errorPlugin'Vue.use(閿欒鎻掍欢)newVue({router,render:(h)=>h(App),}).$mount('#app')鍦╒ue3涓彲浠ラ€氳繃鍦╩ain.js涓紩鍏ユ彃浠舵潵浣跨敤锛歩mport{createApp}from'vue'浠?./App.vue'瀵煎叆搴旂敤绋嬪簭浠?./router'瀵煎叆璺敱鍣ㄤ粠'./errorPlugin'瀵煎叆閿欒鎻掍欢createApp(App).use(router).use(ErrorPlugin).mount('#app')End濡傛灉闇€瑕佹洿涓板瘜鐨勯敊璇敹闆嗗拰鍒嗘瀽鍔熻兘锛岃繕鏄浣跨敤缁煎悎鎬х殑閿欒璺熻釜鏈嶅姟锛屾瘮濡係entry銆丅ugsnag锛屼絾鏄浉瀵规潵璇达紝杩欎簺閮介渶瑕佸ぇ閲忕殑閰嶇疆鍜岄儴缃叉搷浣滄崟鑾峰紓甯搁敊璇紝鎻愰珮浠ｇ爜鐨勫仴澹€э紝骞朵笖閬垮厤鍦ㄤ唬鐮佷腑鍐欏ぇ閲忕殑寮傚父鎹曡幏鍧楋紝涔熷噺灏戜簡鍑虹幇閿欒鏃舵帶鍒跺彴澶ч噺鐨勭孩鑹插憡璀︺€傞敊璇敹闆嗗彲浠ュ府鍔╂垜浠畾浣嶅紑鍙戞祴璇曢樁娈典笉鏄撳彂鐜扮殑鐤戦毦鏉傜棁锛屽彲浠ラ€氳繃http璇锋眰鍚戞湇鍔″櫒鍙戦€侀敊璇俊鎭€備互涓婂氨鏄枃绔犵殑鍏ㄩ儴鍐呭锛屽笇鏈涘澶у鏈夋墍甯姪锛佽寰楁枃绔犲啓寰楀ソ锛屽彲浠ョ偣璧炴敹钘忋€備篃娆㈣繋鎮ㄥ叧娉ㄣ€傛垜浼氭寔缁洿鏂版洿澶氭湁鐢ㄧ殑鍓嶇鐭ヨ瘑鍜屽疄鐢ㄦ妧宸с€備竴鏃ヨ尪鏃犲懗锛屾効涓庝綘鍏卞悓鎴愰暱~
