Minggu lalu, kami memposting postingan tentang cara kami memantau infrastruktur backend dan layanan mikro menggunakan Instana, dan berjanji untuk menulis sekuel tentang memantau frontend.

Akibatnya, kami memutuskan untuk tidak membatasi diri pada meninjau Instana sebagai alat kontrol frontend, tetapi untuk menggali lebih dalam dan menjelaskan mengapa Pemantauan Pengguna Akhir umumnya diperlukan, masalah kinerja depan apa yang paling sering kami hadapi, skenario apa yang kami gunakan untuk bekerja dengan data yang dikumpulkan, dan bagaimana Instana membantu kami mengontrol pengalaman pengguna secara keseluruhan.

Apa itu Pemantauan Pengguna Akhir?

Untuk pada dasarnya menjawab pertanyaan tentang apa itu pemantauan pengalaman pengguna (EUM), kami pikir akan tepat untuk membuat analogi dengan APM (pemantauan kinerja aplikasi).

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.

.