Frontend DataDog: Põhjalik Infrastruktuuri Monitooring Kaasaegsetele Veebirakendustele

Tänapäeva kiires digimaailmas on sujuva ja suure jõudlusega veebirakenduse kogemuse pakkumine ülimalt tähtis. Kasutajad ootavad, et veebisaidid ja rakendused laadiksid kiiresti, töötaksid veatult ja pakuksid ühtlast kogemust kõigis seadmetes ja asukohtades. Halb jõudlus võib põhjustada kasutajate frustratsiooni, hülgamist ja lõppkokkuvõttes kaotatud tulu. Siin tuleb mängu jõuline esiosa infrastruktuuri monitooring ja DataDog on selle saavutamiseks võimas tööriist.

See põhjalik juhend uurib, kuidas kasutada DataDogi esiosa infrastruktuuri monitooringuks, hõlmates selliseid põhiaspekte nagu:

• DataDogi seadistamine esiosa monitooringuks
• Peamised mõõdikud, mida esiosa jõudluse puhul jälgida
• Reaalsete Kasutajate Monitooring (RUM) DataDogiga
• Sünteetiline testimine ennetavaks probleemide tuvastamiseks
• Parimad tavad esiosa jõudluse optimeerimiseks DataDogi ülevaadetega

Mis on Esiosa Infrastruktuuri Monitooring?

Esiosa infrastruktuuri monitooring hõlmab veebirakenduse kasutajapoolse osa moodustavate komponentide jõudluse ja seisundi jälgimist ja analüüsimist. See hõlmab:

• Brauseri jõudlus: Laadimisajad, renderdamise jõudlus, JavaScripti käivitamine ja ressursside laadimine.
• Võrgu jõudlus: Latentsus, päringu vead ja DNS-i lahendamine.
• Kolmandate osapoolte teenused: API-de, CDN-ide ja muude esiosa poolt kasutatavate väliste teenuste jõudlus ja kättesaadavus.
• Kasutajakogemus: Kasutajate interaktsioonide, veamäärade ja tajutava jõudluse mõõtmine.

Neid aspekte jälgides saate tuvastada ja kõrvaldada jõudluse kitsaskohti, ennetada vigu ja tagada oma globaalsele publikule sujuva kasutajakogemuse. Näiteks võib aeglane laadimisaeg Austraalia kasutajate jaoks viidata probleemidele CDN-i konfiguratsiooniga selles piirkonnas.

Miks Valida DataDog Esiosa Monitooringuks?

DataDog pakub ühtset platvormi kogu oma infrastruktuuri, sealhulgas nii tausta- kui ka esiosasüsteemide monitooringuks. Selle peamised funktsioonid esiosa monitooringuks on järgmised:

• Reaalsete Kasutajate Monitooring (RUM): Saate ülevaate tegelikust kasutajakogemusest, kogudes andmeid reaalsetelt kasutajatelt, kes teie veebisaiti või rakendust sirvivad.
• Sünteetiline Testimine: Testige ennetavalt oma rakenduse jõudlust ja kättesaadavust erinevatest asukohtadest üle maailma.
• Vigade Jälgimine: Jäädvustage ja analüüsige JavaScripti vigu, et kiiresti vigu tuvastada ja lahendada.
• Armatuurlauad ja Hoiatused: Looge kohandatud armatuurlaudu, et visualiseerida peamisi mõõdikuid ja seadistada hoiatusi, et teid teavitataks jõudlusprobleemidest.
• Integratsioon teiste tööriistadega: DataDog integreerub sujuvalt teiste teie arendus- ja operatsioonitööriistadega.

DataDogi Seadistamine Esiosa Monitooringuks

DataDogi seadistamine esiosa monitooringuks hõlmab järgmisi samme:

1. DataDogi Konto Loomine

Kui teil seda veel pole, registreeruge DataDogi konto saamiseks aadressil DataDogi veebisait. Nad pakuvad tasuta prooviperioodi, et teid alustada.

2. DataDog RUM Brauseri SDK Installimine

DataDog RUM Brauseri SDK on JavaScripti teek, mille peate oma veebirakendusse lisama, et koguda andmeid kasutajate interaktsioonide ja jõudluse kohta. Saate selle installida npm või yarn abil:

            npm install @datadog/browser-rum
            

              
                Copy
              
            
          

Või:

            yarn add @datadog/browser-rum
            

              
                Copy
              
            
          

3. RUM SDK Initsialiseerimine

Initsialiseerige oma rakenduse peamises JavaScripti failis RUM SDK oma DataDogi rakenduse ID, kliendi tokeni ja teenuse nimega:

            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
              
            
          

Parameetrite selgitus:

• applicationId: Teie DataDogi rakenduse ID.
• clientToken: Teie DataDogi kliendi token.
• service: Teie teenuse nimi.
• env: Keskkond (nt tootmine, testimine).
• version: Teie rakenduse versioon.
• sampleRate: Jälgitavate seansside protsent. Väärtus 100 tähendab, et kõiki seansse jälgitakse.
• premiumSampleRate: Seansside protsent, mille jaoks salvestatakse seansside taasesitusi.
• trackResources: Kas jälgida ressursside laadimisaegu.
• trackLongTasks: Kas jälgida pikki ülesandeid, mis blokeerivad põhivoogu.
• trackUserInteractions: Kas jälgida kasutajate interaktsioone, nagu klõpsud ja vormide esitamised.

Tähtis: Asendage `YOUR_APPLICATION_ID` ja `YOUR_CLIENT_TOKEN` oma tegelike DataDogi mandaatidega. Need leiate oma DataDogi konto seadetest RUM-i sätete alt.

4. Sisu Turvapoliitika (CSP) Konfigureerimine

Kui kasutate sisu turvapoliitikat (CSP), peate selle konfigureerima, et DataDog saaks andmeid koguda. Lisage oma CSP-le järgmised direktiivid:

            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. Rakenduse Juurutamine

Juurutage oma rakendus koos DataDog RUM SDK-ga. DataDog alustab nüüd andmete kogumist kasutajaseansside, jõudlusmõõdikute ja vigade kohta.

Peamised Mõõdikud, Mida Esiosa Jõudluse Puhul Jälgida

Kui olete DataDogi seadistanud, peate teadma, milliseid mõõdikuid jälgida, et saada sisukaid ülevaateid oma esiosa jõudluse kohta. Siin on mõned kõige olulisemad mõõdikud:

1. Lehe Laadimisaeg

Lehe laadimisaeg on aeg, mis kulub veebilehe täielikuks laadimiseks ja interaktiivseks muutumiseks. See on kasutajakogemuse jaoks ülioluline mõõdik. DataDog pakub erinevaid lehe laadimisajaga seotud mõõdikuid, sealhulgas:

• Esimene Sisu Kuvamine (FCP): Aeg, mis kulub esimese sisu (tekst, pilt jne) ekraanile ilmumiseks.
• Suurima Sisu Kuvamine (LCP): Aeg, mis kulub suurima sisu elemendi ekraanile ilmumiseks. LCP on veebi põhimõõdik.
• Esimene Sisestus Viivitus (FID): Aeg, mis kulub brauseril esimesele kasutaja interaktsioonile reageerimiseks (nt klõps). FID on samuti veebi põhimõõdik.
• Aeg Interaktiivseks Muutumiseni (TTI): Aeg, mis kulub lehel täielikult interaktiivseks muutumiseni.
• Laadimise Sündmuse Lõpp: Aeg, millal laadimise sündmus on lõpule viidud.

Püüdke saavutada LCP 2,5 sekundit või vähem, FID 100 millisekundit või vähem ja TTI 5 sekundit või vähem. Need on Google'i soovitatud võrdlusalused hea kasutajakogemuse jaoks.

Näide: Kujutage ette e-kaubanduse saiti. Kui tootekauba lehe laadimine võtab aega rohkem kui 3 sekundit (kõrge LCP), võivad kasutajad oma ostukorvid frustratsiooni tõttu hüljata. LCP jälgimine aitab tuvastada ja kõrvaldada selliseid aeglustusi, mis võivad potentsiaalselt suurendada müügi konversioone.

2. JavaScripti Vea

JavaScripti vead võivad häirida kasutajakogemust ja takistada funktsioonide korrektset töötamist. DataDog jäädvustab ja raporteerib automaatselt JavaScripti vigu, võimaldades teil kiiresti vigu tuvastada ja parandada.

Näide: Järsk JavaScripti vigade arvu suurenemine Jaapani kasutajate poolt võib viidata ühilduvusprobleemile konkreetse brauseri versiooniga või probleemile lokaliseeritud ressursiga.

3. Ressursi Laadimisaeg

Ressursi laadimisaeg on aeg, mis kulub üksikute ressursside, nagu pildid, CSS-failid ja JavaScripti failid, laadimiseks. Pikad ressursi laadimisajad võivad kaasa aidata aeglastele lehtede laadimisaegadele.

Näide: Suured, optimeerimata pildid suurendavad oluliselt lehe laadimisaega. DataDogi ressursi ajastuse andmed aitavad tuvastada neid kitsaskohti, võimaldades optimeerimistegevusi nagu pildi tihendamine ja kaasaegsete pildiformaatide, nagu WebP, kasutamine.

4. API Latentsus

API latentsus on aeg, mis kulub teie rakendusel tausta-API-dega suhtlemiseks. Kõrge API latentsus võib mõjutada teie rakenduse jõudlust.

Näide: Kui toote üksikasju pakkuv API-lõpp-punkt aeglustub, laaditakse kogu tootekauba leht aeglasemalt. API latentsuse jälgimine ja selle korreleerimine teiste esiosa mõõdikutega (nagu LCP) aitab tuvastada jõudlusprobleemi allika.

5. Kasutajate Tegevused

Kasutajate tegevuste, nagu klõpsud, vormide esitamised ja lehtede üleminekud, jälgimine võib anda väärtuslikku teavet kasutajate käitumise kohta ja tuvastada valdkondi, kus kasutajatel on raskusi.

Näide: Kui analüüsida, kui kaua kasutajatel kulub kassaprotsessi lõpuleviimiseks, võib see paljastada kitsaskohti kasutajate voos. Kui kasutajad veedavad teatud sammul märkimisväärselt palju aega, võib see viidata kasutatavusprobleemile või tehnilisele probleemile, mida tuleb lahendada.

Reaalsete Kasutajate Monitooring (RUM) DataDogiga

Reaalsete Kasutajate Monitooring (RUM) on võimas tehnika teie veebirakenduse tegeliku kasutajakogemuse mõistmiseks. DataDog RUM kogub andmeid reaalsetelt kasutajatelt, kes teie veebisaiti või rakendust sirvivad, pakkudes väärtuslikku teavet jõudluse, vigade ja kasutajate käitumise kohta.

RUM-i Eelised

• Tuvastage jõudluse kitsaskohad: RUM võimaldab teil tuvastada oma rakenduse kõige aeglasemad osad ja seada prioriteediks optimeerimistegevused.
• Mõista kasutajate käitumist: RUM pakub ülevaadet sellest, kuidas kasutajad teie rakendusega suhtlevad, võimaldades teil tuvastada valdkondi, kus kasutajatel on raskusi.
• Jälgige veamäärasid: RUM jäädvustab ja raporteerib automaatselt JavaScripti vigu, võimaldades teil kiiresti vigu tuvastada ja parandada.
• Jälgige kasutajate rahulolu: Jälgides selliseid mõõdikuid nagu lehe laadimisaeg ja veamäärad, saate aimu, kui rahul on kasutajad teie rakendusega.
• Geograafiline jõudluse analüüs: RUM võimaldab teil analüüsida jõudlust kasutaja asukoha alusel, paljastades võimalikke probleeme CDN-i konfiguratsioonide või serverite asukohtadega.

Peamised RUM-i Funktsioonid DataDogis

• Seansi Taasesitus: Salvestage ja taasesitage kasutajaseansse, et näha täpselt, mida kasutajad kogevad. See on hindamatu probleemide silumiseks ja kasutajate käitumise mõistmiseks.
• Ressursi Ajastus: Jälgige üksikute ressursside, nagu pildid, CSS-failid ja JavaScripti failid, laadimisaegu.
• Vigade Jälgimine: Jäädvustage ja analüüsige JavaScripti vigu, et kiiresti vigu tuvastada ja lahendada.
• Kasutajate Analüütika: Analüüsige kasutajate käitumist, nagu klõpsud, vormide esitamised ja lehtede üleminekud.
• Kohandatud Sündmused: Jälgige oma rakendusele omaseid kohandatud sündmusi.

Seansi Taasesituse Kasutamine

Seansi Taasesitus võimaldab teil salvestada ja taasesitada kasutajaseansse, pakkudes kasutajakogemuse visuaalset esitust. See on eriti kasulik probleemide silumiseks, mida on raske taasesitada.

Seansi Taasesituse lubamiseks peate RUM SDK initsialiseerima valikuga `premiumSampleRate`, mille väärtus on suurem kui 0. Näiteks seansside taasesituste salvestamiseks 10% seansside puhul määrake `premiumSampleRate` väärtuseks 10:

            datadogRum.init({
  // ... muud valikud
  premiumSampleRate: 10,
});

datadogRum.startSessionReplayRecording();

            

              
                Copy
              
            
          

Kui Seansi Taasesitus on lubatud, saate seansside taasesitusi vaadata DataDog RUM Exploreris. Valige seanss ja klõpsake taasesituse vaatamiseks nuppu "Taasesita Seanss".

Sünteetiline Testimine Ennetavaks Probleemide Tuvastamiseks

Sünteetiline testimine hõlmab kasutajate interaktsioonide simuleerimist oma rakendusega, et ennetavalt tuvastada jõudlusprobleeme ja kättesaadavusprobleeme. DataDog Synthetic Monitoring võimaldab teil luua teste, mis käivituvad automaatselt ajakava järgi, hoiatades teid probleemide eest enne, kui need reaalseid kasutajaid mõjutavad.

Sünteetilise Testimise Eelised

• Ennetav probleemide tuvastamine: Tuvastage jõudlusprobleemid ja kättesaadavusprobleemid enne, kui need reaalseid kasutajaid mõjutavad.
• Globaalne katvus: Testige oma rakendust erinevatest asukohtadest üle maailma, et tagada kõigi kasutajate jaoks ühtlane jõudlus.
• API monitooring: Jälgige oma API-de jõudlust ja kättesaadavust.
• Regressiooni testimine: Kasutage sünteetilisi teste, et tagada, et uued koodimuudatused ei põhjusta jõudluse regressioone.
• Kolmandate osapoolte teenuste monitooring: Jälgige kolmandate osapoolte teenuste jõudlust, millest teie rakendus sõltub.

Sünteetiliste Testide Tüübid

DataDog pakub mitut tüüpi sünteetilisi teste:

• Brauseri Testid: Simuleerige kasutajate interaktsioone reaalses brauseris, võimaldades teil testida oma rakenduse terviklikku funktsionaalsust. Need testid saavad teha selliseid toiminguid nagu nuppude klõpsamine, vormide täitmine ja lehtede vahel navigeerimine.
• API Testid: Testige oma API-de jõudlust ja kättesaadavust, saates HTTP-päringuid ja valideerides vastuseid.
• SSL-sertifikaadi Testid: Jälgige oma SSL-sertifikaatide aegumiskuupäeva ja kehtivust.
• DNS Testid: Veenduge, et teie DNS-kirjed on õigesti konfigureeritud.

Brauseri Testi Loomine

Brauseri testi loomiseks toimige järgmiselt:

1. Liikuge DataDogi kasutajaliideses jaotisse Synthetic Monitoring > New Test > Browser Test.
2. Sisestage testitava lehe URL.
3. Salvestage sammud, mida soovite simuleerida, kasutades DataDogi Salvestajat. Salvestaja jäädvustab teie toimingud ja genereerib testi jaoks koodi.
4. Konfigureerige testi seaded, näiteks kohad, kust testi käivitada, testi sagedus ja hoiatused, mida käivitada, kui test ebaõnnestub.
5. Salvestage test.

Näide: Kujutage ette, et soovite testida e-kaubanduse saidi kassaprotsessi. Saate luua brauseri testi, mis simuleerib kasutajat, kes lisab toote oma ostukorvi, sisestab oma saatmisteabe ja lõpetab ostu. Kui test ebaõnnestub mis tahes etapis, saate hoiatuse, mis võimaldab teil probleemiga tegeleda enne, kui see reaalseid kasutajaid mõjutab.

API Testi Loomine

API testi loomiseks toimige järgmiselt:

1. Liikuge DataDogi kasutajaliideses jaotisse Synthetic Monitoring > New Test > API Test.
2. Sisestage testitava API-lõpp-punkti URL.
3. Konfigureerige HTTP-päring, sealhulgas meetod (GET, POST, PUT, DELETE), päised ja keha.
4. Määratlege väited vastuse valideerimiseks, näiteks olekukoodi, sisutüübi või konkreetsete andmete olemasolu kontrollimine vastuse kehas.
5. Konfigureerige testi seaded, näiteks kohad, kust testi käivitada, testi sagedus ja hoiatused, mida käivitada, kui test ebaõnnestub.
6. Salvestage test.

Näide: Saate luua API testi, et jälgida kriitilise API-lõpp-punkti kättesaadavust, millest teie esiosa sõltub. Test saab saata päringu lõpp-punkti ja veenduda, et see tagastab olekukoodi 200 OK ja et vastuse keha sisaldab oodatud andmeid. Kui test ebaõnnestub, saate hoiatuse, mis võimaldab teil probleemi uurida ja takistada selle mõjutamist teie kasutajaid.

Parimad Tavad Esiosa Jõudluse Optimeerimiseks DataDogi Ülevaadetega

Kui DataDog on seadistatud ja andmeid kogutakse, saate ülevaateid kasutada esiosa jõudluse optimeerimiseks. Siin on mõned parimad tavad:

1. Piltide Optimeerimine

Suured, optimeerimata pildid on lehe aeglaste laadimisaegade tavaline põhjus. Kasutage DataDogi ressursi ajastuse andmeid, et tuvastada suured pildid ja neid optimeerida:

• Piltide tihendamine: Kasutage pildi tihendamise tööriistu, et vähendada piltide faili suurust ilma kvaliteeti ohverdamata.
• Kaasaegsete pildiformaatide kasutamine: Kasutage kaasaegseid pildiformaate, nagu WebP, mis pakuvad paremat tihendust kui traditsioonilised formaadid nagu JPEG ja PNG.
• Piltide suuruse muutmine: Muutke piltide suurust vastavalt mõõtmetele, millel neid kuvatakse. Vältige suurte piltide serveerimist, mida brauser skaleerib.
• Laisa laadimise kasutamine: Laadige pilte ainult siis, kui need on vaateväljas nähtavad. See võib oluliselt parandada lehe esialgset laadimisaega.
• CDN-i kasutamine: Kasutage sisu edastusvõrku (CDN), et teenindada pilte serveritest, mis asuvad teie kasutajatele lähemal.

2. CSS-i ja JavaScripti Minimeerimine ja Pakkimine

CSS-i ja JavaScripti failide minimeerimine eemaldab tarbetud märgid, nagu tühikud ja kommentaarid, vähendades faili suurust. CSS-i ja JavaScripti failide pakkimine ühendab mitu faili üheks failiks, vähendades lehe laadimiseks vajalike HTTP-päringute arvu.

Kasutage CSS-i ja JavaScripti failide minimeerimiseks ja pakkimiseks tööriistu nagu Webpack, Parcel või Rollup.

3. Brauseri Vahemälu Ärakasutamine

Brauseri vahemälu võimaldab brauseritel salvestada staatilisi varasid, nagu pildid, CSS-failid ja JavaScripti failid, kohalikult. Kui kasutaja külastab teie veebisaiti uuesti, saab brauser need varad laadida vahemälust, selle asemel, et neid serverist alla laadida, mille tulemuseks on kiirem lehe laadimisaeg.

Konfigureerige oma veebiserver staatiliste varade jaoks sobivate vahemälu päiste määramiseks. Kasutage pikaajalisi vahemälu aegumisaegu varade jaoks, mis harva muutuvad.

4. Renderdamise Jõudluse Optimeerimine

Aeglane renderdamise jõudlus võib põhjustada tõrkuva kasutajakogemuse. Kasutage DataDogi jõudlusmõõdikuid renderdamise kitsaskohtade tuvastamiseks ja koodi optimeerimiseks:

• DOM-i keerukuse vähendamine: Lihtsustage oma HTML-i struktuuri, et vähendada töö hulka, mida brauser peab lehe renderdamiseks tegema.
• Paigutuse viskumise vältimine: Vältige DOM-i lugemist ja kirjutamist samas kaadris. See võib põhjustada brauseril paigutuse mitu korda ümberarvutamist, mis võib põhjustada halba jõudlust.
• CSS-i teisenduste ja animatsioonide kasutamine: Kasutage JavaScriptil põhinevate animatsioonide asemel CSS-i teisendusi ja animatsioone. CSS-i animatsioonid on tavaliselt suurema jõudlusega, kuna neid haldab brauseri renderdusmootor.
• Debouncing ja throttling: Kasutage debouncing ja throttling, et piirata kulukate toimingute, nagu sündmuste haldurite, sagedust.

5. Kolmandate Osapoolte Teenuste Jälgimine

Kolmandate osapoolte teenused, nagu API-d, CDN-id ja reklaamivõrgud, võivad mõjutada teie rakenduse jõudlust. Kasutage DataDogi nende teenuste jõudluse ja kättesaadavuse jälgimiseks. Kui kolmanda osapoole teenus on aeglane või kättesaamatu, võib see teie kasutajakogemust negatiivselt mõjutada.

Näide: Kui kolmanda osapoole reklaamivõrgus on probleeme, võib see põhjustada teie lehe aeglase laadimise või isegi kokku kukkumise. Kolmandate osapoolte teenuste jõudluse jälgimine võimaldab teil neid probleeme tuvastada ja meetmeid võtta, näiteks teenuse ajutine keelamine või teisele pakkujale üleminek.

6. Koodi Jaotuse Rakendamine

Koodi jaotus võimaldab teil jagada oma JavaScripti kood väiksemateks tükkideks, mida saab nõudmisel laadida. See võib oluliselt parandada lehe esialgset laadimisaega, vähendades JavaScripti hulka, mis tuleb alla laadida ja parsida.

Kasutage oma rakenduses koodi jaotuse rakendamiseks tööriistu nagu Webpack või Parcel.

Järeldus

Esiosa infrastruktuuri monitooring on sujuva ja suure jõudlusega veebirakenduse kogemuse pakkumiseks ülioluline. DataDog pakub terviklikku platvormi kogu esiosa infrastruktuuri jälgimiseks, alates brauseri jõudlusest kuni API latentsuseni. Kasutades DataDogi RUM-i, sünteetilist testimist ja jõudlusmõõdikuid, saate tuvastada ja kõrvaldada jõudluse kitsaskohti, ennetada vigu ja tagada oma globaalsele publikule sujuva kasutajakogemuse. Rakendades selles juhendis kirjeldatud parimaid tavasid, saate optimeerida oma esiosa jõudlust ja pakkuda veebisaiti või rakendust, mida kasutajad armastavad.

Ärge unustage regulaarselt vaadata oma DataDogi armatuurlaudu ja hoiatusi, et olla kursis esiosa jõudlusega ja ennetavalt lahendada tekkivaid probleeme. Pidev monitooring ja optimeerimine on kvaliteetse kasutajakogemuse säilitamiseks hädavajalikud.