Frontend DataDog: Sveobuhvatno praćenje infrastrukture za moderne web aplikacije

U današnjem brzom digitalnom okruženju, pružanje besprijekornog i učinkovitog iskustva web aplikacije je od najveće važnosti. Korisnici očekuju da se web stranice i aplikacije brzo učitavaju, funkcioniraju besprijekorno i pružaju dosljedno iskustvo na svim uređajima i lokacijama. Loše performanse mogu dovesti do frustracije korisnika, napuštanja stranice i, u konačnici, gubitka prihoda. Tu na scenu stupa robusno praćenje frontend infrastrukture, a DataDog je moćan alat za postizanje toga.

Ovaj sveobuhvatni vodič istražit će kako iskoristiti DataDog za praćenje frontend infrastrukture, pokrivajući ključne aspekte kao što su:

• Postavljanje DataDoga za frontend praćenje
• Ključne metrike za praćenje frontend performansi
• Praćenje stvarnih korisnika (Real User Monitoring - RUM) pomoću DataDoga
• Sintetičko testiranje za proaktivno otkrivanje problema
• Najbolje prakse za optimizaciju frontend performansi uz uvide iz DataDoga

Što je praćenje frontend infrastrukture?

Praćenje frontend infrastrukture uključuje praćenje i analizu performansi i zdravlja komponenti koje čine korisnički dio web aplikacije. To uključuje:

• Performanse preglednika: Vremena učitavanja, performanse iscrtavanja, izvršavanje JavaScripta i učitavanje resursa.
• Performanse mreže: Latencija, neuspjeli zahtjevi i DNS rezolucija.
• Usluge trećih strana: Performanse i dostupnost API-ja, CDN-ova i drugih vanjskih usluga koje koristi frontend.
• Korisničko iskustvo: Mjerenje korisničkih interakcija, stopa grešaka i percipiranih performansi.

Praćenjem ovih aspekata možete identificirati i riješiti uska grla u performansama, spriječiti greške i osigurati glatko korisničko iskustvo za svoju globalnu publiku. Na primjer, sporo vrijeme učitavanja za korisnike u Australiji moglo bi ukazivati na probleme s konfiguracijom CDN-a u toj regiji.

Zašto odabrati DataDog za frontend praćenje?

DataDog pruža jedinstvenu platformu za praćenje cjelokupne infrastrukture, uključujući i backend i frontend sustave. Njegove ključne značajke za frontend praćenje uključuju:

• Praćenje stvarnih korisnika (RUM): Steknite uvid u stvarno korisničko iskustvo prikupljanjem podataka od stvarnih korisnika koji pregledavaju vašu web stranicu ili aplikaciju.
• Sintetičko testiranje: Proaktivno testirajte performanse i dostupnost vaše aplikacije s različitih lokacija diljem svijeta.
• Praćenje grešaka: Zabilježite i analizirajte JavaScript greške kako biste brzo identificirali i riješili bugove.
• Nadzorne ploče i upozorenja: Stvorite prilagođene nadzorne ploče za vizualizaciju ključnih metrika i postavite upozorenja kako biste bili obaviješteni o problemima s performansama.
• Integracija s drugim alatima: DataDog se besprijekorno integrira s drugim alatima u vašem razvojnom i operativnom okruženju.

Postavljanje DataDoga za frontend praćenje

Postavljanje DataDoga za frontend praćenje uključuje sljedeće korake:

1. Stvaranje DataDog računa

Ako ga još nemate, prijavite se za DataDog račun na web stranici DataDoga. Nude besplatno probno razdoblje za početak.

2. Instalacija DataDog RUM Browser SDK-a

DataDog RUM Browser SDK je JavaScript biblioteka koju trebate uključiti u svoju web aplikaciju za prikupljanje podataka o korisničkim interakcijama i performansama. Možete je instalirati pomoću npm-a ili yarn-a:

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

Ili:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. Inicijalizacija RUM SDK-a

U glavnoj JavaScript datoteci vaše aplikacije, inicijalizirajte RUM SDK s vašim DataDog ID-om aplikacije, klijentskim tokenom i nazivom usluge:

            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
              
            
          

Objašnjenje parametara:

• applicationId: Vaš DataDog ID aplikacije.
• clientToken: Vaš DataDog klijentski token.
• service: Naziv vaše usluge.
• env: Okruženje (npr. production, staging).
• version: Verzija vaše aplikacije.
• sampleRate: Postotak sesija koje treba pratiti. Vrijednost 100 znači da će sve sesije biti praćene.
• premiumSampleRate: Postotak sesija za koje će se snimati ponavljanja sesija (session replays).
• trackResources: Prati li se vrijeme učitavanja resursa.
• trackLongTasks: Prate li se dugotrajni zadaci koji blokiraju glavnu nit.
• trackUserInteractions: Prate li se korisničke interakcije poput klikova i slanja obrazaca.

Važno: Zamijenite `YOUR_APPLICATION_ID` i `YOUR_CLIENT_TOKEN` svojim stvarnim DataDog podacima. Možete ih pronaći u postavkama svog DataDog računa pod RUM postavkama.

4. Konfiguracija Content Security Policy (CSP)

Ako koristite Content Security Policy (CSP), morate ga konfigurirati kako biste omogućili DataDogu prikupljanje podataka. Dodajte sljedeće direktive u svoj CSP:

            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. Postavljanje vaše aplikacije

Postavite svoju aplikaciju s integriranim DataDog RUM SDK-om. DataDog će sada početi prikupljati podatke o korisničkim sesijama, metrikama performansi i greškama.

Ključne metrike za praćenje frontend performansi

Nakon što postavite DataDog, trebate znati koje metrike pratiti kako biste stekli smislene uvide u performanse vašeg frontenda. Evo nekih od najvažnijih metrika:

1. Vrijeme učitavanja stranice

Vrijeme učitavanja stranice je vrijeme potrebno da se web stranica u potpunosti učita i postane interaktivna. To je ključna metrika za korisničko iskustvo. DataDog pruža različite metrike vezane uz vrijeme učitavanja stranice, uključujući:

• Prvo iscrtavanje sadržaja (FCP - First Contentful Paint): Vrijeme potrebno da se prvi sadržaj (tekst, slika, itd.) pojavi na ekranu.
• Iscrtavanje najvećeg sadržaja (LCP - Largest Contentful Paint): Vrijeme potrebno da se najveći element sadržaja pojavi na ekranu. LCP je ključna metrika web vitala.
• Kašnjenje prvog unosa (FID - First Input Delay): Vrijeme potrebno pregledniku da odgovori na prvu korisničku interakciju (npr. klik). FID je također ključna metrika web vitala.
• Vrijeme do interaktivnosti (TTI - Time to Interactive): Vrijeme potrebno da stranica postane potpuno interaktivna.
• Kraj događaja učitavanja (Load Event End): Vrijeme u kojem je događaj učitavanja završen.

Ciljajte na LCP od 2.5 sekunde ili manje, FID od 100 milisekundi ili manje i TTI od 5 sekundi ili manje. Ovo su preporučene smjernice od strane Googlea za dobro korisničko iskustvo.

Primjer scenarija: Zamislite stranicu za e-trgovinu. Ako se stranica proizvoda učitava duže od 3 sekunde (visok LCP), korisnici bi mogli napustiti svoje košarice zbog frustracije. Praćenje LCP-a pomaže identificirati i riješiti takva usporavanja, što potencijalno može dovesti do povećanja prodajnih konverzija.

2. JavaScript greške

JavaScript greške mogu poremetiti korisničko iskustvo i spriječiti ispravno funkcioniranje značajki. DataDog automatski bilježi i izvještava o JavaScript greškama, omogućujući vam brzo identificiranje i popravljanje bugova.

Primjer scenarija: Iznenadni porast JavaScript grešaka prijavljenih od korisnika u Japanu mogao bi ukazivati na problem kompatibilnosti s određenom verzijom preglednika ili problem s lokaliziranim resursom.

3. Vrijeme učitavanja resursa

Vrijeme učitavanja resursa je vrijeme potrebno za učitavanje pojedinačnih resursa, kao što su slike, CSS datoteke i JavaScript datoteke. Dugo vrijeme učitavanja resursa može doprinijeti sporom vremenu učitavanja stranice.

Primjer scenarija: Velike, neoptimizirane slike značajno povećavaju vrijeme učitavanja stranice. DataDogovi podaci o vremenu učitavanja resursa pomažu identificirati ova uska grla, omogućujući optimizacijske napore poput kompresije slika i korištenja modernih formata slika kao što je WebP.

4. Latencija API-ja

Latencija API-ja je vrijeme potrebno vašoj aplikaciji za komunikaciju s backend API-jima. Visoka latencija API-ja može utjecati na performanse vaše aplikacije.

Primjer scenarija: Ako API krajnja točka koja poslužuje detalje o proizvodu doživi usporavanje, cijela stranica proizvoda će se učitavati sporije. Praćenje latencije API-ja i njezino povezivanje s drugim frontend metrikama (poput LCP-a) pomaže u lociranju izvora problema s performansama.

5. Korisničke akcije

Praćenje korisničkih akcija, kao što su klikovi, slanja obrazaca i prijelazi između stranica, može pružiti vrijedne uvide u ponašanje korisnika i identificirati područja gdje korisnici nailaze na poteškoće.

Primjer scenarija: Analiza vremena potrebnog korisnicima da završe proces naplate može otkriti uska grla u korisničkom toku. Ako korisnici provode značajnu količinu vremena na određenom koraku, to bi moglo ukazivati na problem s upotrebljivošću ili tehnički problem koji treba riješiti.

Praćenje stvarnih korisnika (RUM) pomoću DataDoga

Praćenje stvarnih korisnika (RUM) moćna je tehnika za razumijevanje stvarnog korisničkog iskustva vaše web aplikacije. DataDog RUM prikuplja podatke od stvarnih korisnika koji pregledavaju vašu web stranicu ili aplikaciju, pružajući vrijedne uvide u performanse, greške i ponašanje korisnika.

Prednosti RUM-a

• Identificiranje uskih grla u performansama: RUM vam omogućuje da identificirate najsporije dijelove vaše aplikacije i odredite prioritete za optimizaciju.
• Razumijevanje ponašanja korisnika: RUM pruža uvide u to kako korisnici stupaju u interakciju s vašom aplikacijom, omogućujući vam da identificirate područja gdje korisnici imaju poteškoća.
• Praćenje stopa grešaka: RUM automatski bilježi i izvještava o JavaScript greškama, omogućujući vam brzo identificiranje i popravljanje bugova.
• Praćenje zadovoljstva korisnika: Praćenjem metrika kao što su vrijeme učitavanja stranice i stope grešaka, možete dobiti osjećaj koliko su korisnici zadovoljni vašom aplikacijom.
• Geografska analiza performansi: RUM vam omogućuje analizu performansi na temelju lokacije korisnika, otkrivajući potencijalne probleme s konfiguracijama CDN-a ili lokacijama poslužitelja.

Ključne RUM značajke u DataDogu

• Ponavljanje sesije (Session Replay): Snimite i ponovno reproducirajte korisničke sesije kako biste vidjeli točno što korisnici doživljavaju. Ovo je neprocjenjivo za otklanjanje grešaka i razumijevanje ponašanja korisnika.
• Vrijeme učitavanja resursa (Resource Timing): Pratite vremena učitavanja pojedinačnih resursa, kao što su slike, CSS datoteke i JavaScript datoteke.
• Praćenje grešaka (Error Tracking): Zabilježite i analizirajte JavaScript greške kako biste brzo identificirali i riješili bugove.
• Analitika korisnika (User Analytics): Analizirajte ponašanje korisnika, kao što su klikovi, slanja obrazaca i prijelazi između stranica.
• Prilagođeni događaji (Custom Events): Pratite prilagođene događaje specifične za vašu aplikaciju.

Korištenje Session Replaya

Session Replay vam omogućuje snimanje i ponovno reproduciranje korisničkih sesija, pružajući vizualni prikaz korisničkog iskustva. Ovo je posebno korisno za otklanjanje grešaka koje je teško reproducirati.

Da biste omogućili Session Replay, morate inicijalizirati RUM SDK s opcijom `premiumSampleRate` postavljenom na vrijednost veću od 0. Na primjer, da biste snimali ponavljanja sesija za 10% sesija, postavite `premiumSampleRate` na 10:

            datadogRum.init({
  // ... druge opcije
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

Nakon što je Session Replay omogućen, možete pregledavati ponavljanja sesija u DataDog RUM Exploreru. Odaberite sesiju i kliknite gumb "Replay Session" da biste pogledali ponavljanje.

Sintetičko testiranje za proaktivno otkrivanje problema

Sintetičko testiranje uključuje simulaciju korisničkih interakcija s vašom aplikacijom kako bi se proaktivno identificirali problemi s performansama i dostupnošću. DataDog Synthetic Monitoring omogućuje vam stvaranje testova koji se automatski pokreću prema rasporedu, upozoravajući vas na probleme prije nego što utječu na stvarne korisnike.

Prednosti sintetičkog testiranja

• Proaktivno otkrivanje problema: Identificirajte probleme s performansama i dostupnošću prije nego što utječu na stvarne korisnike.
• Globalna pokrivenost: Testirajte svoju aplikaciju s različitih lokacija diljem svijeta kako biste osigurali dosljedne performanse za sve korisnike.
• Praćenje API-ja: Pratite performanse i dostupnost svojih API-ja.
• Regresijsko testiranje: Koristite sintetičke testove kako biste osigurali da nove promjene koda ne uvode regresije u performansama.
• Praćenje usluga trećih strana: Pratite performanse usluga trećih strana o kojima vaša aplikacija ovisi.

Vrste sintetičkih testova

DataDog nudi nekoliko vrsta sintetičkih testova:

• Browser testovi: Simuliraju korisničke interakcije u stvarnom pregledniku, omogućujući vam testiranje cjelokupne funkcionalnosti vaše aplikacije. Ovi testovi mogu izvoditi radnje poput klikanja gumba, ispunjavanja obrazaca i navigacije između stranica.
• API testovi: Testiraju performanse i dostupnost vaših API-ja slanjem HTTP zahtjeva i provjerom odgovora.
• Testovi SSL certifikata: Prate datum isteka i valjanost vaših SSL certifikata.
• DNS testovi: Provjeravaju jesu li vaši DNS zapisi ispravno konfigurirani.

Stvaranje Browser testa

Da biste stvorili browser test, slijedite ove korake:

1. U DataDog korisničkom sučelju, idite na Synthetic Monitoring > New Test > Browser Test.
2. Unesite URL stranice koju želite testirati.
3. Snimite korake koje želite simulirati pomoću DataDog Recordera. Snimač će zabilježiti vaše radnje i generirati kod za test.
4. Konfigurirajte postavke testa, kao što su lokacije s kojih će se test pokretati, učestalost testa i upozorenja koja će se aktivirati ako test ne uspije.
5. Spremite test.

Primjer scenarija: Zamislite da želite testirati proces naplate na stranici za e-trgovinu. Možete stvoriti browser test koji simulira korisnika kako dodaje proizvod u košaricu, unosi podatke za dostavu i dovršava kupnju. Ako test ne uspije u bilo kojem koraku, bit ćete upozoreni, što vam omogućuje da riješite problem prije nego što stvarni korisnici budu pogođeni.

Stvaranje API testa

Da biste stvorili API test, slijedite ove korake:

1. U DataDog korisničkom sučelju, idite na Synthetic Monitoring > New Test > API Test.
2. Unesite URL API krajnje točke koju želite testirati.
3. Konfigurirajte HTTP zahtjev, uključujući metodu (GET, POST, PUT, DELETE), zaglavlja i tijelo.
4. Definirajte tvrdnje (assertions) za provjeru odgovora, kao što su provjera statusnog koda, vrste sadržaja ili prisutnosti određenih podataka u tijelu odgovora.
5. Konfigurirajte postavke testa, kao što su lokacije s kojih će se test pokretati, učestalost testa i upozorenja koja će se aktivirati ako test ne uspije.
6. Spremite test.

Primjer scenarija: Možete stvoriti API test za praćenje dostupnosti kritične API krajnje točke o kojoj vaš frontend ovisi. Test može poslati zahtjev na krajnju točku i provjeriti vraća li statusni kod 200 OK te sadrži li tijelo odgovora očekivane podatke. Ako test ne uspije, bit ćete upozoreni, što vam omogućuje da istražite problem i spriječite ga da utječe na vaše korisnike.

Najbolje prakse za optimizaciju frontend performansi uz uvide iz DataDoga

Nakon što postavite DataDog i prikupljate podatke, možete koristiti uvide za optimizaciju performansi vašeg frontenda. Evo nekih najboljih praksi:

1. Optimizirajte slike

Velike, neoptimizirane slike čest su uzrok sporog vremena učitavanja stranice. Koristite DataDogove podatke o vremenu učitavanja resursa kako biste identificirali velike slike i optimizirali ih na sljedeće načine:

• Komprimiranje slika: Koristite alate za kompresiju slika kako biste smanjili veličinu datoteke bez žrtvovanja kvalitete.
• Korištenje modernih formata slika: Koristite moderne formate slika kao što je WebP, koji nude bolju kompresiju od tradicionalnih formata poput JPEG i PNG.
• Promjena veličine slika: Promijenite veličinu slika na odgovarajuće dimenzije za zaslon na kojem će biti prikazane. Izbjegavajte posluživanje velikih slika koje preglednik smanjuje.
• Korištenje lijenog učitavanja (lazy loading): Učitavajte slike tek kada postanu vidljive u prikazu (viewport). To može značajno poboljšati početno vrijeme učitavanja stranice.
• Korištenje CDN-a: Koristite mrežu za isporuku sadržaja (CDN) za posluživanje slika s poslužitelja bližih vašim korisnicima.

2. Minificirajte i grupirajte CSS i JavaScript

Minificiranje CSS i JavaScript datoteka uklanja nepotrebne znakove, kao što su razmaci i komentari, smanjujući veličinu datoteke. Grupiranje (bundling) CSS i JavaScript datoteka spaja više datoteka u jednu, smanjujući broj HTTP zahtjeva potrebnih za učitavanje stranice.

Koristite alate kao što su Webpack, Parcel ili Rollup za minificiranje i grupiranje vaših CSS i JavaScript datoteka.

3. Iskoristite predmemoriranje preglednika (Browser Caching)

Predmemoriranje preglednika omogućuje preglednicima da lokalno pohranjuju statičke resurse, kao što su slike, CSS datoteke i JavaScript datoteke. Kada korisnik ponovno posjeti vašu web stranicu, preglednik može učitati te resurse iz predmemorije umjesto da ih preuzima s poslužitelja, što rezultira bržim vremenom učitavanja stranice.

Konfigurirajte svoj web poslužitelj da postavi odgovarajuća zaglavlja za predmemoriranje (cache headers) za statičke resurse. Koristite dugo vrijeme isteka predmemorije za resurse koji se rijetko mijenjaju.

4. Optimizirajte performanse iscrtavanja

Spore performanse iscrtavanja mogu dovesti do nestabilnog korisničkog iskustva. Koristite DataDogove metrike performansi kako biste identificirali uska grla u iscrtavanju i optimizirali svoj kod na sljedeće načine:

• Smanjite složenost DOM-a: Pojednostavite svoju HTML strukturu kako biste smanjili količinu posla koju preglednik mora obaviti da bi iscrtao stranicu.
• Izbjegavajte "layout thrashing": Izbjegavajte čitanje i pisanje u DOM unutar istog okvira (frame). To može uzrokovati da preglednik više puta preračunava raspored, što dovodi do loših performansi.
• Koristite CSS transformacije i animacije: Koristite CSS transformacije i animacije umjesto animacija temeljenih na JavaScriptu. CSS animacije su obično učinkovitije jer ih obrađuje mehanizam za iscrtavanje preglednika.
• Debouncing i throttling: Koristite debouncing i throttling kako biste ograničili učestalost skupih operacija, kao što su rukovatelji događajima (event handlers).

5. Pratite usluge trećih strana

Usluge trećih strana, kao što su API-ji, CDN-ovi i oglasne mreže, mogu utjecati na performanse vaše aplikacije. Koristite DataDog za praćenje performansi i dostupnosti tih usluga. Ako je usluga treće strane spora ili nedostupna, to može negativno utjecati na vaše korisničko iskustvo.

Primjer scenarija: Ako oglasna mreža treće strane ima problema, to može uzrokovati sporo učitavanje vaše stranice ili čak njezin pad. Praćenje performansi usluga trećih strana omogućuje vam da identificirate te probleme i poduzmete mjere, kao što je privremeno onemogućavanje usluge ili prelazak na drugog pružatelja usluga.

6. Implementirajte Code Splitting

Code splitting vam omogućuje da razbijete svoj JavaScript kod u manje dijelove koji se mogu učitavati na zahtjev. To može značajno poboljšati početno vrijeme učitavanja stranice smanjenjem količine JavaScripta koji se treba preuzeti i parsirati.

Koristite alate kao što su Webpack ili Parcel za implementaciju code splittinga u vašoj aplikaciji.

Zaključak

Praćenje frontend infrastrukture ključno je za pružanje besprijekornog i učinkovitog iskustva web aplikacije. DataDog pruža sveobuhvatnu platformu za praćenje cjelokupne frontend infrastrukture, od performansi preglednika do latencije API-ja. Korištenjem DataDogovog RUM-a, sintetičkog testiranja i metrika performansi, možete identificirati i riješiti uska grla u performansama, spriječiti greške i osigurati glatko korisničko iskustvo za svoju globalnu publiku. Implementacijom najboljih praksi navedenih u ovom vodiču, možete optimizirati performanse svog frontenda i isporučiti web stranicu ili aplikaciju koju korisnici vole.

Ne zaboravite redovito pregledavati svoje DataDog nadzorne ploče i upozorenja kako biste ostali u toku s performansama vašeg frontenda i proaktivno rješavali sve probleme koji se pojave. Kontinuirano praćenje i optimizacija ključni su za održavanje visokokvalitetnog korisničkog iskustva.