Vue3學習與實踐 全域性異常監控

每個web專案上線後，難免會出現各種奇奇怪怪的bug，或網路，或系統無法，或相容適配，或測試遺漏等等原因。為了能更快的定位問題，解決問題，所以新增前端異常監控至關重要。本文就具體介紹一下怎麼在vue3專案中配置全域性異常監控。

在vue專案中，錯誤異常監控可從以下三個方法入手：

特點：語法：

window.onerror = function(message, source, lineno, colno, error) 

// or
window.addeventlistener('error', function(event) )

特點：配置：

console.log(err, vm, info)

// do something

}引數：

特點：配置：

新建commonapi.js檔案，封裝http介面請求

// src/api/commonapi.js

import store from '@/store';
const ostype = (function () 
if (/(iphone|ipad)/.test(ua)) 
return 3;
}());
const isprod = process.env.node_env === 'production';
export default ,
});},
}

// src/common/errorhandler.js

import  from 'vue';
import commonapi from '@/api/commonapi';
export default  \n發生錯誤：$ \n所在生命週期：$`,
});});
},async onerror(message, source, lineno, colno, error) \n錯誤url: $\n錯誤行號: $`,
});},
};

// src/main.js

import errorfn from './common/errorhandler';
const isprod = process.env.node_env === 'production';
// ...
if (isprod) 
// ...

使用了onerrorcaptured建議返回 false，避免收集重複的錯誤資訊。

errorhandler和onerrorcaptured不能收集非同步錯誤。

vue2 和 vue3 中的使用方法類似，onerrorcaptured是vue3組合式api的方法，vue2中使用errorcaptured鉤子即可。

Vue3 全域性 Api 與 v model 的使用

vue2 中的 global api 在 vue3 中 改為 應用程式例項呼叫，如自定義元件 vue2 使用 vue.component 方式 import vue from vue vue.component import from vue component comp 同時部分 api 改為了可...

vue3學習筆記

vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶，雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層，可使用inheritattrs false 取消預設，在需要繼承的屬性的標籤使用v...

vue3學習總結

v model 2.x語法 title.sync oldvalue childcomponent this emit update title newvalue 3.x語法v model title oldvalue childcomponent 所有v model不到引數，一定要改變道具和事件名稱...