# @ksyun/mt

> > monitor frontend & error report > support plugin

Latest version **0.0.2** (published 2020-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ksyun/mt
pnpm add @ksyun/mt
yarn add @ksyun/mt
bun add @ksyun/mt
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-04-13 |
| First published | 2020-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wangjianliang |
| Maintainers | hyuni, javey, lynn.wang, ws7she, x6doooo |
| Keywords | monitor, frontend, &, error, report |

## Links

- npm: https://www.npmjs.com/package/@ksyun/mt
- Repository: https://github.com/0851/mt
- Homepage: https://github.com/0851/mt#readme
- Issues: https://github.com/0851/mt/issues
- npm.io page: https://npm.io/package/@ksyun/mt

## Dependencies (3)

- [chart.js](https://npm.io/package/chart.js.md) ^2.9.3
- [typescript](https://npm.io/package/typescript.md) ^3.8.3
- [number-precision](https://npm.io/package/number-precision.md) ^1.3.2

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2020-04-13
- 0.0.1 — 2020-04-13

## README

# MT
> monitor frontend & error report
> support plugin

# install
```bash
# ing...
```

### usage
```ts
import Mt from 'mt'
import MtPanel from 'mt/dist/mt-panel'
import MtFps from 'mt/dist/mt-fps'
import MtError from 'mt/dist/mt-error'

let monitor = new Mt({
  //  relate product
  product: 'test',
  //  relate user
  uid: 'test',
  // report url , will stop report if empty | undefined
  reportUrl: `http://${location.hostname}:8000/log`
})

let fps = new MtFps()
let err = new MtError(100000, 100, 10)
let panel = new MtPanel(fps)

monitor
  .plugin(fps)
  .plugin(err)
  .plugin(panel)

monitor.run()
```

### main 
> Collect Performance Data

  - data struct **IPerformance**
  
  ```ts
  export interface INetworkPerformance {
    // dns 耗时
    dnstime: number
    // tcp链路消耗时间
    tcptracetime: number
    // request 请求时间从服务器到浏览器时间
    requesttime: number
    // response request 结果内容加载时间
    responsetime: number
    // 总体网络耗时
    allnetworktime: number
    // 跳转耗时
    redirect: number
  }
  export interface IPerformance extends INetworkPerformance {
    // 解析dom树消耗时间
    domcompiletime: number
    // 完全白屏时间
    whitetime: number
    // dom树ready的时间
    domreadytime: number
    // onload 的时间
    onloadtime: number
    // cache 耗时
    appcachetime: number
    // 重定向次数
    redirectCount?: number
    // 静态资源性能
    entries: IPerformanceEntry[]
    // 原始新能指标对象
    timing: PerformanceTiming
  }

  export interface IPerformanceEntry extends INetworkPerformance {
    size: number
    name: string
    // 原始性能指标
    timing: PerformanceEntry
  }
  ```


### plugin fps
> timing collect fps data & report server **reportUrl** must be set

### plugin error
> hijack error log & report server **reportUrl** must be set

### plugin panel
> show frontend monitor data dialog panel
> 
> **need import 'mt/dist/mt-panel.css'**

![](./static/1.png)

### TODO

- [ ] ~~webpack plugin support auto mounted frontend entry~~
- [ ] ~~report data compress~~
- [x] vue error report
- [x] console.error report
- [x] request time
- [x] reset report data interface
- [x] ~~server platform support analyze report data & alarm~~ , usage open source analyze server
- [ ] unit test

---
_Source: https://npm.io/package/@ksyun/mt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._