Frontend DataDog: Komplexní monitorování infrastruktury pro moderní webové aplikace

V dnešním uspěchaném digitálním prostředí je zásadní poskytovat bezproblémový a výkonný zážitek z webových aplikací. Uživatelé očekávají, že se webové stránky a aplikace budou rychle načítat, fungovat bezchybně a poskytovat konzistentní zážitek napříč všemi zařízeními a umístěními. Špatný výkon může vést k frustraci uživatelů, zanechání a v konečném důsledku ke ztrátě příjmů. Zde přichází ke slovu robustní monitorování frontendové infrastruktury a DataDog je výkonný nástroj k dosažení tohoto cíle.

Tento komplexní průvodce prozkoumá, jak využít DataDog pro monitorování frontendové infrastruktury, a bude se zabývat klíčovými aspekty, jako jsou:

• Nastavení DataDog pro monitorování frontendu
• Klíčové metriky pro sledování výkonu frontendu
• Monitorování skutečných uživatelů (RUM) s DataDog
• Syntetické testování pro proaktivní detekci problémů
• Osvědčené postupy pro optimalizaci výkonu frontendu s poznatky DataDog

Co je monitorování frontendové infrastruktury?

Monitorování frontendové infrastruktury zahrnuje sledování a analýzu výkonu a stavu komponent, které tvoří uživatelskou část webové aplikace. To zahrnuje:

• Výkon prohlížeče: Doba načítání, výkon vykreslování, provádění JavaScriptu a načítání zdrojů.
• Výkon sítě: Latence, selhání požadavků a rozlišení DNS.
• Služby třetích stran: Výkon a dostupnost rozhraní API, sítí CDN a dalších externích služeb používaných frontendem.
• Uživatelská zkušenost: Měření uživatelských interakcí, chybovosti a vnímaného výkonu.

Monitorováním těchto aspektů můžete identifikovat a řešit úzká hrdla výkonu, zabránit chybám a zajistit bezproblémový uživatelský zážitek pro vaše globální publikum. Například pomalé načítání pro uživatele v Austrálii může naznačovat problémy s konfigurací sítě CDN v tomto regionu.

Proč zvolit DataDog pro monitorování frontendu?

DataDog poskytuje sjednocenou platformu pro monitorování celé vaší infrastruktury, včetně backendových i frontendových systémů. Mezi jeho klíčové funkce pro monitorování frontendu patří:

• Monitorování skutečných uživatelů (RUM): Získejte vhled do skutečné uživatelské zkušenosti shromažďováním dat od skutečných uživatelů procházejících vaše webové stránky nebo aplikaci.
• Syntetické testování: Proaktivně testujte výkon a dostupnost vaší aplikace z různých míst po celém světě.
• Sledování chyb: Zachyťte a analyzujte chyby JavaScriptu, abyste rychle identifikovali a opravili chyby.
• Dashboardy a upozornění: Vytvořte si vlastní dashboardy pro vizualizaci klíčových metrik a nastavte si upozornění, abyste byli informováni o problémech s výkonem.
• Integrace s dalšími nástroji: DataDog se bezproblémově integruje s dalšími nástroji ve vašem vývojovém a provozním zásobníku.

Nastavení DataDog pro monitorování frontendu

Nastavení DataDog pro monitorování frontendu zahrnuje následující kroky:

1. Vytvoření účtu DataDog

Pokud jej ještě nemáte, zaregistrujte se k účtu DataDog na webových stránkách DataDog. Nabízejí bezplatnou zkušební verzi, abyste mohli začít.

2. Instalace sady DataDog RUM Browser SDK

Sada DataDog RUM Browser SDK je knihovna JavaScriptu, kterou musíte zahrnout do své webové aplikace, abyste mohli shromažďovat data o interakcích a výkonu uživatelů. Můžete ji nainstalovat pomocí npm nebo yarn:

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

Nebo:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. Inicializace sady RUM SDK

V hlavním souboru JavaScriptu vaší aplikace inicializujte sadu RUM SDK pomocí ID vaší aplikace DataDog, tokenu klienta a názvu služby:

            import { datadogRum } from '@datadog/browser-rum'

datadogRum.init({
  applicationId: 'YOUR_APPLICATION_ID',
  clientToken: 'YOUR_CLIENT_TOKEN',
  service: 'your-service-name',
  env: 'production',
  version: '1.0.0',
  sampleRate: 100,
  premiumSampleRate: 100,
  trackResources: true,
  trackLongTasks: true,
  trackUserInteractions: true,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

Vysvětlení parametrů:

• applicationId: ID vaší aplikace DataDog.
• clientToken: Váš token klienta DataDog.
• service: Název vaší služby.
• env: Prostředí (např. production, staging).
• version: Verze vaší aplikace.
• sampleRate: Procento relací, které se mají sledovat. Hodnota 100 znamená, že se budou sledovat všechny relace.
• premiumSampleRate: Procento relací, pro které se mají nahrávat záznamy relací.
• trackResources: Zda sledovat doby načítání zdrojů.
• trackLongTasks: Zda sledovat dlouhé úlohy, které blokují hlavní vlákno.
• trackUserInteractions: Zda sledovat interakce uživatelů, jako jsou kliknutí a odesílání formulářů.

Důležité: Nahraďte `YOUR_APPLICATION_ID` a `YOUR_CLIENT_TOKEN` svými skutečnými přihlašovacími údaji DataDog. Ty najdete v nastavení vašeho účtu DataDog v části nastavení RUM.

4. Konfigurace zásad zabezpečení obsahu (CSP)

Používáte-li zásady zabezpečení obsahu (CSP), musíte je nakonfigurovat, aby DataDog mohl shromažďovat data. Přidejte do své CSP následující direktivy:

            connect-src https://*.datadoghq.com https://*.data.dog;
img-src https://*.datadoghq.com https://*.data.dog data:;
script-src 'self' https://*.datadoghq.com https://*.data.dog;

            

              
                Copy
              
            
          

5. Nasazení vaší aplikace

Nasaďte svou aplikaci s integrovanou sadou DataDog RUM SDK. DataDog nyní začne shromažďovat data o uživatelských relacích, metrikách výkonu a chybách.

Klíčové metriky pro sledování výkonu frontendu

Jakmile nastavíte DataDog, musíte vědět, které metriky sledovat, abyste získali smysluplný přehled o výkonu vašeho frontendu. Zde jsou některé z nejdůležitějších metrik:

1. Doba načítání stránky

Doba načítání stránky je doba, za kterou se webová stránka plně načte a stane interaktivní. Je to zásadní metrika pro uživatelskou zkušenost. DataDog poskytuje různé metriky související s dobou načítání stránky, včetně:

• First Contentful Paint (FCP): Doba, za kterou se na obrazovce objeví první obsah (text, obrázek atd.).
• Largest Contentful Paint (LCP): Doba, za kterou se na obrazovce objeví největší element obsahu. LCP je klíčová metrika webových vitalit.
• First Input Delay (FID): Doba, za kterou prohlížeč zareaguje na první interakci uživatele (např. kliknutí). FID je také klíčová metrika webových vitalit.
• Time to Interactive (TTI): Doba, za kterou se stránka stane plně interaktivní.
• Load Event End: Doba, kdy je událost načítání dokončena.

Cílem je LCP 2,5 sekundy nebo méně, FID 100 milisekund nebo méně a TTI 5 sekund nebo méně. Toto jsou doporučené benchmarky společnosti Google pro dobrou uživatelskou zkušenost.

Příklad scénáře: Představte si e-commerce web. Pokud se stránka produktu načítá déle než 3 sekundy (vysoká LCP), mohou uživatelé opustit nákupní košíky kvůli frustraci. Sledování LCP pomáhá identifikovat a řešit taková zpomalení, což může vést ke zvýšení konverzí prodeje.

2. Chyby JavaScriptu

Chyby JavaScriptu mohou narušit uživatelskou zkušenost a zabránit správnému fungování funkcí. DataDog automaticky zachycuje a hlásí chyby JavaScriptu, což vám umožňuje rychle identifikovat a opravit chyby.

Příklad scénáře: Náhlý nárůst chyb JavaScriptu hlášených od uživatelů v Japonsku může naznačovat problém s kompatibilitou s konkrétní verzí prohlížeče nebo problém s lokalizovaným zdrojem.

3. Doba načítání zdroje

Doba načítání zdroje je doba, za kterou se načítají jednotlivé zdroje, jako jsou obrázky, soubory CSS a soubory JavaScriptu. Dlouhé doby načítání zdrojů mohou přispět k pomalým dobám načítání stránek.

Příklad scénáře: Velké, neoptimalizované obrázky výrazně zvyšují dobu načítání stránky. Data načasování zdrojů DataDog pomáhají identifikovat tato úzká hrdla, což umožňuje úsilí o optimalizaci, jako je komprese obrázků a použití moderních formátů obrázků, jako je WebP.

4. Latence API

Latence API je doba, za kterou vaše aplikace komunikuje se backendovými rozhraními API. Vysoká latence API může ovlivnit výkon vaší aplikace.

Příklad scénáře: Pokud koncový bod API, který obsluhuje podrobnosti o produktu, zaznamená zpomalení, celá stránka produktu se bude načítat pomaleji. Sledování latence API a korelace s dalšími metrikami frontendu (jako je LCP) pomáhá určit zdroj problému s výkonem.

5. Akce uživatele

Sledování uživatelských akcí, jako jsou kliknutí, odesílání formulářů a přechody mezi stránkami, může poskytnout cenné poznatky o chování uživatelů a identifikovat oblasti, kde uživatelé zažívají potíže.

Příklad scénáře: Analýza doby, za kterou uživatelé dokončí proces pokladny, může odhalit úzká hrdla v toku uživatele. Pokud uživatelé stráví značné množství času na konkrétním kroku, může to naznačovat problém s použitelností nebo technický problém, který je třeba řešit.

Monitorování skutečných uživatelů (RUM) s DataDog

Monitorování skutečných uživatelů (RUM) je výkonná technika pro pochopení skutečné uživatelské zkušenosti s vaší webovou aplikací. DataDog RUM shromažďuje data od skutečných uživatelů procházejících vaše webové stránky nebo aplikaci a poskytuje cenné poznatky o výkonu, chybách a chování uživatelů.

Výhody RUM

• Identifikace úzkých hrdel výkonu: RUM vám umožňuje identifikovat nejpomalejší části vaší aplikace a upřednostňovat úsilí o optimalizaci.
• Pochopení chování uživatelů: RUM poskytuje vhled do toho, jak uživatelé interagují s vaší aplikací, což vám umožní identifikovat oblasti, kde mají uživatelé potíže.
• Sledování chybovosti: RUM automaticky zachycuje a hlásí chyby JavaScriptu, což vám umožňuje rychle identifikovat a opravit chyby.
• Monitorování spokojenosti uživatelů: Sledováním metrik, jako je doba načítání stránky a chybovost, můžete získat představu o tom, jak jsou uživatelé s vaší aplikací spokojeni.
• Analýza geografického výkonu: RUM vám umožňuje analyzovat výkon na základě polohy uživatele, což odhaluje potenciální problémy s konfiguracemi sítě CDN nebo umístěním serveru.

Klíčové funkce RUM v DataDog

• Záznam relace: Zaznamenávejte a přehrávejte relace uživatelů, abyste viděli přesně to, co uživatelé zažívají. To je neocenitelné pro ladění problémů a porozumění chování uživatelů.
• Načasování zdrojů: Sledujte doby načítání jednotlivých zdrojů, jako jsou obrázky, soubory CSS a soubory JavaScriptu.
• Sledování chyb: Zachyťte a analyzujte chyby JavaScriptu, abyste rychle identifikovali a opravili chyby.
• Analýza uživatelů: Analyzujte chování uživatelů, jako jsou kliknutí, odesílání formulářů a přechody mezi stránkami.
• Vlastní události: Sledujte vlastní události specifické pro vaši aplikaci.

Použití Záznamu relace

Záznam relace vám umožňuje zaznamenávat a přehrávat relace uživatelů a poskytuje vizuální reprezentaci uživatelské zkušenosti. To je zvláště užitečné pro ladění problémů, které je obtížné reprodukovat.

Chcete-li povolit Záznam relace, musíte inicializovat sadu RUM SDK s volbou `premiumSampleRate` nastavenou na hodnotu větší než 0. Chcete-li například zaznamenávat záznamy relací pro 10 % relací, nastavte `premiumSampleRate` na 10:

            datadogRum.init({
  // ... other options
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

Po povolení Záznamu relace si můžete prohlédnout záznamy relací v nástroji DataDog RUM Explorer. Vyberte relaci a kliknutím na tlačítko „Přehrát relaci“ sledujte záznam.

Syntetické testování pro proaktivní detekci problémů

Syntetické testování zahrnuje simulaci interakcí uživatelů s vaší aplikací, aby se proaktivně identifikovaly problémy s výkonem a problémy s dostupností. DataDog Synthetic Monitoring vám umožňuje vytvářet testy, které se spouštějí automaticky podle plánu, a upozorňovat vás na problémy dříve, než ovlivní skutečné uživatele.

Výhody syntetického testování

• Proaktivní detekce problémů: Identifikujte problémy s výkonem a problémy s dostupností dříve, než ovlivní skutečné uživatele.
• Globální pokrytí: Otestujte svou aplikaci z různých míst po celém světě, abyste zajistili konzistentní výkon pro všechny uživatele.
• Monitorování API: Monitorujte výkon a dostupnost svých rozhraní API.
• Regresní testování: Použijte syntetické testy k zajištění toho, aby nové změny kódu nezavedly regrese výkonu.
• Monitorování služeb třetích stran: Sledujte výkon služeb třetích stran, na kterých vaše aplikace závisí.

Typy syntetických testů

DataDog nabízí několik typů syntetických testů:

• Testy prohlížeče: Simulujte interakce uživatelů ve skutečném prohlížeči, což vám umožní otestovat komplexní funkčnost vaší aplikace. Tyto testy mohou provádět akce, jako je klikání na tlačítka, vyplňování formulářů a navigace mezi stránkami.
• Testy API: Otestujte výkon a dostupnost svých rozhraní API odesíláním požadavků HTTP a ověřováním odpovědí.
• Testy certifikátů SSL: Sledujte datum vypršení platnosti a platnost svých certifikátů SSL.
• Testy DNS: Ověřte, zda jsou vaše záznamy DNS správně nakonfigurovány.

Vytvoření testu prohlížeče

Chcete-li vytvořit test prohlížeče, postupujte takto:

1. V uživatelském rozhraní DataDog přejděte na Synthetic Monitoring > New Test > Browser Test.
2. Zadejte adresu URL stránky, kterou chcete testovat.
3. Zaznamenejte kroky, které chcete simulovat, pomocí nástroje DataDog Recorder. Recorder zachytí vaše akce a vygeneruje kód pro test.
4. Nakonfigurujte nastavení testu, jako jsou místa, ze kterých se má test spustit, frekvence testu a upozornění, která se mají spustit, pokud test selže.
5. Uložte test.

Příklad scénáře: Představte si, že chcete otestovat proces pokladny e-commerce webu. Můžete vytvořit test prohlížeče, který simuluje, že uživatel přidá produkt do košíku, zadá své přepravní údaje a dokončí nákup. Pokud test v kterémkoli kroku selže, budete upozorněni, což vám umožní problém vyřešit dříve, než budou postiženi skuteční uživatelé.

Vytvoření testu API

Chcete-li vytvořit test API, postupujte takto:

1. V uživatelském rozhraní DataDog přejděte na Synthetic Monitoring > New Test > API Test.
2. Zadejte adresu URL koncového bodu API, který chcete testovat.
3. Nakonfigurujte požadavek HTTP, včetně metody (GET, POST, PUT, DELETE), hlaviček a těla.
4. Definujte aserce pro ověření odpovědi, například kontrolu stavového kódu, typu obsahu nebo přítomnosti konkrétních dat v těle odpovědi.
5. Nakonfigurujte nastavení testu, jako jsou místa, ze kterých se má test spustit, frekvence testu a upozornění, která se mají spustit, pokud test selže.
6. Uložte test.

Příklad scénáře: Můžete vytvořit test API pro monitorování dostupnosti kritického koncového bodu API, na kterém váš frontend závisí. Test může odeslat požadavek na koncový bod a ověřit, že vrátí stavový kód 200 OK a že tělo odpovědi obsahuje očekávaná data. Pokud test selže, budete upozorněni, což vám umožní prošetřit problém a zabránit tomu, aby ovlivnil vaše uživatele.

Osvědčené postupy pro optimalizaci výkonu frontendu s poznatky DataDog

Jakmile máte DataDog nastaven a shromažďujete data, můžete pomocí poznatků optimalizovat výkon svého frontendu. Zde jsou některé osvědčené postupy:

1. Optimalizujte obrázky

Velké, neoptimalizované obrázky jsou častou příčinou pomalých dob načítání stránek. Použijte data načasování zdrojů DataDog k identifikaci velkých obrázků a optimalizujte je pomocí:

• Komprese obrázků: Použijte nástroje pro kompresi obrázků ke zmenšení velikosti souborů obrázků, aniž byste obětovali kvalitu.
• Použití moderních formátů obrázků: Použijte moderní formáty obrázků, jako je WebP, které nabízejí lepší kompresi než tradiční formáty, jako jsou JPEG a PNG.
• Změna velikosti obrázků: Změňte velikost obrázků na správné rozměry pro zobrazení, na kterém se zobrazí. Vyhněte se servírování velkých obrázků, které jsou zmenšeny prohlížečem.
• Použití lazy loadingu: Načítání obrázků pouze tehdy, když jsou viditelné ve viewportu. To může výrazně zlepšit počáteční dobu načítání stránky.
• Použití sítě CDN: Použijte síť pro doručování obsahu (CDN) k obsluze obrázků ze serverů, které jsou blíže vašim uživatelům.

2. Minifikujte a spojte CSS a JavaScript

Minifikace souborů CSS a JavaScript odstraňuje nepotřebné znaky, jako jsou prázdné znaky a komentáře, čímž se snižuje velikost souboru. Spojování souborů CSS a JavaScript kombinuje více souborů do jednoho souboru, čímž se snižuje počet požadavků HTTP potřebných k načtení stránky.

Použijte nástroje jako Webpack, Parcel nebo Rollup k minifikaci a spojení souborů CSS a JavaScript.

3. Využijte ukládání do mezipaměti prohlížeče

Ukládání do mezipaměti prohlížeče umožňuje prohlížečům ukládat statická aktiva, jako jsou obrázky, soubory CSS a soubory JavaScriptu, lokálně. Když uživatel znovu navštíví vaše webové stránky, může prohlížeč načíst tato aktiva z mezipaměti namísto jejich stahování ze serveru, což má za následek rychlejší načítání stránek.

Nakonfigurujte svůj webový server tak, aby nastavil příslušné hlavičky mezipaměti pro statická aktiva. Použijte dlouhé doby vypršení platnosti mezipaměti pro aktiva, která se zřídka mění.

4. Optimalizujte výkon vykreslování

Pomalý výkon vykreslování může vést k trhanému uživatelskému dojmu. Použijte metriky výkonu DataDog k identifikaci úzkých hrdel vykreslování a optimalizujte svůj kód pomocí:

• Redukce složitosti vašeho DOM: Zjednodušte strukturu HTML, abyste snížili množství práce, kterou musí prohlížeč vykonat při vykreslování stránky.
• Vyhýbání se thrashingu rozložení: Vyhněte se čtení a zápisu do DOM ve stejném rámci. To může způsobit, že prohlížeč přepočítá rozložení vícekrát, což vede ke špatnému výkonu.
• Použití transformací a animací CSS: Použijte transformace a animace CSS místo animací založených na JavaScriptu. Animace CSS jsou obvykle výkonnější, protože jsou zpracovávány vykreslovacím mechanismem prohlížeče.
• Debouncing a throttling: Použijte debouncing a throttling k omezení frekvence nákladných operací, jako jsou obslužné rutiny událostí.

5. Sledujte služby třetích stran

Služby třetích stran, jako jsou rozhraní API, sítě CDN a reklamní sítě, mohou ovlivnit výkon vaší aplikace. Použijte DataDog ke sledování výkonu a dostupnosti těchto služeb. Pokud je služba třetí strany pomalá nebo nedostupná, může to negativně ovlivnit vaši uživatelskou zkušenost.

Příklad scénáře: Pokud se reklamní síť třetí strany potýká s problémy, může to způsobit pomalé načítání stránky nebo dokonce selhání. Sledování výkonu služeb třetích stran vám umožňuje identifikovat tyto problémy a podniknout kroky, jako je dočasné vypnutí služby nebo přepnutí na jiného poskytovatele.

6. Implementujte rozdělení kódu

Rozdělení kódu vám umožňuje rozdělit kód JavaScriptu na menší části, které lze načítat na vyžádání. To může výrazně zlepšit počáteční dobu načítání stránky snížením množství JavaScriptu, který je třeba stáhnout a analyzovat.

Použijte nástroje jako Webpack nebo Parcel k implementaci rozdělení kódu ve vaší aplikaci.

Závěr

Monitorování frontendové infrastruktury je zásadní pro poskytování bezproblémového a výkonného zážitku z webové aplikace. DataDog poskytuje komplexní platformu pro monitorování celé vaší frontendové infrastruktury, od výkonu prohlížeče po latenci API. Pomocí RUM, syntetického testování a metrik výkonu DataDog můžete identifikovat a řešit úzká hrdla výkonu, zabránit chybám a zajistit bezproblémový uživatelský zážitek pro vaše globální publikum. Implementací osvědčených postupů popsaných v této příručce můžete optimalizovat výkon svého frontendu a poskytovat webové stránky nebo aplikaci, kterou uživatelé milují.

Nezapomeňte pravidelně kontrolovat své dashboardy a upozornění DataDog, abyste zůstali na špici svého frontendu a proaktivně řešili veškeré problémy, které se objeví. Nepřetržité monitorování a optimalizace jsou nezbytné pro udržení vysoce kvalitní uživatelské zkušenosti.