React klaidų derinimo įvaldymas: išsamus komponentų šaltinių žemėlapių tyrimas klaidų vietos sekimui

Kaip React kūrėjas, be jokios abejonės, su tuo susidūrėte: jūsų naršyklės konsolėje pasirodo kritinė klaidos žinutė, nurodanti paslaptingą eilutę dideliame, sumažintame JavaScript faile, pvz., main.chunk.js:1:84325. Ši viena eilutė grįžtamojo ryšio yra skaitmeninis atitikmuo to, kad jums pasakė, jog jūsų automobilis turi problemų "kažkur variklyje". Tai vargina, užima daug laiko ir yra reikšmingas kliūtis kūrimo cikle. Čia atsiranda neapdainuotas šiuolaikinio interneto kūrimo herojus: šaltinių žemėlapis.

Šis vadovas nuves jus į gilų React komponentų klaidų šaltinių žemėlapių pasaulį. Paaiškinsime, kaip jie veikia, kodėl jie yra būtini norint sekti klaidų vietas ir kaip juos efektyviai konfigūruoti tiek kūrimo, tiek gamybos aplinkoje. Pabaigoje būsite pasirengę paversti paslaptingas klaidų žinutes tiksliomis, veiksmingomis derinimo įžvalgomis.

Kas tiksliai yra šaltinių žemėlapis?

Iš esmės, šaltinių žemėlapis yra failas (paprastai su .map plėtiniu), kuris sukuria ryšį tarp jūsų sukompiliuoto, sumažinto ir sujungto kodo ir jūsų parašyto originalaus šaltinio kodo. Pagalvokite apie tai kaip apie išsamų instrukcijų rinkinį arba vertimo raktą. Kai jūsų naršyklė vykdo kodą ir įvyksta klaida tam tikroje transformuoto failo eilutėje ir stulpelyje, ji gali naudoti šaltinių žemėlapį, kad surastų tą vietą ir pasakytų jums tiksliai, kur klaida įvyko jūsų originaliame, žmogui suprantamame faile.

Šiuolaikinis interneto kūrimo procesas apima kelis transformavimo etapus:

• Transpiliavimas: Įrankiai, tokie kaip Babel, paverčia šiuolaikinį JavaScript (ESNext) ir JSX į senesnį, plačiau suderinamą JavaScript (pvz., ES5). Pavyzdžiui, jūsų elegantiškas JSX <div>Hello</div> tampa React.createElement('div', null, 'Hello').
• Sujungimas: Įrankiai, tokie kaip Webpack, Vite arba Rollup, paima visus jūsų atskirus modulius (komponentus, įrankius, CSS failus) ir sujungia juos į kelis optimizuotus failus, kuriuos naršyklė gali atsisiųsti.
• Sumažinimas: Norint sumažinti failo dydį ir pagerinti įkėlimo laiką, įrankiai, tokie kaip Terser arba UglifyJS, sutrumpina kintamųjų pavadinimus, pašalina tarpus ir pašalina komentarus. Jūsų aprašomasis kintamasis const userProfileData = ... gali tapti const a = ....

Nors šie veiksmai yra būtini našumui, jie sunaikina jūsų originalaus kodo struktūrą ir skaitomumą. Šaltinių žemėlapis apverčia šį užmaskavimą derinimo tikslais, todėl kūrėjo patirtis tampa valdoma.

Kodėl šaltinių žemėlapiai yra būtini React kūrime

Komponentais pagrįsta React architektūra prideda dar vieną sudėtingumo lygį, todėl šaltinių žemėlapiai tampa dar svarbesni. Klaida įvyksta ne tik faile; ji įvyksta konkrečiame komponente, dažnai giliai kitų komponentų hierarchijoje. Be šaltinių žemėlapių derinimas yra košmaras.

Komponentų rietuvės sekų galia

Iki React 16 tipiška klaida pateikdavo jums standartinę JavaScript rietuvės seką, kuri buvo funkcijų iškvietimų sąrašas sumažintame pakete. Buvo sunku atsekti tai iki komponento, atsakingo už klaidą.

React 16 pristatė žaidimą keičiančią funkciją: komponentų rietuvės sekas. Kai įvyksta klaida, React, kartu su šaltinių žemėlapiais, pateikia rietuvės seką, kuri rodo komponentų hierarchiją, vedančią prie klaidos. Vietoj to, kad pamatytumėte beprasmį funkcijos pavadinimą, pamatote tikrus komponentų pavadinimus, kuriuos parašėte.

Pavyzdys be tinkamo šaltinių žemėlapio arba komponentų rietuvės sekos:

            Uncaught TypeError: Cannot read properties of null (reading 'name')
    at a (main.chunk.js:1:84325)
    at Ko (main.chunk.js:1:115219)
    at ys (main.chunk.js:1:98734)
            

              
                Copy
              
            
          

Pavyzdys su šaltinių žemėlapiu ir komponentų rietuvės seka:

            Uncaught TypeError: Cannot read properties of null (reading 'name')
    at UserProfile (UserProfile.jsx:15:25)
    at div
    at ProfilePage (ProfilePage.jsx:32:10)
    at App (App.jsx:8:5)
            

              
                Copy
              
            
          

Antrasis pavyzdys yra be galo naudingesnis. Iš karto matote, kad klaida įvyko UserProfile komponente 15 eilutėje, kurį atvaizdavo ProfilePage, kurį savo ruožtu atvaizdavo App. Tai yra tiksli vietos sekimas, kurio reikalauja šiuolaikinis derinimas.

Šaltinių žemėlapių nustatymas jūsų React projekte

Laimei, dauguma šiuolaikinių React įrankių rinkinių yra su prasmingomis šaltinių žemėlapių konfigūracijomis iškart. Tačiau supratimas, kaip juos valdyti, yra raktas į jūsų sąrankos optimizavimą skirtingoms aplinkoms.

Create React App (CRA)

Jei naudojate Create React App, jums pasisekė. Jis automatiškai generuoja aukštos kokybės šaltinių žemėlapius jums kūrimo aplinkoje (npm start). Gamybos versijoms (npm run build) jis taip pat generuoja šaltinių žemėlapius, tačiau turite galimybę juos išjungti dėl saugumo priežasčių, nustatydami aplinkos kintamąjį .env faile:

GENERATE_SOURCEMAP=false

Vėliau aptarsime šaltinių žemėlapių naudojimo gamyboje privalumus ir trūkumus.

Vite

Vite, populiarus naujos kartos kūrimo įrankis, taip pat teikia puikų palaikymą iškart. Jis pagal numatytuosius nustatymus naudoja šaltinių žemėlapius kūrime, kad užtikrintų greitą ir efektyvią derinimo patirtį. Gamybos versijoms galite valdyti išvestį savo vite.config.js faile:

            // vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ... other config
  build: {
    sourcemap: true, // or 'hidden', or false
  },
})

            

              
                Copy
              
            
          

Nustačius sourcemap: true kūrimo konfigūracijoje, bus generuojami ir susiejami šaltinių žemėlapiai jūsų gamybos kodui.

Pasirinktinė Webpack konfigūracija

Tiems, kurie valdo pasirinktinę Webpack sąranką, pagrindinis valdiklis yra devtool savybė jūsų webpack.config.js. Ši savybė turi daug galimų reikšmių, kurių kiekviena siūlo skirtingą kompromisą tarp kūrimo greičio ir šaltinių žemėlapio kokybės.

• Kūrimui:
  • eval-source-map: Aukštos kokybės šaltinių žemėlapiai. Kiekvienas modulis vykdomas su eval() ir šaltinių žemėlapis pridedamas kaip DataURL. Tai puikiai tinka derinimui, bet gali būti lėtas pradiniuose kūriniuose.
  • cheap-module-source-map: Geras balansas. Jis suteikia originalaus šaltinio kodo atvaizdavimą (tik eilučių numerius, ne stulpelius) ir yra greitesnis nei eval-source-map. Tai dažnai yra rekomenduojamas pasirinkimas kūrimui.
• Gamybai:
  • source-map: Aukščiausia kokybė. Jis generuoja atskirą .map failą. Tai yra geriausias pasirinkimas gamybos derinimui, bet jį lėčiausiai kurti. Šaltinių žemėlapis susiejamas per komentarą paketo faile, todėl jis yra prieinamas naršyklės kūrėjo įrankiams.
  • hidden-source-map: Tas pats kaip source-map, bet jis nepridėda susiejimo komentaro prie paketo. Naršyklės kūrėjo įrankiai automatiškai jo neras. Tai yra puikus pasirinkimas, kai norite įkelti šaltinių žemėlapius į klaidų sekimo tarnybą (pvz., Sentry arba Bugsnag), neatskleidžiant jų visuomenei.
  • false: Nėra generuojami jokie šaltinių žemėlapiai.

Tipinė profesionali sąranka gali atrodyti taip:

            // webpack.config.js
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    // ... other config
    devtool: isProduction ? 'hidden-source-map' : 'cheap-module-source-map',
  };
};

            

              
                Copy
              
            
          

Reakto klaidos dekodavimas su šaltinių žemėlapiais: praktinė apžvalga

Pažiūrėkime tai veikiant. Įsivaizduokite, kad turite komponentą, skirtą vartotojo duomenims rodyti, bet jame yra klaida.

Klaidingas komponentas: `UserDetails.jsx`

            import React from 'react';

function UserDetails({ user }) {
  // The bug: user.profile can sometimes be null
  const bio = user.profile.bio;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{bio}</p>
    </div>
  );
}

export default UserDetails;

            

              
                Copy
              
            
          

Kai šis komponentas atvaizduojamas su `user` objektu, kur `user.profile` yra `null`, jūsų programa sugenda.

Derinimo patirtis

1. Klaida pasirodo: Naršyklės konsolė parodys tokią klaidą: Uncaught TypeError: Cannot read properties of null (reading 'bio').
2. Vietos sekimas be šaltinių žemėlapių: Rietuvės seka nurodytų į sumažintą failą: main.js:1:12345. Spustelėjus šią nuorodą atsivers neskaitomo kodo siena, paliekanti jus spėlioti, iš kur kilo problema.
3. Vietos sekimas su šaltinių žemėlapiais: Patirtis yra visiškai kitokia.
   • Rietuvės seka bus aiški ir skaitoma: at UserDetails (UserDetails.jsx:5).
   • Taip pat pamatysite visą komponentų rietuvės seką, rodančią, kurie pagrindiniai komponentai atvaizdavo UserDetails.
   • Failo pavadinimas UserDetails.jsx:5 yra spustelėjama nuoroda. Spustelėjus ją, būsite tiesiogiai nuvežti į 5 eilutę jūsų originaliame, gražiai suformatuotame UserDetails.jsx faile tiesiai naršyklės DevTools. Tiksli išraiška user.profile.bio dažnai bus paryškinta.

Šis tiesioginis, tikslus grįžtamojo ryšio ciklas sutrumpina derinimo laiką nuo valandų iki minučių, kartais net sekundžių. Iš karto matote, kad turite pridėti patikrinimą user.profile prieš bandydami pasiekti jo bio savybę.

Šaltinių žemėlapiai gamyboje: didelės diskusijos

Nors šaltinių žemėlapiai yra akivaizdus laimėjimas kūrimui, jų naudojimas gamyboje yra subtilesnė tema, apimanti kompromisą tarp derinimo galimybių ir saugumo.

Argumentai UŽ gamybos šaltinių žemėlapius

Gamybos aplinkose atsiranda kritiškiausios klaidos. Be šaltinių žemėlapių, klaidų ataskaitos, kurias gaunate iš vartotojų arba iš automatizuotų sekimo tarnybų, bus sumažintos ir beveik nenaudingos. Norėdami efektyviai derinti problemas, turinčias įtakos tikriems vartotojams, jums reikia būdo, kaip pašalinti tuos gamybos rietuvės sekų užmaskavimus.

Argumentai PRIEŠ gamybos šaltinių žemėlapius

• Saugumas ir intelektinė nuosavybė: Jei viešai įdiegiate savo šaltinių žemėlapius (naudodami source-map kūrėjo įrankio parinktį), bet kas, turintis naršyklę, gali lengvai patikrinti jūsų programos originalų šaltinio kodą. Tai galėtų atskleisti verslo logiką, API raktus (jei netinkamai tvarkomi) ar kitą nuosavybės informaciją.
• Našumas: Nors šiuolaikinės naršyklės įkelia šaltinių žemėlapio failą tik tada, kai atidarytas DevTools, jų generavimas gali padidinti jūsų kūrimo laiką.

Geriausia iš abiejų pasaulių: saugus gamybos derinimas

Laimei, jums nereikia rinktis tarp saugumo ir derinimo galimybių. Šiuolaikinė geriausia praktika yra generuoti šaltinių žemėlapius gamybai, bet laikyti juos privačiais.

1. Naudokite `hidden-source-map` (arba lygiavertį): Sukonfigūruokite savo paketus, kad generuotų šaltinių žemėlapius, bet nesusietų jų su jūsų JavaScript failais. Tai neleidžia naršyklėms automatiškai jų rasti.
2. Integruokite klaidų sekimo tarnybą: Naudokite tokią tarnybą kaip Sentry, Bugsnag, Datadog arba LogRocket. Šios platformos yra skirtos programų klaidoms įsisavinti ir analizuoti.
3. Įkelkite šaltinių žemėlapius per CI/CD: Kaip dalį savo nuolatinės integracijos ir diegimo konvejerio, po to, kai sukuriate savo programą, pridėkite žingsnį, kad įkeltumėte sugeneruotus .map failus tiesiogiai į pasirinktą klaidų sekimo tarnybą. Dauguma tarnybų teikia CLI įrankį tam. Jūsų CI/CD scenarijus koncepciškai gali atrodyti maždaug taip:

               # 1. Install dependencies
   npm install
   
   # 2. Build the application (this generates JS bundles and .map files)
   GENERATE_SOURCEMAP=true npm run build
   
   # 3. Upload source maps to your service
   sentry-cli releases files <release-version> upload-sourcemaps ./build/static/js
   
   # 4. Deploy your application (the .map files are NOT deployed to public servers)
   deploy_to_production ./build
               
   
                 
                   Copy
                 
               
             

Su šia sąranka, kai gamyboje įvyksta klaida, klaidų ataskaita siunčiama į jūsų sekimo tarnybą. Tada tarnyba naudoja privačius šaltinių žemėlapius, kuriuos įkėlėte, kad sumažintų rietuvės seką, suteikdama jums visą, skaitomą komponentų rietuvės seką gamybos klaidai, niekada neatskleidžiant jūsų šaltinio kodo visuomenei.

Išvada: nuo sumaišties iki aiškumo

Šaltinių žemėlapiai yra pagrindinė technologija, dėl kurios šiuolaikinis, komponentais pagrįstas kūrimas su React tampa ne tik įmanomas, bet ir malonus. Jie užpildo atotrūkį tarp optimizuoto kodo, kurį vykdo naršyklė, ir skaitomo kodo, kurį rašote, paversdami klaidų pranešimus iš paslaptingų galvosūkių į aiškius kelio ženklus.

Suprasdami, kaip juos konfigūruoti tiek kūrimo greičiui, tiek gamybos saugumui, suteikiate sau ir savo komandai galimybę tiksliai ir efektyviai sekti klaidas. Tvirtos šaltinių žemėlapių strategijos priėmimas, ypač kartu su klaidų sekimo tarnyba, yra viena reikšmingiausių investicijų, kurią galite atlikti į savo React programų stabilumą ir prižiūrimumą. Nustokite spėlioti ir pradėkite derinti aiškiai.