La semaine dernière, nous avons publié un article sur la façon dont nous surveillons l'infrastructure du backend et des microservices à l'aide d'Instana, et nous avons promis d'écrire une suite sur la surveillance du frontend.

En conséquence, nous avons décidé de ne pas nous limiter à examiner Instana en tant qu'outil de contrôle frontal, mais de creuser un peu plus loin et de dire pourquoi la surveillance de l'utilisateur final est généralement nécessaire, à quels problèmes de performance frontale nous sommes le plus souvent confrontés, quels scénarios nous utilisons pour travailler avec les données collectées, et comment Instana nous aide à contrôler l'expérience utilisateur globale.

Qu'est-ce que la surveillance des utilisateurs finaux?

Pour répondre essentiellement à la question de savoir ce qu'est la surveillance de l'expérience utilisateur (EUM), nous pensons qu'il serait correct de faire une analogie avec l'APM (surveillance des performances des applications).

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.

.