त्रुटिसिंटेक्सत्रुटि: अनपेक्षित टोकन ‘<‘ , “<!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: ग़लत यूआरएल/एपीआई समापन बिंदु
// 🐛 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 पर रीडायरेक्ट। यह तब काम करता है जब एपीआई उचित JSON लौटाता है। रुक-रुक कर विफलता का मतलब अक्सर होता है कि एपीआई कभी-कभी त्रुटिपूर्ण हो जाता है और HTML त्रुटि पृष्ठ लौटाता है।
प्रश्न: मैं इस त्रुटि को कैसे रोकूँ?
उत्तर: हमेशा जांचेंresponse.ok और कॉल करने से पहले सामग्री-प्रकारresponse.json(), खाली निकायों को संभालें, और पार्सिंग को प्रयास/पकड़ में लपेटें। एक मजबूत फ़ेच रैपर (ऊपर दिखाया गया) का उपयोग करें जो गुप्त “अप्रत्याशित टोकन” संदेश के बजाय स्पष्ट त्रुटियाँ देता है।
प्रश्न: मुझे एपीआई डेटा के बजाय अपने ऐप का HTML मिल रहा है। क्यों?
उ: आपका एपीआई यूआरएल गलत होने की संभावना है या एंडपॉइंट मौजूद नहीं है, इसलिए सर्वर आपके एसपीए के इंडेक्स.एचटीएमएल (जो <!DOCTYPE से शुरू होता है) की सेवा पर वापस आ जाता है। सत्यापित करें कि एपीआई पथ सही है और समापन बिंदु पंजीकृत है। वास्तविक प्रतिक्रिया देखने के लिए नेटवर्क टैब जांचें।
प्रश्न: क्या मुझे प्रतिक्रिया.json() या प्रतिक्रिया.text() के बाद JSON.parse() का उपयोग करना चाहिए?
A: response.json() सुविधाजनक है लेकिन अमान्य JSON पर एक गुप्त त्रुटि उत्पन्न करता है।response.text()का उपयोग करना फिरJSON.parse() ट्राई/कैच में आपको मूल प्रतिक्रिया का निरीक्षण करने और JSON न होने पर स्पष्ट त्रुटि संदेश देने की सुविधा मिलती है – जो डिबगिंग के लिए बेहतर है।
निष्कर्ष
“सिंटैक्स त्रुटि: स्थिति 0 पर JSON में अनपेक्षित टोकन” का अर्थ है कि आपने गैर-JSON को पार्स करने का प्रयास किया है – लगभग हमेशा एक HTML त्रुटि पृष्ठ (“<” से शुरू होता है) या एक खाली प्रतिक्रिया। समाधान:जांचेंresponse.ok और पार्सिंग से पहले सामग्री-प्रकार हेडर, खाली निकायों को संभालें, और JSON.parse को प्रयास/पकड़ में लपेटें. “<” सुराग आपको बताता है कि प्रतिक्रिया HTML है, इसलिए जांच करें कि क्यों – आमतौर पर एक गलत यूआरएल, एक HTML त्रुटि पृष्ठ लौटाने वाली सर्वर त्रुटि, या एक एसपीए फ़ॉलबैक। एक मजबूत फ़ेच रैपर का उपयोग करें जो कच्ची प्रतिक्रिया को लॉग करता है और स्पष्ट त्रुटियाँ देता है। एक बार जब आप प्रतिक्रिया को पार्स करने से पहले उसकी जांच कर लेते हैं, तो यह गुप्त त्रुटि एक जानकारीपूर्ण त्रुटि बन जाती है जो आपको सीधे वास्तविक समस्या की ओर इंगित करती है।
🔗 Share this article
✍️ Leave a Comment