Last week, we posted a post about how we monitor the backend and microservice infrastructure using Instana, and promised to write a sequel about monitoring the frontend.

As a result, we decided not to limit ourselves to reviewing Instana as a frontend control tool, but to dig a little deeper and tell why End User Monitoring is generally needed, what front performance problems we face most often, what scenarios we use to work with the collected data, and how Instana helps us control the overall user experience.

What is End User Monitoring?

To essentially answer the question of what is user experience monitoring (EUM), we think it would be correct to draw an analogy with APM (application performance monitoring).

APM backend , EUM — backend. EUM , ( ) .

EUM.

, EUM

1. 
   
   
   
   
   
   

   . EUM .
   
   Amazon , 100 1% . , - , -? , , , .

   
   
   
   
   
   
   

2. JavaScript

   
   
   
   
   
   
   

   JS , — , .
   
   , JS -, .

   
   
   
   
   
   
   

3. (, 500 404 )

   
   
   
   
   
   
   

   backend' , , backend .
   
   , API 500- XHR , , , HTTP , .

   
   
   
   
   
   
   

. EUM.

1. -

   
   
   
   
   
   
   

   . , , .

   
   
   
   
   
   
   

   , EUM /ASN .
   
   , -, , CDN DDOS .

   
   
   
   
   
   
   

2. 
   
   
   
   
   
   

   .
   
   EUM , , .

   
   
   
   
   
   
   

   , .
   
   , Android .

   
   
   
   
   
   
   

3. 
   
   
   
   
   
   

   — , — .
   
   , , , .
   
   e-commerce — , -, .

   
   
   
   
   
   
   

   , EUM , , , , .

   
   
   
   
   
   
   

4. 
   
   
   
   
   
   

   .
   
   .
   
   , "" "" .

   
   
   
   
   
   
   

, , End User Monitoring. , EUM .

EUM

EUM .

W3C :

• Resource Timing API;
• Navigation Timing API;
• Paint Timing API;
• Network Infromation API.

API EUM , :

• Page Load Time — ;
• DNS Lookup — DNS;
• Time to First Byte — ;
• DOMContentLoaded — DOM
• .

2020 Google — Web Vitals.

— , :

• Largest-Contentful Paint — ;
• First Input Delay — , ;
• Cumulative Layout Shift — .

EUM .

AJAX

AJAX/XHR , , .

, , Google Analytics, ., API, .. backend.

?

• ;
• ;
• ;
• http .

, backend, EUM + APM c — , backend.

, , ( ), , — .

frontend EUM.

EUM

1. 
   
   
   
   
   
   

   EUM .

   
   
   
   
   
   
   

   , , JS 500-e AJAX — .

   
   
   
   
   
   
   

2. 
   
   
   
   
   
   

   , , .

   
   
   
   
   
   
   

   EUM , , , "" .

   
   
   
   
   
   
   

3. 
   
   
   
   
   
   

   , end-to-end . .

   
   
   
   
   
   
   

   , , , .

   
   
   
   
   
   
   

, , , Instana.

Instana

EUM Instana JavaScript EUM — , SPA .

.

WebSites.

:

• ;
• JavaScript ;
• .

:

• ;
• ;
• (/)
• , -;
• .

, .

Speed

:

Navigation Timing Paint Timing :

- , .

Resources

Resources, .

, :

:

:

HTTP Requests

— AJAX . HTTP Requests. , Resources, , .

— , , .

HTTP HTTP :

, , , .

JavaScript .

JavaScript

JavaScript , .

, , .

, , .

, (Page Loads) .

, "Analyze Page Loads"

Page Loads, Page Loads, .

, Page Load.

, , — , JS , , AJAX .

. , , email, User ID, User Name – . .

.

, PageLoad, , meta – /, .

Meta PageLoad .

PageLoad, ?

– , , XHR .

, , .

, — Navigation Timing Web Vitals View Backend Trace, .

AJAX , .

1 XHR : http , backend.

backend , Instana PageLoad backend, .

backend .

backend

, backend .

, , , , backend.

SmartAlerts

, .

Instana "SmartAlerts" — .

"Add alert".

, .

• 
  
  
  
  
  
  

  - SPA .
  
  onLoadTime ( 90-), baseline 24 7 baseline.

  
  
  
  
  
  
  

  

  
  
  
  
  
  
  

• JavaScript

  
  
  
  
  
  
  

  JS .

  
  
  
  
  
  
  

  

  
  
  
  
  
  
  

• HTTP

  
  
  
  
  
  
  

  . (404) (5xx).

  
  
  
  
  
  
  

• 
  
  
  
  
  
  

  SPA .

  
  
  
  
  
  
  

  , .

  
  
  
  
  
  
  

  .

  
  
  
  
  
  
  

( Advanced Mode), (Basic Mode).

, c , , -.

, , VIP checkout , .

, . , Slack Microsoft Teams:

, EUM Instana.

EUM Instana SPA .

Instana Kubernetes.

.