Fetch API ব্যবহার করার সময় ত্রুটি হ্যান্ডলিং প্রয়োগ করুন

Umar Hansa

Fetch API এর সাথে কাজ করার সময় এই নিবন্ধটি কিছু ত্রুটি পরিচালনার পদ্ধতি প্রদর্শন করে। ফেচ API আপনাকে একটি দূরবর্তী নেটওয়ার্ক সংস্থানে একটি অনুরোধ করতে দেয়৷ আপনি যখন একটি দূরবর্তী নেটওয়ার্ক কল করেন, তখন আপনার ওয়েব পৃষ্ঠাটি বিভিন্ন সম্ভাব্য নেটওয়ার্ক ত্রুটির বিষয় হয়ে ওঠে।

নিম্নলিখিত বিভাগগুলি সম্ভাব্য ত্রুটিগুলি বর্ণনা করে এবং বর্ণনা করে যে কীভাবে কোড লিখতে হয় যা একটি বুদ্ধিমান স্তরের কার্যকারিতা প্রদান করে যা ত্রুটি এবং অপ্রত্যাশিত নেটওয়ার্ক অবস্থার জন্য স্থিতিস্থাপক। স্থিতিস্থাপক কোড আপনার ব্যবহারকারীদের খুশি রাখে এবং আপনার ওয়েবসাইটের জন্য একটি মানক স্তরের পরিষেবা বজায় রাখে।

সম্ভাব্য নেটওয়ার্ক ত্রুটিগুলি অনুমান করুন৷

এই বিভাগটি এমন একটি দৃশ্যের বর্ণনা করে যেখানে ব্যবহারকারী "My Travels.mp4" নামে একটি নতুন ভিডিও তৈরি করে এবং তারপর ভিডিওটি একটি ভিডিও শেয়ারিং ওয়েবসাইটে আপলোড করার চেষ্টা করে৷

Fetch এর সাথে কাজ করার সময়, ব্যবহারকারী সফলভাবে ভিডিও আপলোড করার জন্য সুখী পথ বিবেচনা করা সহজ। যাইহোক, আরও কিছু পথ আছে যেগুলো মসৃণ নয়, কিন্তু যার জন্য ওয়েব ডেভেলপারদের অবশ্যই পরিকল্পনা করতে হবে। এই ধরনের (অসুখী) পথ ব্যবহারকারীর ত্রুটির কারণে, অপ্রত্যাশিত পরিবেশগত অবস্থার কারণে বা ভিডিও-শেয়ারিং ওয়েবসাইটে একটি বাগের কারণে ঘটতে পারে।

ব্যবহারকারীর ত্রুটির উদাহরণ

• ব্যবহারকারী একটি ভিডিও ফাইলের পরিবর্তে একটি চিত্র ফাইল (যেমন JPEG) আপলোড করে।
• ব্যবহারকারী ভুল ভিডিও ফাইল আপলোড করা শুরু করে। তারপর, আপলোডের মাধ্যমে আংশিকভাবে, ব্যবহারকারী আপলোডের জন্য সঠিক ভিডিও ফাইলটি নির্দিষ্ট করে।
• ভিডিও আপলোড করার সময় ব্যবহারকারী ভুলবশত "আপলোড বাতিল করুন" এ ক্লিক করেন।

পরিবেশগত পরিবর্তনের উদাহরণ

• ভিডিও আপলোড করার সময় ইন্টারনেট সংযোগ অফলাইনে চলে যায়৷
• ভিডিও আপলোড করার সময় ব্রাউজার রিস্টার্ট হয়।
• ভিডিও আপলোড করার সময় ভিডিও-শেয়ারিং ওয়েবসাইটের সার্ভারগুলি পুনরায় চালু হয়৷

ভিডিও শেয়ারিং ওয়েবসাইটের ত্রুটির উদাহরণ

• ভিডিও-শেয়ারিং ওয়েবসাইট একটি স্থান সহ একটি ফাইলের নাম পরিচালনা করতে পারে না৷ "My Travels.mp4" এর পরিবর্তে, এটি "My_Travels.mp4" বা "MyTravels.mp4" এর মতো একটি নাম আশা করে।
• ভিডিও-শেয়ারিং ওয়েবসাইট একটি ভিডিও আপলোড করতে পারে না যা সর্বাধিক গ্রহণযোগ্য ফাইলের আকার অতিক্রম করে।
• ভিডিও-শেয়ারিং ওয়েবসাইট আপলোড করা ভিডিওতে ভিডিও কোডেক সমর্থন করে না।

এই উদাহরণ বাস্তব জগতে ঘটতে পারে এবং ঘটতে পারে। আপনি অতীতে এই ধরনের উদাহরণ সম্মুখীন হতে পারে! আসুন আগের প্রতিটি বিভাগ থেকে একটি উদাহরণ বাছাই করা যাক এবং নিম্নলিখিত বিষয়গুলি নিয়ে আলোচনা করা যাক:

• যদি ভিডিও-শেয়ারিং পরিষেবা প্রদত্ত উদাহরণটি পরিচালনা করতে না পারে তবে ডিফল্ট আচরণ কী?
• ব্যবহারকারী উদাহরণে কি ঘটতে আশা করে?
• আমরা কিভাবে প্রক্রিয়া উন্নত করতে পারি?

অ্যাকশন	ব্যবহারকারী ভুল ভিডিও ফাইল আপলোড করা শুরু করে। তারপর, আপলোডের মাধ্যমে আংশিকভাবে, ব্যবহারকারী আপলোডের জন্য সঠিক ভিডিও ফাইলটি নির্দিষ্ট করে।
ডিফল্টরূপে কি হয়	আসল ফাইলটি পটভূমিতে আপলোড হতে থাকে যখন নতুন ফাইল একই সময়ে আপলোড হয়।
ব্যবহারকারী কি আশা করে	ব্যবহারকারী আশা করেন আসল আপলোড বন্ধ হয়ে যাবে যাতে অতিরিক্ত ইন্টারনেট ব্যান্ডউইথ নষ্ট না হয়।
কি উন্নতি করা যায়	নতুন ফাইল আপলোড শুরু হওয়ার আগে JavaScript আসল ফাইলের জন্য আনার অনুরোধ বাতিল করে।

অ্যাকশন	ভিডিও আপলোড করার মাধ্যমে ব্যবহারকারী তাদের ইন্টারনেট সংযোগ হারিয়ে ফেলেন।
ডিফল্টরূপে কি হয়	আপলোড অগ্রগতি বার 50% এ আটকে আছে বলে মনে হচ্ছে। অবশেষে, Fetch API একটি সময়সীমার অভিজ্ঞতা লাভ করে এবং আপলোড করা ডেটা বাতিল করা হয়। যখন ইন্টারনেট সংযোগ ফিরে আসে, ব্যবহারকারীকে তাদের ফাইল পুনরায় আপলোড করতে হবে।
ব্যবহারকারী কি আশা করে	ব্যবহারকারী যখন তাদের ফাইল আপলোড করা যাবে না তখন অবহিত করা হবে বলে আশা করে, এবং তারা আশা করে যে তারা অনলাইনে ফিরে আসার পর তাদের আপলোড স্বয়ংক্রিয়ভাবে 50% এ পুনরায় শুরু হবে।
কি উন্নতি করা যায়	আপলোড পৃষ্ঠাটি ব্যবহারকারীকে ইন্টারনেট সংযোগের সমস্যা সম্পর্কে অবহিত করে এবং ব্যবহারকারীকে আশ্বস্ত করে যে ইন্টারনেট সংযোগ পুনরায় শুরু হলে আপলোড পুনরায় শুরু হবে।

অ্যাকশন	ভিডিও-শেয়ারিং ওয়েবসাইট একটি স্থান সহ একটি ফাইলের নাম পরিচালনা করতে পারে না৷ "My Travels.mp4" এর পরিবর্তে এটি "My_Travels.mp4" বা "MyTravels.mp4" এর মতো নাম আশা করে।
ডিফল্টরূপে কি হয়	ব্যবহারকারীকে আপলোড সম্পূর্ণভাবে শেষ হওয়ার জন্য অপেক্ষা করতে হবে। একবার ফাইলটি আপলোড হয়ে গেলে, এবং অগ্রগতি বারটি "100%" পড়ে, অগ্রগতি বারটি বার্তাটি প্রদর্শন করে: "অনুগ্রহ করে আবার চেষ্টা করুন।"
ব্যবহারকারী কি আশা করে	ব্যবহারকারী আশা করেন আপলোড শুরু হওয়ার আগে বা অন্ততপক্ষে আপলোড করার প্রথম সেকেন্ডের মধ্যে ফাইলের নাম সীমাবদ্ধতা সম্পর্কে বলা হবে।
কি উন্নতি করা যায়	আদর্শভাবে, ভিডিও-শেয়ারিং পরিষেবা স্পেস সহ ফাইলের নাম সমর্থন করে। বিকল্প বিকল্পগুলি হল আপলোড শুরু করার আগে ফাইলের নাম সীমাবদ্ধতার ব্যবহারকারীকে অবহিত করা। অথবা, ভিডিও-শেয়ারিং পরিষেবা একটি বিস্তারিত ত্রুটি বার্তা সহ আপলোড প্রত্যাখ্যান করা উচিত।

ফেচ এপিআই দিয়ে ত্রুটিগুলি পরিচালনা করুন

মনে রাখবেন যে নিম্নলিখিত কোড উদাহরণগুলি উচ্চ-স্তরের await ( ব্রাউজার সমর্থন ) ব্যবহার করে কারণ এই বৈশিষ্ট্যটি আপনার কোডকে সহজ করতে পারে৷

যখন ফেচ এপিআই ত্রুটি নিক্ষেপ করে

এই উদাহরণটি try ব্লকের মধ্যে নিক্ষিপ্ত কোনো ত্রুটি ধরার জন্য একটি try / catch ব্লক বিবৃতি ব্যবহার করে। উদাহরণস্বরূপ, যদি ফেচ এপিআই নির্দিষ্ট সংস্থান আনতে না পারে, তাহলে একটি ত্রুটি নিক্ষেপ করা হয়। এই ধরনের একটি catch ব্লকের মধ্যে, একটি অর্থপূর্ণ ব্যবহারকারীর অভিজ্ঞতা প্রদানের যত্ন নিন। যদি একটি স্পিনার, একটি সাধারণ ব্যবহারকারী ইন্টারফেস যা কিছু ধরণের অগ্রগতির প্রতিনিধিত্ব করে, ব্যবহারকারীকে দেখানো হয়, তাহলে আপনি একটি catch ব্লকের মধ্যে নিম্নলিখিত পদক্ষেপগুলি নিতে পারেন:

1. পৃষ্ঠা থেকে স্পিনার সরান.
2. সহায়ক বার্তা প্রদান করুন যা ব্যাখ্যা করে যে কী ভুল হয়েছে এবং ব্যবহারকারী কী বিকল্পগুলি নিতে পারেন৷
3. উপলব্ধ বিকল্পগুলির উপর ভিত্তি করে, ব্যবহারকারীকে একটি "আবার চেষ্টা করুন" বোতামটি উপস্থাপন করুন৷
4. পর্দার আড়ালে, ত্রুটির বিশদ বিবরণ আপনার ত্রুটি-ট্র্যাকিং পরিষেবাতে বা ব্যাক-এন্ডে পাঠান। এই ক্রিয়াটি ত্রুটিটি লগ করে যাতে এটি পরবর্তী পর্যায়ে নির্ণয় করা যায়।

try {
  const response = await fetch('https://website');
} catch (error) {
  // TypeError: Failed to fetch
  console.log('There was an error', error);
}

পরবর্তী পর্যায়ে, আপনি যে ত্রুটিটি লগ করেছেন তা নির্ণয় করার সময়, আপনার ব্যবহারকারীরা কিছু ভুল আছে তা সচেতন হওয়ার আগে আপনি এই জাতীয় ত্রুটি ধরার জন্য একটি পরীক্ষামূলক কেস লিখতে পারেন। ত্রুটির উপর নির্ভর করে, পরীক্ষাটি একটি ইউনিট, একীকরণ বা গ্রহণযোগ্যতা পরীক্ষা হতে পারে।

যখন নেটওয়ার্ক স্ট্যাটাস কোড একটি ত্রুটি উপস্থাপন করে

এই কোড উদাহরণটি একটি HTTP টেস্টিং পরিষেবার কাছে একটি অনুরোধ করে যা সর্বদা HTTP স্ট্যাটাস কোড 429 Too Many Requests সাথে সাড়া দেয়। মজার ব্যাপার হল, সাড়া catch ব্লকে পৌঁছায় না। একটি 404 স্ট্যাটাস, নির্দিষ্ট অন্যান্য স্ট্যাটাস কোডগুলির মধ্যে, একটি নেটওয়ার্ক ত্রুটি ফেরত দেয় না বরং স্বাভাবিকভাবে সমাধান করে।

HTTP স্ট্যাটাস কোড সফল হয়েছে কিনা তা পরীক্ষা করতে, আপনি নিম্নলিখিত বিকল্পগুলির যে কোনো একটি ব্যবহার করতে পারেন:

• স্ট্যাটাস কোড 200 থেকে 299 এর মধ্যে ছিল কিনা তা নির্ধারণ করতে Response.ok প্রপার্টি ব্যবহার করুন।
• প্রতিক্রিয়া সফল হয়েছে কিনা তা নির্ধারণ করতে Response.status বৈশিষ্ট্য ব্যবহার করুন।
• অন্য কোনো মেটাডেটা ব্যবহার করুন, যেমন Response.headers , প্রতিক্রিয়া সফল হয়েছে কিনা তা মূল্যায়ন করতে।

let response;

try {
  response = await fetch('https://httpbin.org/status/429');
} catch (error) {
  console.log('There was an error', error);
}

// Uses the 'optional chaining' operator
if (response?.ok) {
  console.log('Use the response here!');
} else {
  console.log(`HTTP Response Code: ${response?.status}`)
}

সম্ভাব্য HTTP প্রতিক্রিয়া স্ট্যাটাস কোডগুলি বোঝার জন্য আপনার সংস্থা এবং দলের লোকেদের সাথে কাজ করা সর্বোত্তম অনুশীলন। ব্যাকএন্ড ডেভেলপার, ডেভেলপার অপারেশন, এবং সার্ভিস ইঞ্জিনিয়াররা কখনও কখনও সম্ভাব্য প্রান্তের ক্ষেত্রে অনন্য অন্তর্দৃষ্টি প্রদান করতে পারে যা আপনি অনুমান করতে পারেন না।

দ্রষ্টব্য: লেখকের দ্রষ্টব্য: আমি সম্প্রতি একটি ওয়েবসাইটে একটি অসীম স্ক্রলিং তালিকার মাধ্যমে স্ক্রোল করছিলাম, দ্রুত নীচে পৌঁছানোর চেষ্টা করছিলাম। অবশেষে, পৃষ্ঠাটি কোনও সহায়ক বার্তা ছাড়াই ভেঙে গেছে বলে মনে হচ্ছে। DevTools-এর মাধ্যমে নেটওয়ার্ক অনুরোধ পরিদর্শন করার পরে, এটি স্পষ্ট হয়ে গেছে যে HTTP স্ট্যাটাস কোড ত্রুটি 429 Too Many Requests ফেরত দেওয়া হয়েছে। একটি আদর্শ পরিস্থিতিতে, এই ধরনের অভ্যন্তরীণ ত্রুটিগুলি ওয়েব পৃষ্ঠা ইন্টারফেসে প্রদর্শিত হয়।

নেটওয়ার্ক প্রতিক্রিয়া পার্সিং একটি ত্রুটি আছে

এই কোড উদাহরণটি অন্য ধরনের ত্রুটি প্রদর্শন করে যা প্রতিক্রিয়া বডি পার্স করার সাথে দেখা দিতে পারে। Response ইন্টারফেস বিভিন্ন ধরনের ডেটা পার্স করার জন্য সুবিধাজনক পদ্ধতি অফার করে, যেমন টেক্সট বা JSON। নিম্নলিখিত কোডে, একটি HTTP টেস্টিং পরিষেবাতে একটি নেটওয়ার্ক অনুরোধ করা হয়েছে যা প্রতিক্রিয়া বডি হিসাবে একটি HTML স্ট্রিং প্রদান করে। যাইহোক, একটি ত্রুটি নিক্ষেপ, JSON হিসাবে প্রতিক্রিয়া বডি পার্স করার চেষ্টা করা হয়েছে।

let json;

try {
  const response = await fetch('https://httpbin.org/html');
  json = await response.json();
} catch (error) {
  if (error instanceof SyntaxError) {
    // Unexpected token < in JSON
    console.log('There was a SyntaxError', error);
  } else {
    console.log('There was an error', error);
  }
}

if (json) {
  console.log('Use the JSON here!', json);
}

আপনাকে অবশ্যই আপনার কোড প্রস্তুত করতে হবে বিভিন্ন ধরনের প্রতিক্রিয়া ফর্ম্যাটে নেওয়ার জন্য, এবং যাচাই করতে হবে যে একটি অপ্রত্যাশিত প্রতিক্রিয়া ব্যবহারকারীর জন্য ওয়েব পৃষ্ঠাটি ভাঙবে না।

নিম্নলিখিত পরিস্থিতি বিবেচনা করুন: আপনার কাছে একটি দূরবর্তী সংস্থান রয়েছে যা একটি বৈধ JSON প্রতিক্রিয়া প্রদান করে এবং এটি Response.json() পদ্ধতির সাথে সফলভাবে পার্স করা হয়েছে৷ এটা ঘটতে পারে যে পরিষেবা বন্ধ হয়ে যায়। একবার ডাউন, একটি 500 Internal Server Error ফিরে আসে। JSON-এর পার্সিংয়ের সময় যথাযথ ত্রুটি-হ্যান্ডলিং কৌশলগুলি ব্যবহার না করা হলে, এটি ব্যবহারকারীর জন্য পৃষ্ঠাটি ভেঙে দিতে পারে কারণ একটি আন-হ্যান্ডেল করা ত্রুটি থ্রো করা হয়।

যখন নেটওয়ার্ক অনুরোধ সম্পূর্ণ হওয়ার আগে অবশ্যই বাতিল করতে হবে

এই কোডের উদাহরণ একটি ইন-ফ্লাইট অনুরোধ বাতিল করতে একটি AbortController ব্যবহার করে। একটি ইন-ফ্লাইট অনুরোধ একটি নেটওয়ার্ক অনুরোধ যা শুরু হয়েছে কিন্তু সম্পূর্ণ হয়নি।

যে পরিস্থিতিতে আপনাকে একটি ইন-ফ্লাইট অনুরোধ বাতিল করতে হতে পারে তা পরিবর্তিত হতে পারে, তবে এটি শেষ পর্যন্ত আপনার ব্যবহারের ক্ষেত্রে এবং পরিবেশের উপর নির্ভর করে। নিম্নলিখিত কোডটি দেখায় কিভাবে একটি AbortSignal ফেচ এপিআইতে পাস করতে হয়। AbortSignal একটি AbortController এর সাথে সংযুক্ত থাকে এবং AbortController একটি abort() পদ্ধতি অন্তর্ভুক্ত করে, যা ব্রাউজারকে নির্দেশ করে যে নেটওয়ার্ক অনুরোধটি বাতিল করা উচিত।

const controller = new AbortController();
const signal = controller.signal;

// Cancel the fetch request in 500ms
setTimeout(() => controller.abort(), 500);

try {
  const url = 'https://httpbin.org/delay/1';
  const response = await fetch(url, { signal });
  console.log(response);
} catch (error) {
  // DOMException: The user aborted a request.
  console.log('Error: ', error)
}

উপসংহার

ত্রুটিগুলি পরিচালনা করার একটি গুরুত্বপূর্ণ দিক হল বিভিন্ন অংশগুলিকে সংজ্ঞায়িত করা যা ভুল হতে পারে। প্রতিটি দৃশ্যের জন্য, নিশ্চিত করুন যে ব্যবহারকারীর জন্য আপনার উপযুক্ত ফলব্যাক রয়েছে। একটি আনার অনুরোধের বিষয়ে, নিজেকে প্রশ্ন করুন যেমন:

• টার্গেট সার্ভার ডাউন হলে কি হবে?
• ফেচ একটি অপ্রত্যাশিত প্রতিক্রিয়া প্রাপ্ত হলে কি হবে?
• ব্যবহারকারীর ইন্টারনেট সংযোগ ব্যর্থ হলে কি হবে?

আপনার ওয়েব পৃষ্ঠার জটিলতার উপর নির্ভর করে, আপনি একটি ফ্লোচার্টও স্কেচ করতে পারেন যা বিভিন্ন পরিস্থিতিতে কার্যকারিতা এবং ব্যবহারকারীর ইন্টারফেস বর্ণনা করে।