https://github.com/mangotsing/shatter_monitor

A tiny tool for Site Error & Performance & Behavior Monitor.It is a shatter monitor tool, but it can be combined to form a complete tool.
https://github.com/mangotsing/shatter_monitor

browser-monitor javascript monitor tiny

Last synced: about 2 months ago
JSON representation

A tiny tool for Site Error & Performance & Behavior Monitor.It is a shatter monitor tool, but it can be combined to form a complete tool.

• Host: GitHub
• URL: https://github.com/mangotsing/shatter_monitor
• Owner: MangoTsing
• License: mit
• Created: 2020-11-12T11:23:22.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-29T08:25:12.000Z (about 4 years ago)
• Last Synced: 2024-04-24T00:28:20.076Z (9 months ago)
• Topics: browser-monitor, javascript, monitor, tiny
• Language: TypeScript
• Homepage:
• Size: 176 KB
• Stars: 1
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



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](https://cdn.jsdelivr.net/npm/[email protected]/build/index.min.js).

Specific options information may be viewed in [index.ts file](https://github.com/MangoTsing/shatter_monitor/blob/master/src/types/index.ts)

More features(like hooks) in development...

## Next

- 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)

## Usage

### CDN

```

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

});

```

### Vue

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.

## Dev

```

yarn

yarn watch

cd examples && http-server // 8080

// new terminal

cd examples && http-server // 8081

```