Performance monitoring of front-end monitoring systems | more challenging in August

This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

preface

This article shows how to collect performance indicators/error messages and location/resource monitoring data at the front end.

Why do front-end monitoring?

• Faster than users to find problems, and can quickly locate the problem and timely repair
• Collect load/access metrics to optimize user experience in the right direction
• Collect user behavior on the user-oriented website to support the important basis of decision

Third-party Monitoring Service

There are Sentry, Magic, Fundebug and so on.

The general flow of monitoring

1. Implementation Monitoring The SDK can monitor performance indicators and errors (collect sources)
2. Upload interface
3. Data cleaning and log storage
4. Reports show
5. Monitoring alarm

Subsequent…

1. Problem processing
2. Auxiliary analysis
3. External Platform Access
4. .

Performance monitoring

Performance monitoring refers to the data metrics that the pages we write reflect on the user’s side

Performance monitoring is mainly through the window.performance API. Processing this API we can get

1. The uninstall time of the previous pagep.fetchStart - p.navigationStart
2. The redirection time of the pagep.redirectEnd - p.redirectStart
3. DNS lookup timep.domainLookupEnd - p.domainLookupStart
4. TCP connection establishment timep.connectEnd - p.connectStart
5. Total time spent at the network layerp.connectEnd - p.navigationStart
6. The time when chrom sends data to the server and receives itp.responseStart - p.requestStart
7. The time it took to request the datap.responseEnd - p.responseStart
8. The total time taken to request pagesp.responseEnd - p.requestStart
9. Dom parsing timep.domComplete - p.domLoading
10. LoadEvent timep.loadEventEnd - p.loadEventStart
11. Total time at the front endp.loadEventEnd - p.domLoading
12. Page full load timep.loadEventEnd - p.navigationStart
13. The time it takes for the DOM to start renderingp.domContentLoadedEventStart - p.navigationStart
14. The time a user action can be responded top.domInteractive - p.navigationStart
15. First byte timep.responseStart - p.navigationStart

getPerfData: p= > {
				let data = {
          // Network connection
          prevPage: p.fetchStart - p.navigationStart, // Uninstall time of last page
          redirect: p.redirectEnd - p.redirectStart, // The redirect time is 0 if the two pages are not in the same domain
          dns: p.domainLookupEnd - p.domainLookupStart, // DNS lookup time
          connect: p.connectEnd - p.connectStart, // TCP connection setup time
          network: p.connectEnd - p.navigationStart, // The total network time

          // Network reception
          send: p.responseStart - p.requestStart, // Front end from send to receive time
          receive: p.responseEnd - p.responseStart, // Time to request data
          request: p.responseEnd - p.requestStart, // The total time of the requested page

          // Front-end rendering
          dom: p.domComplete - p.domLoading, // Dom parsing time
          loadEvent: p.loadEventEnd - p.loadEventStart, / / loadEvent time
          frontend: p.loadEventEnd - p.domLoading, // Total front-end time

          // Critical stage
          load: p.loadEventEnd - p.navigationStart, // Page full load time
          domReady: p.domContentLoadedEventStart - p.navigationStart, // Dom preparation time, white screen time
          interactive: p.domInteractive - p.navigationStart, // Operable time, when a user's click can be responded to
          ttfb: p.responseStart - p.navigationStart // First byte time
        }
        return data
}
Copy the code

• When the performance. The timing. DomComplete complete explain the dom is loaded, we can report to the server data

// Monitor dom loading
let runCheck = () = > {
  if (performance.timing.domComplete) {
    // If the DOM parsing is complete, stop the loop and run the callback
    clearTimeout(timer)
    getPerfData(window.performance.timing) // Get the performance index
    perfData.type = 'domready'
    callback(perfData)
    isDOMReady = true
  } else {
    // Check the loop again
    timer = setTimeout(runCheck, 100)}}Copy the code

• When the performance. The timing. LoadEventEnd complete show page is loaded, we can report to the server data

let runCheck = () = > {
  if (performance.timing.loadEventEnd) {
    // This determines that the DOM is loaded
    // If the DOM parsing is complete, stop the loop and run the callback
    clearTimeout(timer)
    getPerfData(window.performance.timing) // Get the performance index
    perfData.type = 'onload'
    callback(perfData)
    isOnload = true
  } else {
    // Check the loop again
    timer = setTimeout(runCheck, 100)}}Copy the code

Some indicators of performance

Refer to the article

PerformanceObserver.observe

paint-timing

event-timing

LCP

FMP

time-to-interactive