收集web性能数据和web错误的sdk
npm run watch // Watch tsfile change and compile by rollup
npm run server // Start a nodejs test server
Then visit localhost:3000
for example test
npm run build
npm run test
<script src="https://cdn.jsdelivr.net/npm/xb-tracking-sdk@1.0.0/dist/index.umd.js"></script>
<script>
const monitor = FeMonitor.WebMonitor.init({
error: {
repeat: 10000
},
reportUrl: "/api/reportUrl",
performance: true
});
//使用vue
monitor.useVueErrorListener(Vue);
monitor.on("event", (eventName, emitData) => {
console.log(eventName, emitData);
});
</script>
npm i xb-tracking-sdk -S
import { WebMonitor } from "xb-tracking-sdk";
const monitor = Monitor.init();
/* Listen single event */
monitor.on([event], (emitData) => {});
/* Or Listen all event */
monitor.on("event", (eventName, emitData) => {});
// Default full options
export const defaultTrackerOptions = {
env: "dev",
reportUrl: "",
data: {},
error: {
watch: true, // If listen all error
random: 1, // Sampling rate from 0 to 1, 1 means emit all error
repeat: 5, // Don't emit sample error events when exceed 5 times
delay: 1000 // Delay emit event after 1000 ms
},
performance: false, // If want to collect performance data
http: {
fetch: true, // If listen request use fetch interface
ajax: true // If listen ajax request
},
behavior: {
watch: false,
console: [ConsoleType.error],
click: true, // If set to true will listen all dom click event
queueLimit: 20 // Limit behavior queue to 20
},
/**
* rrweb use mutation observer api, for compatibility see:
* https://caniuse.com/mutationobserver
*/
rrweb: {
watch: false,
queueLimit: 50, // Limit rrweb queue to 20
delay: 1000 // Emit event after 1000 ms
},
isSpa: true // If watch is true, globalData can get _spaUrl for report when route change
};
const monitor = Monitor.init(defaultTrackerOptions);
Sdk support Vue.config.errorHandler
to handle error for get detail component info. You just need to call useVueErrorListener
before create Vue instance.
monitor.useVueErrorListener(Vue)
EventName | Description |
---|---|
jsError | js执行错误 winodw.onerror |
vuejsError | Vue执行错误 Vue.config.errorHandler |
unhandleRejection | 处理promise异常错误 window.onunhandledrejection |
resourceError | 资源加载错误 Resource request error |
reqError | http请求出错 Network request error |
performanceInfoReady | 性能数据 Performance data is ready |