Reactમાં કાર્યક્ષમ ડિબગિંગને અનલૉક કરો. આ વ્યાપક માર્ગદર્શિકા સમજાવે છે કે સોર્સ મેપ્સ શું છે, તે કમ્પોનન્ટ સ્ટેક ટ્રેસ સાથે કેવી રીતે કાર્ય કરે છે અને ડેવલપમેન્ટ અને પ્રોડક્શનમાં તેનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ.
રિએક્ટ એરર ડિબગિંગમાં નિપુણતા: એરર લોકેશન ટ્રેકિંગ માટે કમ્પોનન્ટ સોર્સ મેપ્સમાં ઊંડાણપૂર્વકનું વિશ્લેષણ
એક રિએક્ટ ડેવલપર તરીકે, તમે નિઃશંકપણે તેનો સામનો કર્યો હશે: તમારા બ્રાઉઝરના કન્સોલમાં એક મહત્વપૂર્ણ ભૂલ સંદેશ દેખાય છે, જે main.chunk.js:1:84325 જેવી વિશાળ, મીનીફાઇડ જાવાસ્ક્રિપ્ટ ફાઇલમાં એક રહસ્યમય લાઇન તરફ નિર્દેશ કરે છે. આ એક લીટીનો પ્રતિસાદ એ ડિજિટલ રીતે એવું કહેવા બરાબર છે કે તમારી કારમાં "એન્જિનમાં ક્યાંક" સમસ્યા છે. તે હતાશાજનક, સમય માંગી લે તેવું અને વિકાસ જીવનચક્રમાં એક નોંધપાત્ર અવરોધ છે. આ તે છે જ્યાં આધુનિક વેબ ડેવલપમેન્ટનો વણગાયેલો હીરો આવે છે: સોર્સ મેપ.
આ માર્ગદર્શિકા તમને રિએક્ટ કમ્પોનન્ટ એરર સોર્સ મેપ્સની દુનિયામાં ઊંડાણપૂર્વકનું વિશ્લેષણ કરાવશે. અમે તેઓ કેવી રીતે કાર્ય કરે છે, શા માટે તેઓ ભૂલ સ્થાનોને ટ્રેક કરવા માટે અનિવાર્ય છે અને વિકાસ અને ઉત્પાદન બંને વાતાવરણ માટે તેમને અસરકારક રીતે કેવી રીતે ગોઠવવા તે રહસ્ય ખોલીશું. અંત સુધીમાં, તમે ગૂઢ ભૂલ સંદેશાઓને ચોક્કસ, કાર્યવાહી કરી શકાય તેવી ડિબગિંગ આંતરદૃષ્ટિમાં ફેરવવા માટે સજ્જ થશો.
સોર્સ મેપ બરાબર શું છે?
તેના મૂળમાં, સોર્સ મેપ એ એક ફાઇલ છે (સામાન્ય રીતે .map એક્સ્ટેંશન સાથે) જે તમારા કમ્પાઇલ કરેલા, મીનીફાઇડ અને બંડલ્ડ કોડ અને તમારા દ્વારા લખાયેલા મૂળ સોર્સ કોડ વચ્ચે જોડાણ બનાવે છે. તેને વિગતવાર સૂચનાઓ અથવા અનુવાદ કી તરીકે વિચારો. જ્યારે તમારું બ્રાઉઝર કોડ એક્ઝિક્યુટ કરે છે અને રૂપાંતરિત ફાઇલમાં કોઈ ચોક્કસ લાઇન અને કૉલમ પર ભૂલ થાય છે, ત્યારે તે સોર્સ મેપનો ઉપયોગ તે સ્થાનને જોવા માટે અને તમને જણાવવા માટે કરી શકે છે કે તમારી મૂળ, માનવ-વાંચી શકાય તેવી ફાઇલમાં ભૂલ ક્યાં થઈ છે.
આધુનિક વેબ ડેવલપમેન્ટ પ્રક્રિયામાં ઘણા પરિવર્તન પગલાં શામેલ છે:
- ટ્રાન્સપિલેશન: બેબલ જેવા સાધનો આધુનિક જાવાસ્ક્રિપ્ટ (ESNext) અને JSX ને જૂના, વધુ વ્યાપક રીતે સુસંગત જાવાસ્ક્રિપ્ટ (જેમ કે ES5) માં રૂપાંતરિત કરે છે. ઉદાહરણ તરીકે, તમારું ભવ્ય JSX
<div>Hello</div>React.createElement('div', null, 'Hello')બને છે. - બંડલિંગ: વેબપેક, વીટ અથવા રોલઅપ જેવા સાધનો તમારા બધા વ્યક્તિગત મોડ્યુલો (ઘટકો, ઉપયોગિતાઓ, CSS ફાઇલો) લે છે અને બ્રાઉઝરને ડાઉનલોડ કરવા માટે તેમને થોડી ઑપ્ટિમાઇઝ કરેલી ફાઇલોમાં જોડે છે.
- મીનીફિકેશન: ફાઇલનું કદ ઘટાડવા અને લોડિંગ સમય સુધારવા માટે, ટર્સર અથવા ઉગલિફાઇજેએસ જેવા સાધનો ચલ નામોને ટૂંકાવે છે, ખાલી જગ્યા દૂર કરે છે અને ટિપ્પણીઓ દૂર કરે છે. તમારું વર્ણનાત્મક ચલ
const userProfileData = ...const a = ...બની શકે છે.
જ્યારે આ પગલાં પ્રદર્શન માટે આવશ્યક છે, ત્યારે તેઓ તમારા મૂળ કોડની રચના અને વાંચનક્ષમતાને નષ્ટ કરે છે. સોર્સ મેપ ડિબગિંગ હેતુઓ માટે આ અસ્પષ્ટતાને ઉલટાવી દે છે, જે વિકાસકર્તાના અનુભવને વ્યવસ્થિત બનાવે છે.
રિએક્ટ ડેવલપમેન્ટમાં સોર્સ મેપ્સ શા માટે અનિવાર્ય છે
રિએક્ટનું ઘટક-આધારિત આર્કિટેક્ચર જટિલતાનું બીજું સ્તર ઉમેરે છે જે સોર્સ મેપ્સને વધુ મહત્વપૂર્ણ બનાવે છે. ભૂલ ફક્ત ફાઇલમાં થતી નથી; તે ચોક્કસ ઘટકની અંદર થાય છે, ઘણીવાર અન્ય ઘટકોના વંશવેલામાં ઊંડે સુધી. સોર્સ મેપ્સ વિના, ડિબગિંગ એક દુઃસ્વપ્ન છે.
કમ્પોનન્ટ સ્ટેક ટ્રેસની શક્તિ
રિએક્ટ 16 પહેલાં, એક સામાન્ય ભૂલ તમને પ્રમાણભૂત જાવાસ્ક્રિપ્ટ સ્ટેક ટ્રેસ આપશે, જે મીનીફાઇડ બંડલમાં ફંક્શન કૉલ્સની સૂચિ હતી. આને ભૂલ માટે જવાબદાર ઘટક પર પાછા ટ્રેસ કરવું મુશ્કેલ હતું.
રિએક્ટ 16 એ એક ગેમ-ચેન્જિંગ સુવિધા રજૂ કરી: કમ્પોનન્ટ સ્ટેક ટ્રેસ. જ્યારે કોઈ ભૂલ થાય છે, ત્યારે રિએક્ટ, સોર્સ મેપ્સ સાથે મળીને, એક સ્ટેક ટ્રેસ પ્રદાન કરે છે જે ભૂલ તરફ દોરી જતા ઘટક વંશવેલાને દર્શાવે છે. અર્થહીન ફંક્શન નામ જોવાને બદલે, તમે તમારા દ્વારા લખેલા વાસ્તવિક ઘટક નામો જુઓ છો.
યોગ્ય સોર્સ મેપ અથવા ઘટક સ્ટેક ટ્રેસ વિનાનું ઉદાહરણ:
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)
સોર્સ મેપ અને ઘટક સ્ટેક ટ્રેસ સાથેનું ઉદાહરણ:
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)
બીજું ઉદાહરણ અનંત રીતે વધુ ઉપયોગી છે. તમે તરત જ જોઈ શકો છો કે UserProfile ઘટકમાં લાઇન 15 પર ભૂલ આવી છે, જે ProfilePage દ્વારા રેન્ડર કરવામાં આવી હતી, જે બદલામાં App દ્વારા રેન્ડર કરવામાં આવી હતી. આ ચોક્કસ સ્થાન ટ્રેકિંગ છે જે આધુનિક ડિબગિંગની માંગ કરે છે.
તમારા રિએક્ટ પ્રોજેક્ટમાં સોર્સ મેપ્સ સેટ કરવા
સદનસીબે, મોટાભાગના આધુનિક રિએક્ટ ટૂલચેઇન્સ સંવેદનશીલ સોર્સ મેપ રૂપરેખાંકનો સાથે આવે છે. જો કે, તેમને કેવી રીતે નિયંત્રિત કરવા તે સમજવું એ વિવિધ વાતાવરણ માટે તમારી સેટઅપને ઑપ્ટિમાઇઝ કરવાની ચાવી છે.
ક્રિએટ રિએક્ટ એપ (CRA)
જો તમે ક્રિએટ રિએક્ટ એપનો ઉપયોગ કરી રહ્યા છો, તો તમે નસીબદાર છો. તે વિકાસ પર્યાવરણમાં તમારા માટે આપમેળે ઉચ્ચ-ગુણવત્તાવાળા સોર્સ મેપ્સ જનરેટ કરે છે (npm start). પ્રોડક્શન બિલ્ડ્સ માટે (npm run build), તે સોર્સ મેપ્સ પણ જનરેટ કરે છે, પરંતુ તમારી પાસે .env ફાઇલમાં પર્યાવરણીય ચલ સેટ કરીને સુરક્ષા કારણોસર તેમને અક્ષમ કરવાનો વિકલ્પ છે:
GENERATE_SOURCEMAP=false
અમે પછીથી પ્રોડક્શનમાં સોર્સ મેપ્સનો ઉપયોગ કરવાના ગુણદોષની ચર્ચા કરીશું.
વીટ
વીટ, એક લોકપ્રિય નેક્સ્ટ-જનરેશન બિલ્ડ ટૂલ, પણ ઉત્તમ આઉટ-ઓફ-ધ-બોક્સ સપોર્ટ પૂરો પાડે છે. તે ઝડપી અને અસરકારક ડિબગિંગ અનુભવ માટે વિકાસમાં ડિફૉલ્ટ રૂપે સોર્સ મેપ્સનો ઉપયોગ કરે છે. પ્રોડક્શન બિલ્ડ્સ માટે, તમે તમારી vite.config.js ફાઇલમાં આઉટપુટને નિયંત્રિત કરી શકો છો:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
// ... other config
build: {
sourcemap: true, // or 'hidden', or false
},
})
બિલ્ડ રૂપરેખાંકનમાં sourcemap: true સેટ કરવાથી તમારા પ્રોડક્શન કોડ માટે સોર્સ મેપ્સ જનરેટ અને લિંક થશે.
કસ્ટમ વેબપેક રૂપરેખાંકન
કસ્ટમ વેબપેક સેટઅપનું સંચાલન કરતા લોકો માટે, પ્રાથમિક નિયંત્રણ તમારી webpack.config.js માં devtool પ્રોપર્ટી છે. આ પ્રોપર્ટીમાં ઘણા સંભવિત મૂલ્યો છે, જેમાં દરેક બિલ્ડ સ્પીડ અને સોર્સ મેપ ગુણવત્તા વચ્ચે અલગ-અલગ ટ્રેડ-ઓફ ઓફર કરે છે.
- વિકાસ માટે:
eval-source-map: ઉચ્ચ-ગુણવત્તાવાળા સોર્સ મેપ્સ. દરેક મોડ્યુલeval()સાથે એક્ઝિક્યુટ થાય છે અને સોર્સ મેપને ડેટાURL તરીકે જોડવામાં આવે છે. તે ડિબગિંગ માટે શ્રેષ્ઠ છે પરંતુ પ્રારંભિક બિલ્ડ્સ પર ધીમું હોઈ શકે છે.cheap-module-source-map: એક સારું સંતુલન. તે મૂળ સોર્સ કોડ મેપિંગ (માત્ર લાઇન નંબર્સ, કૉલમ્સ નહીં) પ્રદાન કરે છે અનેeval-source-mapકરતાં વધુ ઝડપી છે. આ ઘણીવાર વિકાસ માટે ભલામણ કરાયેલ પસંદગી છે.
- ઉત્પાદન માટે:
source-map: ઉચ્ચતમ ગુણવત્તા. તે એક અલગ.mapફાઇલ જનરેટ કરે છે. આ પ્રોડક્શન ડિબગિંગ માટે શ્રેષ્ઠ વિકલ્પ છે પરંતુ બિલ્ડ કરવામાં સૌથી ધીમો છે. સોર્સ મેપ બંડલ ફાઇલમાં ટિપ્પણી દ્વારા લિંક કરવામાં આવે છે, જે તેને બ્રાઉઝર ડેવ ટૂલ્સ માટે સુલભ બનાવે છે.hidden-source-map:source-mapજેવું જ, પરંતુ તે બંડલમાં લિંકિંગ ટિપ્પણી ઉમેરતું નથી. બ્રાઉઝર ડેવ ટૂલ્સ તેને આપમેળે શોધી શકશે નહીં. જ્યારે તમે સોર્સ મેપ્સને સાર્વજનિક લોકો માટે ખુલ્લા પાડ્યા વિના એરર ટ્રેકિંગ સર્વિસ (જેમ કે સેન્ટ્રી અથવા બગસ્નેગ) પર અપલોડ કરવા માંગતા હો ત્યારે આ સંપૂર્ણ વિકલ્પ છે.false: કોઈ સોર્સ મેપ્સ જનરેટ થતા નથી.
એક લાક્ષણિક વ્યાવસાયિક સેટઅપ આના જેવું દેખાઈ શકે છે:
// webpack.config.js
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production';
return {
// ... other config
devtool: isProduction ? 'hidden-source-map' : 'cheap-module-source-map',
};
};
સોર્સ મેપ્સ સાથે રિએક્ટ એરરને ડીકોડ કરવી: એક વ્યવહારુ વોકથ્રુ
ચાલો આને ક્રિયામાં જોઈએ. કલ્પના કરો કે તમારી પાસે વપરાશકર્તાની વિગતો પ્રદર્શિત કરવા માટે રચાયેલ એક ઘટક છે, પરંતુ તેમાં બગ છે.
બગી ઘટક: `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;
જ્યારે આ ઘટક `user` ઑબ્જેક્ટ સાથે રેન્ડર થાય છે જ્યાં `user.profile` `null` હોય, ત્યારે તમારી એપ્લિકેશન ક્રેશ થશે.
ડિબગિંગ અનુભવ
- ભૂલ દેખાય છે: બ્રાઉઝર કન્સોલ એક ભૂલ બતાવશે જેમ કે:
Uncaught TypeError: Cannot read properties of null (reading 'bio'). - સોર્સ મેપ્સ વિના સ્થાન ટ્રેકિંગ: સ્ટેક ટ્રેસ એક મીનીફાઇડ ફાઇલ તરફ નિર્દેશ કરશે:
main.js:1:12345. આ લિંક પર ક્લિક કરવાથી કોડની અવ્યવસ્થિત દિવાલ ખુલશે, જેનાથી તમને સમસ્યા ક્યાંથી ઉદ્ભવી તે અંગે અનુમાન લગાવવાનું બાકી રહેશે. - સોર્સ મેપ્સ સાથે સ્થાન ટ્રેકિંગ: અનુભવ સંપૂર્ણપણે અલગ છે.
- સ્ટેક ટ્રેસ સ્પષ્ટ અને વાંચી શકાય તેવું હશે:
at UserDetails (UserDetails.jsx:5). - તમે સંપૂર્ણ ઘટક સ્ટેક ટ્રેસ પણ જોશો, જે દર્શાવે છે કે કયા પેરેન્ટ ઘટકોએ
UserDetailsરેન્ડર કર્યું છે. - ફાઇલ નામ
UserDetails.jsx:5એ ક્લિક કરી શકાય તેવી લિંક છે. તેના પર ક્લિક કરવાથી તમને સીધા જ તમારા મૂળ, સુંદર રીતે ફોર્મેટ કરેલUserDetails.jsxફાઇલની લાઇન 5 પર બ્રાઉઝરના DevTools ની અંદર લઈ જવામાં આવશે. ચોક્કસ અભિવ્યક્તિuser.profile.bioને ઘણીવાર હાઇલાઇટ કરવામાં આવશે.
- સ્ટેક ટ્રેસ સ્પષ્ટ અને વાંચી શકાય તેવું હશે:
આ તાત્કાલિક, ચોક્કસ પ્રતિસાદ લૂપ ડિબગિંગ સમયને કલાકોથી મિનિટોમાં કાપી નાખે છે, કેટલીકવાર તો સેકન્ડોમાં પણ. તમે તરત જ જોઈ શકો છો કે તમારે તેની `bio` પ્રોપર્ટીને એક્સેસ કરવાનો પ્રયાસ કરતા પહેલા `user.profile` માટે એક ચેક ઉમેરવાની જરૂર છે.
ઉત્પાદનમાં સોર્સ મેપ્સ: મહાન ચર્ચા
જ્યારે સોર્સ મેપ્સ વિકાસ માટે સ્પષ્ટ જીત છે, ત્યારે ઉત્પાદનમાં તેમનો ઉપયોગ ડિબગેબિલિટી અને સુરક્ષા વચ્ચેના ટ્રેડ-ઓફને સંડોવતો એક વધુ સૂક્ષ્મ વિષય છે.
ઉત્પાદન સોર્સ મેપ્સ માટેનો કેસ
ઉત્પાદન પર્યાવરણ એ છે જ્યાં તમારી સૌથી મહત્વપૂર્ણ બગ્સ સપાટી પર આવે છે. સોર્સ મેપ્સ વિના, તમને વપરાશકર્તાઓ તરફથી અથવા સ્વચાલિત ટ્રેકિંગ સેવાઓ તરફથી મળતા ભૂલ અહેવાલો મીનીફાઇડ અને લગભગ નકામા હશે. વાસ્તવિક વપરાશકર્તાઓને અસર કરતી સમસ્યાઓને અસરકારક રીતે ડિબગ કરવા માટે, તમારે તે ઉત્પાદન સ્ટેક ટ્રેસને ડિ-ઓબફસ્કેટ કરવાની રીતની જરૂર છે.
ઉત્પાદન સોર્સ મેપ્સ સામેનો કેસ
- સુરક્ષા અને બૌદ્ધિક સંપદા: જો તમે તમારા સોર્સ મેપ્સને જાહેરમાં જમાવો છો (
source-mapડેવટૂલ વિકલ્પનો ઉપયોગ કરીને), તો બ્રાઉઝર ધરાવનાર કોઈપણ વ્યક્તિ તમારી એપ્લિકેશનના મૂળ સોર્સ કોડનું સરળતાથી નિરીક્ષણ કરી શકે છે. આ વ્યવસાય તર્ક, API કી (જો અયોગ્ય રીતે સંચાલિત કરવામાં આવે તો) અથવા અન્ય માલિકીની માહિતીને ખુલ્લી પાડી શકે છે. - પ્રદર્શન: જ્યારે આધુનિક બ્રાઉઝર્સ જ્યારે DevTools ખુલ્લું હોય ત્યારે જ સોર્સ મેપ ફાઇલ લોડ કરે છે, ત્યારે તેમને જનરેટ કરવાથી તમારો બિલ્ડ સમય વધી શકે છે.
બંને વિશ્વમાં શ્રેષ્ઠ: સુરક્ષિત ઉત્પાદન ડિબગિંગ
સદનસીબે, તમારે સુરક્ષા અને ડિબગેબિલિટી વચ્ચે પસંદગી કરવાની જરૂર નથી. આધુનિક શ્રેષ્ઠ પ્રથા એ છે કે ઉત્પાદન માટે સોર્સ મેપ્સ જનરેટ કરવા પરંતુ તેમને ખાનગી રાખવા.
- `hidden-source-map` (અથવા સમકક્ષ) નો ઉપયોગ કરો: તમારા બંડલરને સોર્સ મેપ્સ જનરેટ કરવા માટે ગોઠવો પરંતુ તેમને તમારી જાવાસ્ક્રિપ્ટ ફાઇલોમાં લિંક કરશો નહીં. આ બ્રાઉઝર્સને તેમને આપમેળે શોધવાથી અટકાવે છે.
- એરર ટ્રેકિંગ સર્વિસને એકીકૃત કરો: સેન્ટ્રી, બગસ્નેગ, ડેટાડોગ અથવા લોગરોકેટ જેવી સર્વિસનો ઉપયોગ કરો. આ પ્લેટફોર્મ એપ્લિકેશન ભૂલોને ગ્રહણ અને વિશ્લેષણ કરવા માટે ડિઝાઇન કરવામાં આવ્યા છે.
- CI/CD દરમિયાન સોર્સ મેપ્સ અપલોડ કરો: તમારી સતત એકીકરણ અને જમાવટ પાઇપલાઇનના ભાગ રૂપે, તમારી એપ્લિકેશન બનાવ્યા પછી, તમારી પસંદ કરેલી એરર ટ્રેકિંગ સર્વિસ પર સીધા જ જનરેટ થયેલ
.mapફાઇલોને અપલોડ કરવા માટે એક પગલું ઉમેરો. મોટાભાગની સેવાઓ આ માટે CLI ટૂલ પ્રદાન કરે છે. તમારી CI/CD સ્ક્રિપ્ટ સૈદ્ધાંતિક રીતે આના જેવી દેખાઈ શકે છે:# 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
આ સેટઅપ સાથે, જ્યારે ઉત્પાદનમાં ભૂલ થાય છે, ત્યારે ભૂલ અહેવાલ તમારી ટ્રેકિંગ સર્વિસને મોકલવામાં આવે છે. પછી સર્વિસ તમારા દ્વારા અપલોડ કરાયેલા ખાનગી સોર્સ મેપ્સનો ઉપયોગ સ્ટેક ટ્રેસને ડિ-મીનીફાય કરવા માટે કરે છે, જે તમને ઉત્પાદન બગ માટે સંપૂર્ણ, વાંચી શકાય તેવા ઘટક સ્ટેક ટ્રેસ આપે છે, તમારા સોર્સ કોડને ક્યારેય સાર્વજનિક લોકો માટે ખુલ્લો પાડ્યા વિના.
નિષ્કર્ષ: મૂંઝવણથી સ્પષ્ટતા તરફ
સોર્સ મેપ્સ એ એક પાયાની ટેકનોલોજી છે જે રિએક્ટ સાથે આધુનિક, ઘટક-આધારિત વિકાસને માત્ર શક્ય જ નહીં, પરંતુ આનંદપ્રદ પણ બનાવે છે. તેઓ બ્રાઉઝર ચલાવે છે તે ઑપ્ટિમાઇઝ્ડ કોડ અને તમે લખો છો તે વાંચી શકાય તેવા કોડ વચ્ચેના અંતરને દૂર કરે છે, ભૂલ સંદેશાઓને ગૂઢ કોયડાઓમાંથી સ્પષ્ટ સંકેતોમાં રૂપાંતરિત કરે છે.
વિકાસની ઝડપ અને ઉત્પાદન સુરક્ષા બંને માટે તેમને કેવી રીતે ગોઠવવા તે સમજીને, તમે તમારી જાતને અને તમારી ટીમને ચોકસાઇ અને કાર્યક્ષમતા સાથે ભૂલોને ટ્રેક કરવા માટે સશક્ત કરો છો. એક મજબૂત સોર્સ મેપ વ્યૂહરચનાને અપનાવવી, ખાસ કરીને જ્યારે એરર ટ્રેકિંગ સર્વિસ સાથે જોડવામાં આવે, ત્યારે તે સૌથી નોંધપાત્ર રોકાણોમાંનું એક છે જે તમે તમારી રિએક્ટ એપ્લિકેશન્સની સ્થિરતા અને જાળવણીક્ષમતામાં કરી શકો છો. અનુમાન લગાવવાનું બંધ કરો અને સ્પષ્ટતા સાથે ડિબગિંગ શરૂ કરો.