Решение ошибки: преобразование циклической структуры в JSON

Быстрый ответ

Чтобы решить ошибку TypeError: Преобразование циклической структуры в JSON, используйте функцию replacer в методе JSON.stringify(). Она позволяет обнаруживать циклические ссылки и пропускать их:

const circularReplacer = () => {
  const seen = new WeakSet();
  return (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (seen.has(value)) {
        // Обнаружена циклическая ссылка, но она будет пропущена.
        return;
      }
      seen.add(value);
    }
    // Всё в порядке – циклических ссылок нет.
    return value;
  };
};

const safeStringify = (obj) => JSON.stringify(obj, circularReplacer());

// Пример использования
const objWithCircularRef = { /* Здесь может быть ваша циклическая структура */ };
const safeJSON = safeStringify(objWithCircularRef);

Алгоритм обнаружит циклические ссылки и будет игнорировать их, позволяя JSON.stringify работать без проблем.

Упрощение структуры данных: быстро и просто

Перед тем как отправлять данные через sendRequest в мире расширений Chrome, убедитесь, что ваша структура данных не содержит циклов. Вот простой рецепт для упрощения вашей структуры:

function flattenData(obj) {
    // Оставляем только необходимое, отсеивая сложные связи
    return {
        id: obj.id, // Если у объекта есть свойство 'id'
        name: obj.name, // И свойство 'name', и так далее
        // ...
    };
}

// И вот, данные преобразованы в простую "плоскую" структуру!
const flatData = flattenData(objWithNestedCircularRef);

Просто, правда? Теперь sendRequest выполнится без каких-либо проблем. Если же ваша структура по-прежнему слишком сложна, воспользуйтесь мощными npm-библиотеками, например, flatted, которая отлично справляется с циклическими ссылками:

const flatted = require('flatted');
const stringifiedComplexData = flatted.stringify(objWithCircularRef);

Визуализация

Представим объект с циклическими ссылками:

Попытка сериализации такого объекта через JSON.stringify приведёт к бесконечному циклу:

Объект
     |
     ⬆️
     |
Объект (Та же самая ссылка, создаёт бесконечный цикл)

Это своего рода попытка упаковать коробку в саму себя:

📦
  👈 🔁 👉 
📦 ➡️ 📦
   (Ошибка)

Программный аналог философского парадокса.

Для корректной сериализации такого объекта в JSON необходимо предотвратить возникновение бесконечных циклов:

function safeStringify(obj) {
    const cache = new Set();
    return JSON.stringify(obj, (key, value) => {
        if (typeof value === 'object' && value !== null) {
            if (cache.has(value)) return;
            cache.add(value);
        }
        return value;
    });
}

Решение проблемы цикличности: эффективные методы

Отладка с Node.js:

Для более детального анализа объектов можно использовать модуль util в Node.js:

const util = require('util');
console.log(util.inspect(objWithCircularRef, { depth: null }));

Установка depth: null позволяет снять ограничения на обход глубины, чем улучшает процесс отладки.

Подробнее об этом расскажет наш спикер на видео

Пакет Flatted: Сериализация циклических JSON

npm-пакет flatted — это современная замена устаревшему CircularJSON, великолепно обрабатывающий циклические структуры в JSON:

const flatted = require('flatted');
const stringified = flatted.stringify(objWithCircularRef);
const parsedBackToObject = flatted.parse(stringified);

Метод cleanStringify: Безопасная сериализация

Функция cleanStringify проводит глубокое клонирование объектов и отсекает циклические ссылки. Вот пример её использования:

const { cleanStringify } = require('clean-stringify');
chrome.extension.sendRequest({ payload: cleanStringify(objWithCircularRef) });

/ Циклические ссылки, мы вас предупредили: отступайте! У нас есть clean-stringify! ;) /

Когда стандартные методы не справляются

Для особо сложных случаев json-stringify-safe и flatted предлагают более комплексные инструменты работы с циклическими структурами. Используйте их, когда стандартных решений оказывается недостаточно.

Полезные материалы

1. JSON.stringify() – JavaScript | MDN – подробная документация по JSON.stringify().
2. Chrome sendrequest error: TypeError: Преобразование циклической структуры в JSON – Stack Overflow – обсуждение обработки циклических структур.
3. GitHub – WebReflection/circular-json: JSON не умеет работать с циклическими ссылками – библиотека для обработки циклических ссылок.
4. Flavio Copes – объяснение циклических зависимостей и методов их разрешения.
5. Util | Node.js v21.6.1 Документация – описание методов библиотеки util для инспекции объектов.
6. json-stringify-safe – npm – NPM-пакет для безопасного преобразования объектов с циклическими ссылками в строки.