कॅश केलेल्या React Bundle मुळे डेटा चुकीच्या डेटाबेसमध्ये कसा गेला

आमची डेडलाईन जवळ आली होती. बॅकएंड टीमने नवीन API आणि नवीन डेटाबेसवर स्थलांतर (migrate) केले. फ्रंटएंड टीमने AWS Amplify मधील environment variables अपडेट केले आणि कोड पुश केला.

डिप्लॉयमेंट यशस्वी झाले. आम्ही आमचे लॅपटॉप्स बंद केले. आम्हाला वाटले की काम पूर्ण झाले आहे.

पण आम्ही चुकीचे होतो.

एका इंजिनिअरने जुन्या API सर्व्हरवरील लॉग्स तपासले. हा सर्व्हर बंद असायला हवा होता. पण तो बंद नव्हता. तो क्लायंटच्या खऱ्या विनंत्या (requests) स्वीकारत होता आणि जुन्या डेटाबेसमध्ये डेटा लिहित होता.

दोन तास, क्लायंटचा खरा डेटा चुकीच्या ठिकाणी जात राहिला.

हे का घडले आणि आम्ही ते कसे दुरुस्त केले, ते खाली दिले आहे.

समस्या

AWS Amplify सारख्या CDNs वरील React ॲप्स बिल्ड टाइमला (build time) environment variables बदलतात. जेव्हा तुम्ही बिल्ड रन करता, तेव्हा bundler प्रत्येक व्हेरिएबल शोधतो आणि त्याऐवजी एक hardcoded string वापरतो.

API URL प्रत्यक्ष JavaScript फाईलमध्येच एम्बेड केलेली होती.

जेव्हा आम्ही डिप्लॉय केले, तेव्हा नवीन युजर्सना नवीन bundle मिळाले. परंतु ज्या युजर्सनी ॲप आधीच उघडून ठेवले होते, त्यांनी ते रिफ्रेश केले नाही. ते जुन्या URL सह जुने bundle वापरत राहिले.

जुना सर्व्हर अजूनही चालू असल्यामुळे, या क्लायंट्सना 200 OK स्टेटस मिळाले. सर्व काही व्यवस्थित दिसत होते. ही त्रुटी शांतपणे घडत होती. 'सायलेंट बग' हा सर्वात धोकादायक प्रकार असतो.

तीन-स्तरीय उपाय

हे पुन्हा कधीही होऊ नये यासाठी आम्ही तीन स्तर तयार केले.

१. रनटाइम कॉन्फिगरेशन आम्ही JavaScript bundle मध्ये URL समाविष्ट करणे थांबवले. त्याऐवजी, आम्ही public फोल्डरमध्ये config.json फाईल वापरतो. Bundler या फाईलला स्पर्श करत नाही. ॲप

• डिप्लॉयमेंट दरम्यान बदलणाऱ्या मूल्यांसाठी 'बिल्ड-टाइम कॉन्फिग' हा एक सापळा आहे. • गोंगाटापेक्षा शांतता अधिक धोकादायक असते. जुन्या सिस्टम्सना '410 Gone' स्टेटससह स्पष्टपणे फेल करा. • डेडलाइनचा दबाव मॅन्युअल प्रक्रियांमध्ये चुका घडवून आणतो. तुमची डीकमिशनिंग प्रक्रिया ऑटोमेट करा. • तुम्ही फक्त सुरू करत असलेल्या गोष्टींवरच नाही, तर तुम्ही बंद करत असलेल्या गोष्टींवरही लक्ष ठेवा.

डिप्लॉयमेंट म्हणजे केवळ कोड पुश करणे नव्हे. तर प्रत्येक क्लायंट योग्य कोड चालवत आहे याची खात्री करणे होय.

स्रोत: https://dev.to/sugan_dev/how-a-cached-react-bundle-sent-production-data-to-the-wrong-database-55n9