Monitoring For the front-end, I think there are three definitions, namely “performance monitoring”, “exception monitoring” and “data monitoring”

  • Performance monitoring focuses on the performance of Web applications, including user experience and user interaction time
  • Exception monitoring refers to the monitoring of Web applications that fail to achieve the expected results
  • Data monitoring is to obtain the behavior data feedback of the user’s using process

1. Monitor performance

Performance monitoring enables you to better monitor the Performance of current applications and optimize the Performance based on the feedback. Performance affects user experience. You can view common Performance indicators in Performance

1.1 Performace

Allows access to performance-related information about the current page, a common property in performance objects

  • Timing: Object provides a variety of timing data relevant to the browser’s processing
  • Navigation: Information about the actions that took place during a specified period of time, including whether the page was loaded or refreshed and how many redirects occurred
  • Memory: The object that gets the base memory usage
  • TimeOrigin: Timestamp of the time when the performance measurement began

Check out 👇 at window.performance

The Performance Api documentation can be found at 🚀

Calculate some common indicators using the Timing attribute of Performance

const timing = performance.timing; const time = {}; HttpComplete = timing. ResponseEnd - timing. RequestStart; // Blank screen time, NavigationStart // Page rendering time time.loadComplte = timing. DomLoading - timing.domInteractive; LoadPage = timing. LoadEventEnd - timing. NavigationStart;Copy the code

1.2 Timing. Js

If you don’t feel comfortable writing your own, you can refer to github timing. Js at 🚀

  • Use and installation
NPM install timing.js // install timing.getTimes(); // Console mode timing. PrintSimpleTable (); // Console table modeCopy the code

2. Monitor exceptions

Anomaly monitoring aims to quickly locate bugs in the developed applications. When online users report abnormal applications, you can monitor them to analyze them in the first time. During the development process, abnormal situations can be reported in time to prevent online faults.

2.1 Sentry

Sentry is an open source front-end exception monitoring and reporting tool that can be integrated into a project to help you collect and record problems and locate the code where the problems are in different environments (test, production, etc.)

Sentry official service needs to be paid, so it is recommended to build it by yourself. You can deploy and build it through Docker without detailed introduction. The official link is 🚀

  • How to use

You need to create a project in Sentry and bind it to your project (get DSN)

Sentry and VUE project combination, need to use raven (Sentry official plug-ins recommended for VUE) can use packaged Sentry tool to integrate, tree paste packaged Sentry-report click my 🚀, integrated with raven, you can directly use NPM installation, without self-configuration

  • The installation
npm install sentry-report
Copy the code
  • Imports are used in vUE projects
import Report from 'sentry-report'; / / configuration DSN const option = {DSN: http://753ce3bf82e94ab0aa7b5e62fae16d3c@sentry. * * *. Com / 2} / / initializes the const sentry = Report.getInstance(Vue, option);Copy the code
  • How to View exceptions

In the Sentry operation panel, you can see the specific error report and the corresponding code line, which helps you quickly locate the problem

2.2 JS Exception Monitoring Code (Code)

In front-end projects, exception monitoring is divided into exception capture and exception reporting

  • Window.onerror (JS exception)

We use window. onError to catch exceptions for JS errors in general.

window.onerror = function (message, source, lineno, colno, error) {
    console.log('errror')
  // todo
}

Copy the code
  • Unhandledrejection (uncaught Promise exception)

Onerror Failed to monitor network requests, including image request failures, resource loading failures, and promise exceptions. In this case, unHandledrejection needs to be monitored for Uncaught promise errors globally

window.addEventListener('unhandledrejection', event => { console.log('error'); }); function reject() { Promise.reject('Hello, Fundebug! '); } reject();Copy the code
  • try… catch..

It is mainly used to capture occasional exceptions that are difficult to capture, and it is most suitable for dealing with errors that we cannot control. However, the front-end code of large departments is less dependent on the environment and less used. Students who develop the back-end with Node often have a lot of asynchronous calls and need to capture and process exceptions

Try {// code that may cause error} catch (error) {// error handling}Copy the code

3. Data monitoring

Generally, data monitoring is to monitor user behaviors. The monitoring indicators mainly include:

  • PV/UV: Page views and clicks
  • User performing an operation (buried point)
  • Where are visitors coming from? Where are users coming from

The significance of data monitoring lies in better statistics and analysis of user behavior, including understanding the source of users, which function interactive users click more, etc., can better promote the product to do better

Data collection method:

  • Baidu statistics – as long as the access code of Baidu statistics is added, it can be quickly integrated into the project and record the PV and UV of the page
  • Buried point mode – Call functions of buried point SDK, call interfaces to report buried point data on business functions requiring buried point, or use third-party data statistics service provider Umeng, etc.