前端日志监控系统 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): void;2. 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[]): void;3. 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): void;4. 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>): void;5. window.BetterMonitor.addView
interface IParamsAddView {
pageUrl: string;
userId: string | number;
}
function addView(params: IParamsAddView): void;Support 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...