એક કેશ્ડ React Bundle એ ખોટા ડેટાબેઝમાં ડેટા કેવી રીતે મોકલ્યો

અમે ડેડલાઇન પૂરી કરી. બેકએન્ડ ટીમે નવા API અને નવા ડેટાબેઝ પર માઈગ્રેશન કર્યું. ફ્રન્ટએન્ડ ટીમે AWS Amplify માં એન્વાયરમેન્ટ વેરિયેબલ્સ (environment variables) અપડેટ કર્યા અને કોડ પુશ કર્યો.

ડિપ્લોયમેન્ટ સફળ રહ્યું. અમે અમારા લેપટોપ બંધ કરી દીધા. અમને લાગ્યું કે કામ પૂરું થઈ ગયું છે.

અમે ખોટા હતા.

એક એન્જિનિયરે જૂના API સર્વર પરના લોગ્સ (logs) તપાસ્યા. આ સર્વર બંધ થઈ ગયું હોવું જોઈતું હતું. પણ તે બંધ નહોતું. તે ક્લાયન્ટની અસલી વિનંતીઓ (requests) મેળવી રહ્યું હતું અને જૂના ડેટાબેઝમાં ડેટા લખી રહ્યું હતું.

બે કલાક સુધી, ક્લાયન્ટનો અસલી ડેટા ખોટી જગ્યાએ ગયો.

તે શા માટે થયું અને અમે તેને કેવી રીતે ઠીક કર્યું તેની વિગતો અહીં છે.

સમસ્યા

AWS Amplify જેવા CDNs પર React એપ્સ બિલ્ડ ટાઇમ (build time) પર એન્વાયરમેન્ટ વેરિયેબલ્સ બદલી નાખે છે. જ્યારે તમે બિલ્ડ રન કરો છો, ત્યારે બંડલર (bundler) દરેક વેરિયેબલ શોધીને તેને હાર્ડકોડેડ સ્ટ્રિંગ (hardcoded string) સાથે બદલી નાખે છે.

API URL ફિઝિકલી JavaScript ફાઇલમાં જ એમ્બેડ (embedded) થયેલું હતું.

જ્યારે અમે ડિપ્લોય કર્યું, ત્યારે નવા યુઝર્સને નવું બંડલ મળ્યું. પરંતુ જે યુઝર્સ પાસે એપ ખુલ્લી હતી તેઓએ તેને રિફ્રેશ નહોતું કર્યું. તેઓ જૂના બંડલનો ઉપયોગ કરતા રહ્યા જેમાં જૂનું URL હાર્ડકોડેડ હતું.

જૂનું સર્વર હજુ પણ ચાલુ હોવાને કારણે, આ ક્લાયન્ટ્સને 200 OK સ્ટેટસ મળતું હતું. બધું બરાબર દેખાતું હતું. આ નિષ્ફળતા 'સાયલન્ટ' (silent) હતી. સાયલન્ટ બગ એ સૌથી ખતરનાક પ્રકારનો બગ છે.

ત્રણ-સ્તરીય ઉકેલ

આ ફરી ક્યારેય ન થાય તે સુનિશ્ચિત કરવા માટે અમે ત્રણ સ્તરો બનાવ્યા.

૧. રનટાઇમ કોન્ફિગરેશન (Runtime Configuration) અમે JavaScript બંડલમાં URL ને ઇનબિલ્ટ (bake) કરવાનું બંધ કરી દીધું. તેના બદલે, અમે public ફોલ્ડરમાં config.json ફાઇલનો ઉપયોગ કરીએ છીએ. બંડલર આ ફાઇલને સ્પર્શતું નથી. એપ રેન્ડર થતા પહેલા રનટાઇમ પર આ ફાઇલ ફેચ (fetch) કરે છે. આ સુનિશ્ચિત કરે છે કે નવા સેશન્સને હંમેશા સાચું URL મળે.

૨. WebSocket નોટિફિકેશન્સ રનટાઇમ કોન્ફિગરેશન એવા યુઝર્સ માટે મદદરૂપ નથી જેમની ટેબ ખુલ્લી છે. અમે અમારી ડિપ્લોયમેન્ટ પ્રક્રિયાને અમારા WebSocket સર્વર સાથે જોડી દીધી. જ્યારે Amplify બિલ્ડ પૂર્ણ કરે છે, ત્યારે તે અમારા API પર વેબહૂક (webhook) કોલ કરે છે. ત્યારબાદ સર્વર તમામ કનેક્ટેડ ક્લાયન્ટ્સને મેસેજ મોકલે છે. જો કોઈ યુઝર જૂના વર્ઝન પર હોય, તો તેમને રિફ્રેશ કરવા માટે એક બેનર દેખાય છે.

૩. કેશ મેનેજમેન્ટ (Cache Management) અમે અમારી CloudFront સેટિંગ્સ અપડેટ કરી. index.html અને config.json જેવા એન્ટ્રી પોઈન્ટ્સ હવે no-cache પર સેટ કરવામાં આવ્યા છે. આ સુનિશ્ચિત કરે છે કે યુઝર્સ CDN એજ નોડ (edge node) પરથી જૂની ફાઇલો મેળવવાને બદલે હંમેશા લેટેસ્ટ ફાઇલો ફેચ કરે.

બોધપાઠ

• ડિપ્લોયમેન્ટ્સ વચ્ચે બદલાતા મૂલ્યો માટે બિલ્ડ-ટાઇમ કોન્ફિગરેશન એક જાળ છે. • અવાજ કરતાં શાંતિ વધુ જોખમી છે. જૂની સિસ્ટમોને 410 Gone સ્ટેટસ સાથે સ્પષ્ટ રીતે નિષ્ફળ બનાવો. • ડેડલાઇનનું દબાણ મેન્યુઅલ સ્ટેપ્સમાં ભૂલો કરી શકે છે. તમારી ડિકમિશનિંગ પ્રક્રિયાને ઓટોમેટ કરો. • તમે જે વસ્તુઓ ચાલુ કરી રહ્યા છો તેનું જ નહીં, પરંતુ તમે જે વસ્તુઓ બંધ કરી રહ્યા છો તેનું પણ મોનિટરિંગ કરો.

ડિપ્લોયમેન્ટ એટલે માત્ર કોડ પુશ કરવો એટલું જ નથી. તે એ સુનિશ્ચિત કરવા વિશે છે કે દરેક ક્લાયન્ટ અંતે સાચો કોડ ચલાવી રહ્યો છે.

સ્ત્રોત: https://dev.to/sugan_dev/how-a-cached-react-bundle-sent-production-data-to-the-wrong-database-55n9