Na semana passada, postamos um post sobre como monitoramos a infraestrutura de back-end e microsserviço usando Instana e prometemos escrever uma sequência sobre o monitoramento do front-end.
Como resultado, decidimos não nos limitar a revisar o Instana como uma ferramenta de controle de front-end, mas cavar um pouco mais fundo e dizer por que o monitoramento do usuário final é geralmente necessário, quais problemas de desempenho frontais enfrentamos com mais frequência, quais cenários usamos para trabalhar com os dados coletados e como O Instana nos ajuda a controlar a experiência geral do usuário.
O que é monitoramento de usuário final?
Para responder essencialmente à pergunta sobre o que é monitoramento de experiência do usuário (EUM), achamos que seria correto fazer uma analogia com APM (monitoramento de desempenho de aplicativo).
APM backend , EUM — backend. EUM , ( ) .
EUM.
, EUM
. EUM .
Amazon , 100 1% . , - , -? , , , .
JavaScript
JS , — , .
, JS -, .
(, 500 404 )
backend' , , backend .
, API 500- XHR , , , HTTP , .
. EUM.
-
. , , .
, EUM /ASN .
, -, , CDN DDOS .
.
EUM , , .
, .
, Android .
— , — .
, , , .
e-commerce — , -, .
, EUM , , , , .
.
.
, "" "" .
, , 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
EUM .
, , JS 500-e AJAX — .
, , .
EUM , , , "" .
, 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.
Instana Kubernetes.
.