README_en.md

Welcome to ZephyrMonitor 👋🏼

简体中文 | English

A front-end monitoring tool that includes functions such as monitoring errors, monitoring first screen performance, collecting device information and monitoring network status.

• Collects and reports errors generated by the front-end and supports the capture of cross-domain Javascript file errors.

  E.g. JavaScript, Promise, Resource, Vue type errors

• Support for reporting first screen performance and loading status of page resources, calculating data on multiple key performance nodes for page performance optimisation reference.

  E.g. First byte, first interactable time, page load completion time, time taken to parse dom tree...

• Provide device information for the runtime environment based on the above functions.

  E.g. Model, network environment, browser information, resolution...

• Support for reporting console custom type output messages.

• Support for reporting the current page speed at custom intervals.

The error message can be reported to the server and the stack information can be parsed with sourcemap to locate the error in the original file, making it easier to resolve the error in the project.

See specific examples of use：zephyr-monitor-use-demo

⚙️ Install Or Build

Install

npm install zephyr-monitor

cnpm install zephyr-monitor -S

yarn add zephyr-monitor

Build

git clone git@github.com:ZephyrAndMoon/zephyr-monitor.git

npm install / cnpm install / yarn

npm run build
# The packaged file will be output as: dist/ZephyrMonitor.min.js 

🔗 Import

<!-- <script> import -->
<script src="ZephyrMonitor.min.js"></script>

// ES module
import ZephyrMonitor from "zephyr-monitor";

// CommonJS
const ZephyrMonitor = require("zephyr-monitor");

📖 Quickly Use

// Initialize the basic configuration of the tool
const ZM = new ZephyrMonitor({
   pageId:""  // page ID
})

// Error monitoring initialization
ZM.initError({
    url:"",       // report url
});

// Page performance monitoring initialization
ZM.initPerformance({
    url:"",       // report url
    useNetworkSpeed:true, // Timed interval reporting of network speed, default false
});

💡 Method Parameters

new ZephyrMonitor

• pageId

  String（require）

  Page ID

• useLogger

  Boolean

  • Enable console log output

  • Default on, set to false if you need to turn it off

• useCrossorigin

  Boolean

  Positioning of error messages for error reporting in cross-domain JavaScript files

new ZephyrMonitor().initError

• url

  String（require）

  Report url

• reportMethod

  Object

  Reporting method, default XHR upload （If more than one sub-parameter is passed in, the default order is Img - Fetch - Beacon - XHR）

  • reportMethod.useImg: Boolean default false，upload using Img tags
  • reportMethod.useFetch: Boolean default false，upload using the Fetch method
  • reportMethod.useBeacon: Boolean default false，upload using the Beacon method

• error

  Object

  Error types to catch, default JavaScript type、 resource type、 Promise type errors

  • error.vue: Boolean default false，catching Vue type errors
  • error.console: Boolean default false，capture printout type log
  • error.js: Boolean default true，catching Javascript type errors
  • error.resource: Boolean default true，catching resource load type errors
  • error.promise: Boolean default true，catching Promise type errors

• vue

  VueConstructor

  To enable Vue type error catching you need to pass in the introduced Vue

  import Vue from "vue";
  
  ZephyrMonitor.initError({
  // ...
  vue: Vue, 
  });

• extendsInfo

  String

  Customised extension information

new ZephyrMonitor().initPerformance

• url

  String（require）

  Report url

• usePerf

  Boolean

  Enable page performance monitoring, default true

• useResource

  Boolean

  Enable resource load monitoring, default true

• usefulResourceType

  Object

  The monitored resource type, default script/css/fetch/xmlhttprequest/link/img

  • usefulResourceType.useRScript: Boolean default false，monitoring the loading of script tag type resources
  • usefulResourceType.useRCSS: Boolean default false，monitoring the loading of css tag type resources
  • usefulResourceType.useRLink: Boolean default false，monitoring the loading of link tag type resources
  • usefulResourceType.useRImg: Boolean default false，monitoring the loading of Img tag type resources
  • usefulResourceType.useRFetch: Boolean default false，monitoring the loading of resources fetched by Fetch
  • usefulResourceType.useRXHR: Boolean default false，monitoring the loading of resources fetched by XHR

• reportMethod

  Object

  Same as in FrontEndMonitor.initError

• useNetworkSpeed

  Boolean

  Enable timed speed information reporting, default false, interval is 60s

• timeInterval

  Number

  Interval for reporting network speed information

🔎 Parameters Of The Reported Info

Error

{
    pageId: String,        // Page ID
    time: String,          // The time when the error occurred
    category: String,      // Type of error
    logType: String,       // Type of information
    logInfo: {                  
        url: String,       // The url where the error occurred
        stack: String,     // Error stack(unanalysed)
        errorInfo: String, // Error message
        otherInfo: Object  // Other information
    },
    deviceInfo: Object,    // Device information, as described under "Equipment information objects" below
    extendsInfo: Object    // Customised extension information
}

Performance

{
    pageId: String,                   // Page ID
    time: String,                     // The time when the error occurred
    markUser: String,                 // User identification
    markUv: String,                   // Unique Visitor
    deviceInfo: Object,               // Device information, as described under "Equipment information objects" below
    performance: {
       analysisTime: String,          // Time consumed by parsing dom trees
        blankTime: String,            // Time consumed by white screen
        dnsCacheTime: String,         // Time consumed by DNS query cache
        dnsTime: String,              // Time consumed by DNS query
        domReadyTime: String,         // Time consumed for dom loading to complete
        firstInteractTime: String,    // Time consumed for the first interactable
        pageLoadedTime: String,       // Time consumed for page load completion
        redirectTime: String,         // Time consumed by redirects
        resTime: String,              // Time consumed by data transfer
        tcpTime: String,              // Time consumed by tcp connections
        ttfbTime: String,             // First Byte Duration
        unloadTime: String,           // Time consumed to unload the page
    },
    resource:[
        {
            dnsTime: String,          // Time consumed by DNS query
            initiatorType: String,    // Type of resource requested
            name: String,             // The path to the requested resource or the name of the resource
            nextHopProtocol: String,  // http protocol version
            redirectTime: String,     // Time consumed by redirects
            reqTotalTime: String,     // Time consumed by requests and responses
            responseTime: String,     // Time consumed to receive a response
            tcpTime: String,          // Time consumed by tcp connections
            ttfbTime: String,         // First Byte Duration
        }
   ]
}

NetworkSpeed

{
  pageId: String,        // Page ID
  time: String,          // Record time
  category: String,      // Type of log
  logType: String,       // Type of information
  networkSpeed: String,  // Network speed
  deviceInfo: Object,    // Device information, as described under "Equipment information objects" below
  extendsInfo: Object    // Customised extension information
}

Device

{
    deviceType: String,        // Type of device
    browserInfo: {
        name: String,          // Browser name
        version: String,       // Browser version
    },
    engineInfo: {
        name: String,          // Engine name
        version: String,       // Engine version
    },
    detailInfo: {              // This information is null when deviceType is PC
        vendor: Boolean,       // device brands
        model: String,         // device model
        type: String,          // device type
    },
    OSInfo:{
        name: String,          // OS name
        version: String,       // OS version
    },
    fingerprint: String,       // Browser fingerprint
    language: String,          // Current language
    netWork: String,           // Network Status
    orientation: String,       // Horizontal and vertical screen status
    screenHeight: Number,      // Height of device
    screenWidth: Number,       // Width of device
    userAgent: String          // User Agent