Letzte Woche haben wir einen Beitrag darüber veröffentlicht, wie wir die Backend- und Microservice-Infrastruktur mit Instana überwachen, und versprochen, eine Fortsetzung über die Überwachung des Frontends zu schreiben.
Aus diesem Grund haben wir uns entschlossen, uns nicht darauf zu beschränken, Instana als Frontend-Steuerungswerkzeug zu überprüfen, sondern etwas genauer zu untersuchen, warum Endbenutzerüberwachung im Allgemeinen erforderlich ist, mit welchen Frontleistungsproblemen wir am häufigsten konfrontiert sind, welche Szenarien wir verwenden, um mit den gesammelten Daten zu arbeiten, und wie Instana hilft uns, die allgemeine Benutzererfahrung zu steuern.
Was ist Endbenutzerüberwachung?
Um im Wesentlichen die Frage zu beantworten, was User Experience Monitoring (EUM) ist, halten wir es für richtig, eine Analogie zu APM (Application Performance Monitoring) zu ziehen.
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.
.