ত্রুটিসিনট্যাক্স ত্রুটি: অপ্রত্যাশিত টোকেন ‘<‘ , “<!DOCTYPE”… বৈধ JSON নয় (বা “0 অবস্থানে JSON-এ অপ্রত্যাশিত টোকেন”) মানে আপনি এমন কিছু পার্স করার চেষ্টা করেছেন যা JSON নয় — সাধারণত একটি HTML ত্রুটি পৃষ্ঠা বা একটি খালি প্রতিক্রিয়া। এটি কিভাবে নির্ণয় এবং ঠিক করতে হয় তা এখানে।
📋 Table of Contents
এই ত্রুটির মানে কি
তুমি ডেকেছJSON.parse() or response.json() একটি প্রতিক্রিয়া যা বৈধ JSON নয়। “অবস্থান 0” এবং “<” ক্লুগুলি হল মূল: অবস্থান 0 মানে প্রথম অক্ষরটি ভুল, এবং “<” মানে প্রতিক্রিয়া HTML দিয়ে শুরু হয় (যেমন<!DOCTYPE html>) — আপনি JSON-এর পরিবর্তে একটি HTML ত্রুটি পৃষ্ঠা পেয়েছেন৷
কারণ 1: সার্ভার একটি HTML ত্রুটি পৃষ্ঠা ফিরিয়ে দিয়েছে
// 🐛 The API returned a 404/500 HTML page, not JSON
const response = await fetch('/api/data');
const data = await response.json(); // ❌ fails - response is HTML
// The response body is something like:
//
404 Not Found ...
// JSON.parse chokes on the '<' at position 0
// ✅ Check the response status and content type first
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const contentType = response.headers.get('content-type');
if (!contentType?.includes('application/json')) {
const text = await response.text();
throw new Error(`Expected JSON but got: ${text.slice(0, 100)}`);
}
const data = await response.json();কারণ 2: খালি রেসপন্স বডি
// 🐛 Parsing an empty response (e.g., 204 No Content)
const data = await response.json(); // ❌ fails if body is empty
// ✅ Handle empty bodies
const text = await response.text();
const data = text ? JSON.parse(text) : null;
// ✅ Or check status
if (response.status === 204) {
return null; // No Content - nothing to parse
}
const data = await response.json();কারণ 3: ভুল URL / API এন্ডপয়েন্ট
// 🐛 Wrong URL returns your app's HTML (SPA fallback) instead of API JSON
fetch('/api/users') // typo or wrong path
// If /api/users doesn't exist, the server may return index.html
// (common with SPAs) - which starts with '<' -> parse error
// ✅ Verify the URL is correct and the endpoint exists
// Check the Network tab to see what the response actually is
// Ensure API routes are registered and the path is exactকারণ 4: ডাবল-পার্সিং ইতিমধ্যে-পার্সড JSON
// 🐛 The data is already an object, but you parse it again
const data = await response.json(); // already parsed to an object
const parsed = JSON.parse(data); // ❌ parsing an object fails
// ✅ response.json() already parses - don't parse again
const data = await response.json(); // done - it's an object
// axios also auto-parses:
const { data } = await axios.get('/api'); // data is already parsedকারণ 5: ট্রেলিং অক্ষর বা অবৈধ JSON
// 🐛 The JSON has a syntax error (trailing comma, single quotes)
JSON.parse('{"name": "Alice",}'); // ❌ trailing comma
JSON.parse("{'name': 'Alice'}"); // ❌ single quotes not valid JSON
JSON.parse('{name: "Alice"}'); // ❌ unquoted key
// ✅ Valid JSON requires double quotes, no trailing commas
JSON.parse('{"name": "Alice"}'); // ✓ validদ্য রোবাস্ট ফেচ প্যাটার্ন
async function fetchJSON(url, options) {
const response = await fetch(url, options);
// Check status
if (!response.ok) {
const text = await response.text();
throw new Error(`HTTP ${response.status}: ${text.slice(0, 200)}`);
}
// Handle empty responses
const text = await response.text();
if (!text) return null;
// Parse safely with a helpful error
try {
return JSON.parse(text);
} catch (err) {
throw new Error(`Invalid JSON response: ${text.slice(0, 200)}`);
}
}
// Usage
try {
const data = await fetchJSON('/api/users');
} catch (err) {
console.error('Fetch failed:', err.message); // clear error, not cryptic
}ডিবাগিং ধাপ
// 1. Log the raw response text to see what you actually got
const response = await fetch(url);
const text = await response.text();
console.log('Raw response:', text); // reveals HTML, empty, or malformed JSON
// 2. Check the Network tab in DevTools
// - Status code (200? 404? 500?)
// - Content-Type header (application/json?)
// - Response body (is it actually JSON?)
// 3. Test the endpoint directly
curl -i https://api.example.com/data
// See the exact status, headers, and bodyপ্রায়শই জিজ্ঞাসিত প্রশ্ন
প্রশ্ন: কেন ত্রুটি “<” বা “<!DOCTYPE” উল্লেখ করে?
উত্তর: কারণ প্রতিক্রিয়া HTML দিয়ে শুরু হয়, JSON নয়। আপনি প্রত্যাশিত JSON এর পরিবর্তে একটি HTML পৃষ্ঠা (সাধারণত একটি 404 বা 500 ত্রুটির পৃষ্ঠা বা আপনার SPA এর index.html) পেয়েছেন। “<” হল HTML ট্যাগের প্রথম অক্ষর, যা JSON-এর জন্য বৈধ নয়।
প্রশ্নঃ কেন এটা মাঝে মাঝে কাজ করে কিন্তু অন্যদের না?
উত্তর: যখন সার্ভার নন-JSON ফেরত দেয় তখন এটি ব্যর্থ হয় — একটি ত্রুটি পৃষ্ঠা (404/500), একটি খালি বডি, বা HTML-এ একটি পুনঃনির্দেশ। যখন API সঠিক JSON প্রদান করে তখন এটি কাজ করে। বিরতিহীন ব্যর্থতার অর্থ প্রায়শই API কখনও কখনও ত্রুটি করে এবং HTML ত্রুটি পৃষ্ঠাগুলি ফিরিয়ে দেয়।
প্রশ্ন: আমি কিভাবে এই ত্রুটি প্রতিরোধ করতে পারি?
উত্তর: সর্বদা পরীক্ষা করুনresponse.ok এবং কল করার আগে কন্টেন্ট-টাইপresponse.json(), খালি দেহগুলি পরিচালনা করুন এবং চেষ্টা/ক্যাচের মধ্যে পার্সিং মোড়ানো। একটি শক্তিশালী আনয়ন মোড়ক ব্যবহার করুন (উপরে দেখানো হয়েছে) যা গোপনীয় “অপ্রত্যাশিত টোকেন” বার্তার পরিবর্তে স্পষ্ট ত্রুটি দেয়।
প্রশ্ন: আমি API ডেটার পরিবর্তে আমার অ্যাপের HTML পাচ্ছি। কেন?
উত্তর: আপনার API URL সম্ভবত ভুল বা শেষ পয়েন্টটি বিদ্যমান নেই, তাই সার্ভারটি আপনার SPA এর index.html (যা <!DOCTYPE দিয়ে শুরু হয়) পরিবেশন করতে ফিরে আসে। যাচাই করুন API পাথ সঠিক এবং এন্ডপয়েন্ট নিবন্ধিত। প্রকৃত প্রতিক্রিয়া দেখতে নেটওয়ার্ক ট্যাব চেক করুন।
প্রশ্ন: আমি কি response.json() বা response.text() তারপর JSON.parse() ব্যবহার করব?
A: response.json() সুবিধাজনক কিন্তু অবৈধ JSON-এ একটি ক্রিপ্টিক ত্রুটি নিক্ষেপ করে। ব্যবহার করেresponse.text() তারপরJSON.parse() একটি চেষ্টা/ক্যাচ আপনাকে অশোধিত প্রতিক্রিয়া পরিদর্শন করতে দেয় এবং JSON না হলে একটি পরিষ্কার ত্রুটি বার্তা দিতে দেয় — ডিবাগিংয়ের জন্য আরও ভাল।
উপসংহার
“সিনট্যাক্স ত্রুটি: JSON-এ অপ্রত্যাশিত টোকেন অবস্থান 0” এর অর্থ হল আপনি নন-JSON পার্স করার চেষ্টা করেছেন — প্রায় সবসময় একটি HTML ত্রুটি পৃষ্ঠা (“<” দিয়ে শুরু হয়) বা একটি খালি প্রতিক্রিয়া। সমাধান:চেকresponse.ok এবং কন্টেন্ট-টাইপ হেডার পার্স করার আগে, খালি বডিগুলি হ্যান্ডেল করুন এবং JSON.parse ট্রাই/ক্যাচ এ মোড়ানো করুন. “<” ক্লু আপনাকে বলে যে প্রতিক্রিয়াটি হল HTML, তাই কেন অনুসন্ধান করুন — সাধারণত একটি ভুল URL, একটি সার্ভার ত্রুটি একটি HTML ত্রুটি পৃষ্ঠা ফেরত দেয়, বা একটি SPA ফলব্যাক৷ একটি শক্তিশালী ফেচ র্যাপার ব্যবহার করুন যা কাঁচা প্রতিক্রিয়া লগ করে এবং স্পষ্ট ত্রুটি দেয়। একবার আপনি এটি পার্স করার আগে প্রতিক্রিয়াটি পরীক্ষা করে নিলে, এই গোপনীয় ত্রুটিটি একটি তথ্যপূর্ণ হয়ে ওঠে যা আপনাকে সরাসরি আসল সমস্যার দিকে নির্দেশ করে।
🔗 Share this article
✍️ Leave a Comment