better-monitor ​

点击此处查看中文文档。

JS SDK used to report data to server for better website monitoring (integrated with backend server, so you can use our official admin panel directly).

Features ​

• 🔥 Report PV (page view) data. So you can know which pages are visited and among them which pages are the most commonly visited.
• 🔥 Report UV (user view) data. So you can know how many users visited your project.
• 🔥 Report BV (browser view) data. So you can know which OS (operating systems) and browsers are used to visit your project, and you can then define your frontend compatibility plan.
• 🔥 Report api request and response data. Our sdk can monitor your AJAX request triggered by raw XMLHttpRequest, Axios, jQuery and so on. So you can find which apis are slow in response time.
• 🔥 Report JavaScript runtime bugs data.
• 🔥 Report user actions data, in time order.
• 🔥 Report performance data: CLS, TTFB, LCP, FCP and FID.

Usage ​

Get your project ID ​

First, you need to register and login the admin panel to get your project id.

Include SDK and config ​

Install better-monitor as your package dependency:

npm install -S better-monitor

And then you can initialize BetterMonitor configuration like below:

import BetterMonitor from 'better-monitor'

BetterMonitor.init({
  // fill in your project ID here
  projectId: 1,
})

That's all.

**If you are not using NPM, you can also include the SDK through HTML Script element and config directly on the script element.

<!-- data-project-id is where you fill in your project ID -->
<script crossorigin="anonymous" data-project-id="1" src="https://cdn.orzzone.com/verybugs/better-monitor.min.js"></script>

APIs ​

The SDK exports some useful api:

BetterMonitor.printLog ​

BetterMonitor.printLog is almost the same as console.log except for the following differences:

• Outputted logs will be prefixed with date string.
• Logs will be reported to the server with log level set to log, so you can view them in the admin panel.

BetterMonitor.printLog('test')
BetterMonitor.printLog('test', { a: 1 }, 'hello')

And the output is like:

BetterMonitor.printWarn ​

Like BetterMonitor.printLog but diff in:

• Text color is between yellow and brown.
• Log level is set to warn.

BetterMonitor.printError ​

Like BetterMonitor.printLog but diff in:

• Text color is red.
• Log level is set to error.

BetterMonitor.logTime, BetterMonitor.logTimeEnd ​

BetterMonitor.logTime and BetterMonitor.logTimeEnd should be used together, like console.time and console.timeEnd. But they differ from console.time and console.timeEnd in that:

• If time duration is less than 100ms, output text will be attached with quick note, and reporting log level will be set to log.
• If time duration is equal to or greater than 100ms, output text will be attached with slow note, and reporting log level will be set to error.

So you can quickly filter and find slow actions.

BetterMonitor.init ​

Initialize SDK configuration. Normally you only need to pass in projectId parameter.

BetterMonitor.init({
  projectId: 1,
})

BetterMonitor.addView, BetterMonitor.addBug ​

These apis are rarely used, please refer to the source code.

Snapshots ​

Dashboard:

Api log:

Bug log:

User action log list:

User action log file:

Project management:

License ​

MIT.