জাভাস্ক্রিপ্টে প্রতিশ্রুতি ত্রুটির মধ্যে ধরা পড়া কীভাবে ঠিক করবেন

ত্রুটিধরা পড়েনি (প্রতিশ্রুতিতে) আপনার ব্রাউজার কনসোলে মানে একটি প্রতিশ্রুতি প্রত্যাখ্যান করা হয়েছে কিন্তু কিছুই প্রত্যাখ্যান পরিচালনা করেনি। এটি প্রায়শই একটি প্রকৃত ত্রুটি বার্তার সাথে প্রদর্শিত হয় এবং আন-হ্যান্ডেলড অ্যাসিঙ্ক ব্যর্থতার দিকে নির্দেশ করে। এখানে প্রতিটি বৈকল্পিক ঠিক কিভাবে.

এই ত্রুটির মানে কি

যখন একটি প্রতিশ্রুতি প্রত্যাখ্যান করে (ব্যর্থ হয়), আপনাকে অবশ্যই এটিকে.catch()দিয়ে পরিচালনা করতে হবে অথবা একটি চেষ্টা/ক্যাচ (অসিঙ্ক/অপেক্ষা সহ)। যদি আপনি না করেন, জাভাস্ক্রিপ্ট রিপোর্ট করে “অপরাধিত (প্রতিশ্রুতিতে)” – একটি অ্যাসিঙ্ক ত্রুটি কোনও হ্যান্ডলার ছাড়াই স্লিপ হয়ে গেছে৷ সিঙ্ক্রোনাস ত্রুটির বিপরীতে, অনির্বাচিত প্রতিশ্রুতি প্রত্যাখ্যান পৃষ্ঠাটি ক্র্যাশ করে না তবে একটি বাগ সংকেত দেয়।

কারণ 1: একটি প্রতিশ্রুতি চেইনে .catch() অনুপস্থিত

// 🐛 No .catch() — if fetch fails, rejection is unhandled
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));
  // Missing .catch() → "Uncaught (in promise)" if it fails

// ✅ Always add .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

কারণ 2: চেষ্টা/ক্যাচ ছাড়াই অ্যাসিঙ্ক/অপেক্ষা করুন

// 🐛 await can reject, and there's no try/catch
async function loadData() {
  const res = await fetch('/api/data');   // rejects if network fails
  const data = await res.json();
  return data;
}
loadData();   // "Uncaught (in promise)" if fetch rejects

// ✅ Wrap in try/catch
async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('Load failed:', err);
    return null;
  }
}

কারণ 3: একটি অ্যাসিঙ্ক ফাংশনকে এর প্রত্যাখ্যান পরিচালনা না করে কল করা

// 🐛 async function rejects, caller doesn't handle it
async function saveData() {
  throw new Error('Save failed');
}

saveData();   // "Uncaught (in promise): Error: Save failed"

// ✅ Handle at the call site
saveData().catch(err => console.error(err));

// ✅ Or in an async context
async function main() {
  try {
    await saveData();
  } catch (err) {
    console.error(err);
  }
}

কারণ 4: ফিরে যেতে ভুলে যাওয়া/একটি চেইনে অপেক্ষা করা

// 🐛 Nested promise not returned — its rejection escapes the chain
function process() {
  return fetch('/api/step1')
    .then(res => {
      fetch('/api/step2');   // ❌ not returned — rejection unhandled
    });
}

// ✅ Return the inner promise so the chain handles it
function process() {
  return fetch('/api/step1')
    .then(res => {
      return fetch('/api/step2');   // returned — chain catches its errors
    })
    .catch(err => console.error(err));
}

কারণ 5: অ্যাসিঙ্ক কলব্যাক সহ ইভেন্ট হ্যান্ডলার গ্লোবাল হ্যান্ডলার (সেফটি নেট)

// 🐛 async event handler with no error handling
button.addEventListener('click', async () => {
  const data = await fetchData();   // if this rejects, unhandled
  render(data);
});

// ✅ Handle errors inside the async handler
button.addEventListener('click', async () => {
  try {
    const data = await fetchData();
    render(data);
  } catch (err) {
    showError('Could not load data');
    console.error(err);
  }
});

প্রতিশ্রুতি সব এবং ত্রুটি পরিচালনা

// Catch any unhandled rejections globally (last resort, not a fix)
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();   // prevents the default console error
  // Log to your error tracking service
  reportError(event.reason);
});

// In Node.js:
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection:', reason);
  // In production, log and possibly exit gracefully
});

প্রায়শই জিজ্ঞাসিত প্রশ্ন

// 🐛 Promise.all rejects if ANY promise rejects — needs a catch
const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
// If fetchB rejects, the whole thing rejects — handle it

// ✅ With try/catch
try {
  const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
} catch (err) {
  console.error('One of the requests failed:', err);
}

// ✅ Or use allSettled to get all results regardless of failures
const results = await Promise.allSettled([fetchA(), fetchB(), fetchC()]);
results.forEach(r => {
  if (r.status === 'fulfilled') use(r.value);
  else console.error('Failed:', r.reason);
});

প্রশ্ন: একটি আন-হ্যান্ডেল প্রত্যাখ্যান কি আমার অ্যাপ ক্র্যাশ করে?

উত্তর: ব্রাউজারে, না — পৃষ্ঠাটি চলতে থাকে, কিন্তু আপনি কনসোল ত্রুটি পান এবং ব্যর্থ অপারেশনটি নীরবে সম্পূর্ণ হয়নি৷ Node.js-এ, নিয়ন্ত্রণহীন প্রত্যাখ্যান প্রক্রিয়াটি ক্র্যাশ করতে পারে (আধুনিক সংস্করণে)। যেভাবেই হোক, এটি ঠিক করার জন্য একটি বাগ, উপেক্ষা নয়।
প্রশ্নঃ আমি .catch() ঠিক কোথায় রাখব?

উত্তর: প্রতিশ্রুতি শৃঙ্খলের শেষে, তাই এটি যে কোনও পূর্ববর্তী পদক্ষেপ থেকে ত্রুটিগুলি ধরে। অ্যাসিঙ্ক/অপেক্ষা করে, প্রতীক্ষিত কলগুলিকে চেষ্টা/ক্যাচের মধ্যে মোড়ানো। মূল বিষয় হল প্রতিটি async অপারেশনের কোথাও একটি হ্যান্ডলার থাকে।
প্রশ্ন: গ্লোবাল আন-হ্যান্ডেলড রিজেকশন হ্যান্ডলার কি একটি সঠিক সমাধান?

উত্তর: না — এটি লগিং করার জন্য একটি নিরাপত্তা জাল, যেখানে ত্রুটি দেখা দেয় তা পরিচালনার বিকল্প নয়। আপনি যা কিছু মিস করেছেন তা ধরতে এবং রিপোর্ট করতে এটি ব্যবহার করুন, তবে তাদের উত্সে প্রকৃত আন-হ্যান্ডেল প্রত্যাখ্যানগুলি ঠিক করুন।
প্রশ্নঃ কেন এটা মাঝে মাঝে কাজ করে কিন্তু অন্যদের না?

উত্তর: প্রত্যাখ্যান তখনই ঘটে যখন প্রতিশ্রুতি বাস্তবে ব্যর্থ হয় (নেটওয়ার্ক ত্রুটি, HTTP ত্রুটি, নিক্ষেপ করা ব্যতিক্রম)। এটি কাজ করে যখন সবকিছু সফল হয় এবং কিছু ব্যর্থ হলেই ত্রুটি হয় — ঠিক তখনই যখন আপনার অনুপস্থিত ত্রুটি পরিচালনার প্রয়োজন হয়।
প্রশ্ন: আমি কি .catch() ব্যবহার করব নাকি চেষ্টা/ক্যাচ ব্যবহার করব?

A: async/await এর সাথে try/catch ব্যবহার করুন (ক্লিনার, টপ-টু-বটম পড়ে)। প্রতিশ্রুতি চেইন (. তারপর) সহ .catch() ব্যবহার করুন। উভয়ই প্রত্যাখ্যান পরিচালনা করে — আপনি কোন স্টাইল ব্যবহার করছেন তার উপর ভিত্তি করে বেছে নিন। একই ফাংশনে তাদের বিশ্রীভাবে মিশ্রিত করবেন না।
উপসংহার

“Uncaught (প্রতিশ্রুতিতে)” মানে কোনো ত্রুটি হ্যান্ডলার ছাড়াই একটি async অপারেশন ব্যর্থ হয়েছে৷ ফিক্স সবসময় প্রত্যাখ্যান পরিচালনা করতে হয়:

যোগ করুন প্রতিশ্রুতি শিকল, মোড়ানো.catch() অ্যাসিঙ্ক ফাংশনের কল সাইটে কল করার চেষ্টা করুন/ক্যাচ করুন এবং প্রত্যাখ্যানগুলি পরিচালনা করুনawait. একটি বিশ্বব্যাপী যোগ করুন একটি লগিং নিরাপত্তা জাল হিসাবে হ্যান্ডলার, কিন্তু তাদের উৎস থেকে প্রকৃত আন-হ্যান্ডেল প্রত্যাখ্যান ঠিক করুন। আপনার কোডের প্রতিটি অ্যাসিঙ্ক অপারেশনের কোথাও ত্রুটি হ্যান্ডলিং হওয়া উচিত — এটি এই ত্রুটিগুলি দূর করার এবং শক্তিশালী অ্যাপ্লিকেশন তৈরি করার নির্ভরযোগ্য উপায়।unhandledrejection একটি লগিং নিরাপত্তা জাল হিসাবে হ্যান্ডলার, কিন্তু তাদের উৎস থেকে প্রকৃত আন-হ্যান্ডেল প্রত্যাখ্যান ঠিক করুন। আপনার কোডের প্রতিটি অ্যাসিঙ্ক অপারেশনের কোথাও ত্রুটি হ্যান্ডলিং হওয়া উচিত — এটি এই ত্রুটিগুলি দূর করার এবং শক্তিশালী অ্যাপ্লিকেশন তৈরি করার নির্ভরযোগ্য উপায়।