ایک کیش شدہ React Bundle نے غلط ڈیٹا بیس میں ڈیٹا کیسے بھیجا
ہمیں ایک ڈیڈ لائن کا سامنا تھا۔ بیک اینڈ ٹیم نے ایک نئے API اور نئے ڈیٹا بیس پر منتقلی کی۔ فرنٹ اینڈ ٹیم نے AWS Amplify میں انوائرمنٹ ویری ایبلز کو اپ ڈیٹ کیا اور کوڈ پش کر دیا۔
ڈیپلائمنٹ کامیاب رہی۔ ہم نے اپنے لیپ ٹاپ بند کر دیے۔ ہمیں لگا کہ کام مکمل ہو گیا ہے۔
ہم غلط تھے۔
ایک انجینئر نے پرانے API سرور کے لاگز چیک کیے۔ اس سرور کو بند ہونا چاہیے تھا۔ لیکن ایسا نہیں تھا۔ یہ اصل کلائنٹ کی درخواستیں وصول کر رہا تھا اور پرانے ڈیٹا بیس میں ڈیٹا لکھ رہا تھا۔
دو گھنٹوں تک، اصل کلائنٹ کا ڈیٹا غلط جگہ جاتا رہا۔
یہاں بتایا گیا ہے کہ ایسا کیوں ہوا اور ہم نے اسے کیسے ٹھیک کیا۔
مسئلہ
AWS Amplify جیسے CDNs پر React ایپس بلڈ ٹائم پر انوائرمنٹ ویری ایبلز کو تبدیل کر دیتی ہیں۔ جب آپ بلڈ چلاتے ہیں، تو بنڈلر ہر ویری ایبل کو تلاش کرتا ہے اور اسے ایک ہارڈ کوڈڈ اسٹرنگ سے بدل دیتا ہے۔
API URL جسمانی طور پر JavaScript فائل میں شامل تھا۔
جب ہم نے ڈیپلائ کیا، تو نئے صارفین کو نیا بنڈل ملا۔ لیکن وہ صارفین جن کے پاس ایپ پہلے سے کھلی ہوئی تھی، انہوں نے اسے ریفریش نہیں کیا۔ وہ پرانے بنڈل کو ہی چلا رہے تھے جس کے اندر پرانا URL ہارڈ کوڈڈ تھا۔
چونکہ پرانا سرور اب بھی چل رہا تھا، اس لیے ان کلائنٹس کو 200 OK اسٹیٹس موصول ہوا۔ سب کچھ ٹھیک لگ رہا تھا۔ یہ ناکامی خاموشی سے ہوئی تھی۔ خاموشی بگ کی سب سے خطرناک قسم ہے۔
تین تہوں والا حل
ہم نے یہ یقینی بنانے کے لیے تین تہیں بنائیں کہ ایسا دوبارہ کبھی نہ ہو۔
1. رن ٹائم کنفیگریشن ہم نے JavaScript بنڈل میں URL شامل کرنا بند کر دیا۔ اس کے بجائے، ہم public فولڈر میں ایک config.json فائل استعمال کرتے ہیں۔ بنڈلر اس فائل کو نہیں چھیڑتا۔ ایپ رینڈر ہونے سے پہلے رن ٹائم پر اس فائل کو حاصل کرتی ہے۔ اس سے یہ یقینی بنتا ہے کہ نئے سیشنز کو ہمیشہ درست URL ملے۔
2. WebSocket نوٹیفیکیشنز رن ٹائم کنفیگریشن ان صارفین کے لیے مددگار نہیں ہے جن کا ٹیب کھلا ہوا ہے۔ ہم نے اپنے ڈیپلائمنٹ کے عمل کو اپنے WebSocket سرور سے جوڑ دیا۔ جب Amplify بلڈ مکمل کرتا ہے، تو یہ ہمارے API پر ایک ویب ہک کال کرتا ہے۔ پھر سرور تمام منسلک کلائنٹس کو ایک پیغام بھیجتا ہے۔ اگر کوئی صارف پرانے ورژن پر ہے، تو ایک بینر ظاہر ہوتا ہے جو انہیں ریفریش کرنے کا کہتا ہے۔
3. کیش مینجمنٹ ہم نے اپنی 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