Ошибка JSON Parse Unexpected Token: Полное руководство по исправлению и профилактике

Вы работаете с API, парсите данные или настраиваете конфигурацию, и вдруг — холодный душ в виде ошибки «JSON Parse Unexpected Token». Эта ошибка прерывает работу приложений, останавливает скрипты и заставляет разработчиков искать невидимую запятую. Но что на самом деле скрывается за этим сообщением, и как не только исправить, но и предотвратить эту проблему в будущем? Давайте разберемся досконально.

Что такое «Unexpected Token» в JSON?

Когда парсер JSON (например, в JavaScript метод JSON.parse()) встречает символ или последовательность символов, которые нарушают синтаксис стандарта JSON, он выбрасывает ошибку «Unexpected Token». Проще говоря, парсер говорит: «Я тут ожидал одно, а ты мне подсунул совсем другое, и я не знаю, что с этим делать».

Основные причины ошибки

Ошибка возникает из-за синтаксических проблем в JSON-строке. Вот самые частые «виновники»:

1. Невалидные символы и опечатки

• Лишние или пропущенные запятые: Особенно перед закрывающей скобкой } или ].
• Непарные кавычки: Использование одинарных кавычек ' вместо двойных " для строк (стандарт JSON требует двойных).
• Неэкранированные специальные символы: Символы новой строки \n, табуляции, кавычки внутри строк должны быть экранированы обратным слэшем: \".
• Случайные символы: Иногда в начало JSON «закрадывается» невидимый символ BOM (Byte Order Mark) или текст вроде «undefined».

2. Проблемы с кодировкой и источником данных

• Данные пришли с сервера с неверным заголовком Content-Type (не application/json).
• Ответ от API содержит HTML-страницу с ошибкой вместо JSON (например, при 500 Internal Server Error).
• В данных присутствуют комментарии // или /* */, которые JSON не поддерживает.

Как найти и исправить ошибку: практическое руководство

Шаг 1: Изоляция и валидация

1. Скопируйте JSON-строку, которая вызывает ошибку.
2. Воспользуйтесь онлайн-валидаторами (JSONLint, JSON Formatter) или встроенными инструментами разработчика (DevTools Console). Они укажут на строку и символ с проблемой.
3. Проверьте, нет ли в начале строки лишних символов. Поможет console.log(rawData.substring(0, 50)).

Шаг 2: Использование try...catch и отладка

Всегда оборачивайте вызов JSON.parse() в блок try...catch:

try {
    const data = JSON.parse(jsonString);
    console.log('Успешно!', data);
} catch (error) {
    console.error('Ошибка парсинга JSON:', error.message);
    console.log('Сырые данные:', jsonString);
}

В сообщении ошибки часто указана позиция проблемного токена, например: Unexpected token ' в позиции 25.

Шаг 3: Распространенные паттерны исправления

• Замена одинарных кавычек: Используйте регулярное выражение или функцию замены, но осторожно — не затроньте данные внутри строк.
• Удаление лишних запятых: Проверьте места перед } и ].
• Экранирование: Убедитесь, что все кавычки внутри строк экранированы: \".
• Проверка ответа сервера: Убедитесь, что запрос успешен (status 200) и тип контента верный.

Профилактика лучше, чем лечение

Чтобы избежать ошибок в будущем:

1. Всегда используйте JSON.stringify() для создания JSON из объектов JavaScript.
2. Настраивайте сервер правильно: заголовок Content-Type: application/json; charset=utf-8.
3. Для сложных данных используйте надежные библиотеки и сериализаторы.
4. Внедрите валидацию JSON на этапе получения данных (схемы JSON Schema).
5. Пишите тесты, которые проверяют корректность парсинга.

FAQ: Часто задаваемые вопросы

Что значит «Unexpected token < в JSON at position 0»?

Это классический признак того, что вместо JSON вы получили HTML (который начинается с тега <!). Чаще всего это страница ошибки сервера (404, 500) или редирект. Проверьте URL API и статус ответа.

Как обработать JSON с одинарными кавычками?

Стандартный JSON.parse() не примет такой JSON. Нужно либо заменить кавычки на двойные (с осторожностью), либо использовать «мягкий» парсер (например, eval(), но это небезопасно), либо исправить источник данных.

Почему валидатор говорит, что JSON верный, а парсер браузера — нет?

Возможно, в данные вкрался непечатаемый символ (BOM, нулевой символ). Попробуйте «очистить» строку: jsonString = jsonString.trim().replace(/^[\\uFEFF\\u200B]+/, '');.

Ошибка возникает только в браузере, а в Node.js все работает. В чем дело?

Проверьте кодировку и заголовки HTTP-ответа. Браузеры более строги к Content-Type. Также могут быть различия в реализации парсеров.

Как безопасно отлаживать JSON в продакшене?

Никогда не выводите сырые ошибочные данные пользователю. Логируйте ошибку и первые N символов ответа на сервере. Используйте мониторинг ошибок (Sentry, LogRocket).