A tiny tool for Site Error & Performance & User Behavior Monitor.
It is a shatter monitor tool, but it can be combined to form a complete tool.
There is release @1.0.11.
Specific options information may be viewed in index.ts file
More features(like hooks) in development...
- Perfect Beacon method
- Merge Many Same Errors happened in a moment
- Add more hooks
- Support Performance Monitor (a part of shatter_monitor)
- Support Behavior Monitor (a part of shatter_monitor)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.min.js"></script>
<script>
const { ShatterInit } = shatter
const Shatter = new ShatterInit({
dsn: 'https://your.site.com',
appkey: 'mangotsing',
debug: false,
beforeSendData: () => {
console.log('test')
return true
},
usage: 'all', // or ['ErrorForShatter', 'PerformanceForShatter', 'BehaviorForShatter']
onlyImg: true,
blockConsole: true
});
</script>
In the Vue Project, In addition to the original function, the $report method is also mounted on this
You can use it for your async methods Error Report, like this:
this.$report(params: SendType)
Suggest Vue Project use blockConsole: true, otherwise vue warn will cause repeated errors.
//terminal
npm install --save shatter_monitor
// main.js
import { ShatterErrorVue } from 'shatter_monitor'
// vue 2.x
Vue.use(ShatterErrorVue, {
dsn: 'https://your.site.com',
appkey: 'mangotsing',
debug: false,
beforeSendData: () => {
console.log('test')
return true
},
blockConsole: true
onlyImg: true,
blockTry: true
})
// or vue-next
const app = createApp()
app.use(ShatterErrorVue, {
dsn: 'https://your.site.com',
appkey: 'mangotsing',
debug: false,
beforeSendData: () => {
console.log('test')
return true
},
onlyImg: true,
blockTry: true
})
If your browser support navigator.sendBeacon function, will use it.
Otherwise use Image() to send a get request for monitor.
yarn
yarn watch
cd examples && http-server // 8080
// new terminal
cd examples && http-server // 8081