একটি ক্যাশ করা React Bundle কীভাবে ভুল ডাটাবেসে ডেটা পাঠিয়েছিল

আমাদের একটি ডেডলাইন ছিল। ব্যাকএন্ড টিম একটি নতুন API এবং একটি নতুন ডাটাবেসে মাইগ্রেট করেছে। ফ্রন্টএন্ড টিম AWS Amplify-এ এনভায়রনমেন্ট ভেরিয়েবলগুলো আপডেট করেছে এবং কোড পুশ করেছে।

ডিপ্লয়মেন্ট সফল হয়েছিল। আমরা আমাদের ল্যাপটপ বন্ধ করে দিলাম। আমরা ভেবেছিলাম কাজ শেষ।

আমরা ভুল ছিলাম।

একজন ইঞ্জিনিয়ার পুরনো API সার্ভারের লগ চেক করেছিলেন। এই সার্ভারটি বন্ধ হয়ে যাওয়ার কথা ছিল। কিন্তু তা হয়নি। এটি আসল ক্লায়েন্ট রিকোয়েস্ট গ্রহণ করছিল এবং পুরনো ডাটাবেসে ডেটা লিখছিল।

দুই ঘণ্টা ধরে আসল ক্লায়েন্ট ডেটা ভুল জায়গায় যাচ্ছিল।

কেন এমন হলো এবং আমরা কীভাবে এটি ঠিক করলাম তা নিচে দেওয়া হলো।

সমস্যা

AWS Amplify-এর মতো CDN-এ থাকা React অ্যাপগুলো বিল্ড টাইমে এনভায়রনমেন্ট ভেরিয়েবল পরিবর্তন করে। যখন আপনি একটি বিল্ড রান করেন, বান্ডলার প্রতিটি ভেরিয়েবল খুঁজে বের করে এবং সেটিকে একটি হার্ডকোডেড স্ট্রিং দিয়ে প্রতিস্থাপন করে।

API URL টি সরাসরি JavaScript ফাইলের ভেতরে এমবেড করা ছিল।

যখন আমরা ডিপ্লয় করি, নতুন ইউজাররা নতুন বান্ডলটি পায়। কিন্তু যারা অ্যাপটি ওপেন করে রেখেছিলেন, তারা রিফ্রেশ করেননি। তারা পুরনো বান্ডলটিই ব্যবহার করতে থাকেন যার ভেতরে পুরনো URL হার্ডকোড করা ছিল।

যেহেতু পুরনো সার্ভারটি তখনও চালু ছিল, তাই এই ক্লায়েন্টরা 200 OK স্ট্যাটাস পাচ্ছিল। সবকিছু ঠিকঠাক মনে হচ্ছিল। ব্যর্থতাটি ছিল নিঃশব্দ। নিঃশব্দতা হলো সবচেয়ে বিপজ্জনক ধরনের বাগ।

তিন স্তরের সমাধান

এটি যেন আর কখনও না ঘটে তা নিশ্চিত করতে আমরা তিনটি স্তর তৈরি করেছি।

১. রানটাইম কনফিগারেশন আমরা JavaScript বান্ডলের ভেতরে URL এমবেড করা বন্ধ করে দিয়েছি। পরিবর্তে, আমরা public ফোল্ডারে একটি config.json ফাইল ব্যবহার করি। বান্ডলার এই ফাইলটি স্পর্শ করে না। অ্যাপটি রেন্ডার হওয়ার আগে রানটাইমে এই ফাইলটি ফেচ (fetch) করে। এটি নিশ্চিত করে

• ডিপ্লয়মেন্টের মাঝে যে মানগুলো পরিবর্তিত হয়, সেগুলোর জন্য বিল্ড-টাইম কনফিগারেশন একটি ফাঁদ। • নীরবতা শব্দের চেয়েও বেশি বিপজ্জনক। পুরনো সিস্টেমগুলোকে '410 Gone' স্ট্যাটাস দিয়ে স্পষ্টভাবে ফেইল (fail) করিয়ে দিন। • ডেডলাইনের চাপ ম্যানুয়াল ধাপগুলোতে ভুল ঘটাতে পারে। আপনার ডি-কমিশনিং (decommissioning) প্রক্রিয়াটি স্বয়ংক্রিয় করুন। • আপনি শুধু নতুন যা চালু করছেন তা নয়, বরং যা বন্ধ করছেন সেগুলোও মনিটর করুন।

ডিপ্লয়মেন্ট মানে কেবল কোড পুশ করা নয়। এটি নিশ্চিত করা যে প্রতিটি ক্লায়েন্ট সঠিক কোডটি চালাচ্ছে।

উৎস: https://dev.to/sugan_dev/how-a-cached-react-bundle-sent-production-data-to-the-wrong-database-55n9