Giter Club home page Giter Club logo

mt's Introduction

MT

monitor frontend & error report support plugin

install

# ing...

usage

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

TODO

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.