• Stars
    star
    126
  • Rank 284,543 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

📹 A SDK for web error and performance monitor. web前端错误及性能监控SDK,JS执行错误、资源加载异常、HTTP请求异常、行为监控等

femonitor-web · GitHub license npm version Downloads

A SDK for web error and performance monitor wrote on typescript.

Screenshot

screenshot

Example

Online example: http://monitor.huzerui.com

Open chrome developer tool to see console information

Feature

  • Error observe, includes js error, unhandle rejection error, http error and resource error
  • Error sampling, support errors collection emit events for report optimization
  • Observe page performance
  • Observe user behaviors, includes console, user click event
  • Integrate rrweb
  • Hack spa router change
  • Auto report error events by config

Development

npm run watch  // Watch tsfile change and compile by rollup
npm run server // Start a nodejs test server

Then visit localhost:3000 for example test

Build

npm run build

Test

npm run test

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

NPM

npm i femonitor-web -S

Usage

Minimal options

import { Monitor } from "femonitor-web";
const monitor = Monitor.init();
/* Listen single event */
monitor.on([event], (emitData) => {
  // Do report
  // ...
});
/* Or listen some events by pass Array, eg: only listen error events */
monitor.on(
  ["jsError", "unhandleRejection", "resourceError", "vuejsError", "reqError"],
  (eventName, emitData) => {
    // Do report
    // ...
  }
);
/* Or Listen all events, not recommend */
monitor.on("event", (eventName, emitData) => {
  // Do report
  // ...
});

Full options

// Default full options
export const defaultTrackerOptions = {
  env: "dev",
  // Auto report config, only error events(jsError, unHandleRejection, resourceError, reqError, vuejsError) take effect
  report: {
    url: "",  // Report url, set a correct reportUrl to open autoReport switch
    method: "POST",
    contentType: "application/json",
    beforeSend: (data) => data  // Decorate report data before request send, support decorate or return object to overrite
  },
  data: {},
  error: {
    watch: true, // If listen all error
    random: 1, // Sampling rate from 0 to 1, 1 means emit all error
    repeat: 5, // 5 means don't emit sample error events when exceed 5 times. Be careful to set large number because if your report handler cause error, it would probably cause js dead cycle
    delay: 1000 // Delay emit event after 1000 ms
  },
  performance: false, // If want to collect performance data
  http: {
    fetch: true, // If listen request use fetch interface
    ajax: true, // If listen ajax request
    ignoreRules: [] // If request url match rules, interceptor won't emit events. Support string and regexp
  },
  behavior: {
    watch: false,
    console: [ConsoleType.error],
    click: true, // If set to true will listen all dom click event
    queueLimit: 20 // Limit behavior queue to 20
  },
  /**
   * rrweb use mutation observer api, for compatibility see:
   * https://caniuse.com/mutationobserver
   */
  rrweb: {
    watch: false,
    queueLimit: 50, // Limit rrweb queue to 20
    delay: 1000 // Emit event after 1000 ms
  },
  isSpa: true // If watch is true, globalData would add _spaUrl property when route change
};
const monitor = Monitor.init(defaultTrackerOptions);

Vue project

Sdk support Vue.config.errorHandler to handle error for get detail component info. You just need to call useVueErrorListener before create Vue instance.

monitor.useVueErrorListener(Vue)

React project

React supply a hook called componentDidCatch for error listen and concept called ErrorBoundary which is enabled to catch errors at top and prevent app to shutdown. You can report it by yourself like below.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    reportError(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Support events

EventName Description
jsError winodw.onerror
vuejsError Vue.config.errorHandler
unhandleRejection window.onunhandledrejection
resourceError Resource request error
reqError Network request error
batchErrors Batch collection of error events, includes 'jsError', 'vuejsError', 'unHandleRejection', 'resourceError' and 'reqError' , trigger every specified time interval
reqStart Network request start
reqEnd Network request end
performanceInfoReady Performance data is ready
event Includes all events above

More Repositories

1

vue2.0-demo

A simple Vue.js spa using vue-material
JavaScript
279
star
2

wx-guita_tab

🎸 A wechat guita app for guita learner.
JavaScript
139
star
3

PetalFM

🎵 A simple and delicate Music FM SPA built with react.
JavaScript
76
star
4

vue-qiniu-image-bed

Vue-SPA-image-bed for qiniu image management.
Vue
70
star
5

react-epub-reader

📚 A react epub reader powered by epubjs
TypeScript
39
star
6

jquery-mobile-player

A mobile music player base on jQuery
JavaScript
37
star
7

node-guita-spider

API grabbing of the guitar spectrum web site 聚合吉他谱API
JavaScript
25
star
8

electron-roll-tool

An electron app for random extraction of name list. 基于electron的课堂点名、课堂抽奖程序
JavaScript
20
star
9

femonitor-wx

📹 A SDK for wechat miniprogramme error and performance. 微信小程序错误及性能监控SDK
TypeScript
17
star
10

kinfer

Kindle CMD tool:A commander for transform epub or azw3 to mobi in windows platform.
JavaScript
14
star
11

watermask

A library for watermasking web pages by canvas 网页添加图片或文字水印
JavaScript
3
star
12

gh-img-upload

Upload base64 image to github by github token, compatible with nodejs and browser environment.
TypeScript
3
star
13

blog

Writing space
JavaScript
3
star
14

ghost-storage-github-jsdelivr

Ghost adapter for upload to github and get jsdelivr link.
JavaScript
1
star
15

imgbed-for-github

🎉 七牛、Github图床谷歌插件,支持一键粘贴Markdown链接到Github编辑器
JavaScript
1
star
16

webpack4-multipage-kit

Webpack4 multipage kit
CSS
1
star
17

ghost-cdnimg-store

Ghost adapter for upload to by upimg and get cdn link.
JavaScript
1
star
18

IBM-cloud

1
star
19

generator-rollup-tslib-starter

A typescript-rollup library development template
JavaScript
1
star
20

docker-ghost-github-adapter

A Docker image that runs the Ghost CMS with an cdnimg and github storage adapter installed.
Dockerfile
1
star
21

alex1504

1
star