前端日志监控系统 Documentation
How to use?
1. Get your own project id
Log in and create your own project, and you can find your project id in your project list.
2. Integrate into your website
In the simplest case, only one line of code is necessary.
<script crossorigin="anonymous" data-project-id="<your-project-id>" src="https://www.verysites.com/verybugs/better-monitor/better-monitor.min.js"></script>That's all.
More apis
1. window.BetterMonitor.addBug
interface IParamsAddBug {
pageUrl: string
message: string
stack: string
source: string
type: string
}
function addBug (params: IParamsAddBug): void2. window.BetterMonitor.printLog, window.BetterMonitor.printWarn, window.BetterMonitor.printError
Same as console.log, console.warn, and console.error. Logs will not be reported immediately.
If you want report logs immediately, you can use window.BetterMonitor.printLogDirectly, window.BetterMonitor.printWarnDirectly, window.BetterMonitor.printErrorDirectly.
function printLog(...args: any[]): void
function printLogDirectly(...args: any[]): void
function printWarn (...args: any[]): void
function printWarnDirectly (...args: any[]): void
function printError(...args: any[]): void
function printErrorDirectly(...args: any[]): void3. window.BetterMonitor.logTime, window.BetterMonitor.logTimeEnd.
Same as console.time, and console.timeEnd.
window.BetterMonitor.logTimeEnd will not trigger reporting immediately, whereas window.BetterMonitor.logTimeEndDirectly will trigger reporting immediately.
function logTime(label: string): void
function logTimeEnd(label: string): void
function logTimeEndDirectly(label: string): void4. window.BetterMonitor.init
interface IStore {
projectId: string
// whether report api log
log: boolean
// whether report view log, e.g. UV, PV
view: boolean
// whether report js runtime error
error: boolean
// whether report action log
action: boolean
// black list, in which matching log will not be reported
blackList: Array<string | RegExp>
userId: undefined | string | number
getUserId: undefined | (() => string | number) | (() => Promise<string | number>)
}
function init (settings: Partial<IStore>): void5. window.BetterMonitor.addView
interface IParamsAddView {
pageUrl: string
userId: string | number
}
function addView (params: IParamsAddView): voidSupport for Vue2/Vue3
If you use Vue, you need to add some more code in order to catch errors. Because Vue will catch them and print them by console.error without throw them out by default.
For Vue3, you need to add code like below:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.errorHandler = function (err, vm, info) {
// eslint-disable-next-line no-console
console.error('errorHandler', err, vm, info)
window.BetterMonitor.addBug({
pageUrl: location.href,
message: err?.message || 'unknown bug',
stack: err?.stack || '',
source: [`name=${vm?._?.type?.__name}`, `scopeId=${vm?._?.type?.__scopeId}`].join('&'),
type: info
})
}
// other code...And for Vue2, you need to add some code like below:
import Vue from 'vue'
// other code...
Vue.config.errorHandler = function(err, vm, info) {
// eslint-disable-next-line no-console
console.error('errorHandler', err, vm, info)
if (window.BetterMonitor && window.BetterMonitor.addBug && typeof window.BetterMonitor.addBug === 'function') {
try {
window.BetterMonitor.addBug({
pageUrl: location.href,
message: (err && err.message) || 'unknown bug',
stack: (err && err.stack) || '',
source: [
`name=${(vm && vm.$vnode && vm.$vnode.tag) || ''}`,
`data=${(vm && vm._data) ? JSON.stringify(vm._data) : ''}`
].join('&'),
type: info
})
} catch (err) {
// eslint-disable-next-line no-console
console.log(err)
}
}
}
// other code...