先週掲載ポスト我々はInstanaを使用してバックエンドとmicroserviceインフラを監視する方法については、とフロントエンドの監視についての続編を書くことを約束しました。

その結果、フロントエンド制御ツールとしてのInstanaのレビューに限定するのではなく、もう少し深く掘り下げて、エンドユーザーモニタリングが一般的に必要な理由、最も頻繁に直面するフロントパフォーマンスの問題、収集されたデータを処理するために使用するシナリオ、およびその方法を説明することにしました。 Instanaは、全体的なユーザーエクスペリエンスの制御に役立ちます。

エンドユーザーモニタリングとは何ですか？

ユーザーエクスペリエンスモニタリング（EUM）とは何かという質問に本質的に答えるには、APM（アプリケーションパフォーマンスモニタリング）との類似性を引き出すことが正しいと思います。

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.

.