Исправление ошибки 'Maximum call stack size exceeded' в JavaScript

Вы смотрите на консоль, и вот оно: RangeError: Maximum call stack size exceeded. В Firefox это может выглядеть как too much recursion. В любом случае, ваше приложение только что упало, и вам нужно понять почему — и как это правильно исправить.

Эта ошибка сигнализирует о переполнении стека: ваш код выполнил так много вложенных вызовов функций, что движку JavaScript не хватило места для их отслеживания. Давайте разберём, что вызывает это в современном JavaScript, как эффективно отлаживать проблему и как предотвратить её в приложениях на React, Next.js и Node.js.

Что на самом деле делает стек вызовов

Каждый раз, когда выполняется функция, движок JavaScript создаёт фрейм стека, содержащий локальные переменные функции, аргументы и адрес возврата. Эти фреймы накладываются друг на друга. Когда функция возвращает результат, её фрейм удаляется.

Проблема? Этот стек имеет конечный размер. Точный лимит варьируется в зависимости от окружения — Chrome может позволить около 10 000-15 000 фреймов, в то время как Firefox допускает примерно 50 000. Node.js обычно ограничивает около 11 000 фреймов по умолчанию.

Важно: Эти числа зависят от реализации и могут меняться между версиями. Не пишите код, который полагается на достижение определённого лимита.

Распространённые паттерны, вызывающие переполнение стека

Классическая бесконечная рекурсия

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

function processItem(item) {
  // Отсутствует базовый случай
  return processItem(item.child)
}

Взаимная рекурсия

Две функции, вызывающие друг друга в цикле:

function isEven(n) {
  return n === 0 ? true : isOdd(n - 1)
}

function isOdd(n) {
  return n === 0 ? false : isEven(n - 1)
}

isEven(100000) // Переполнение стека

Бесконечные перерисовки в React

Здесь многие фронтенд-разработчики сталкиваются с ошибкой. Обновления состояния во время рендера создают бесконечные циклы:

function BrokenComponent() {
  const [count, setCount] = useState(0)
  setCount(count + 1) // Немедленно вызывает перерисовку
  return <div>{count}</div>
}

Неправильные зависимости useEffect вызывают похожие проблемы:

useEffect(() => {
  setData(transformData(data)) // data изменяется, эффект запускается снова
}, [data])

Переполнение стека из-за циклических ссылок в JSON

Когда объекты ссылаются на самих себя, JSON.stringify рекурсирует бесконечно:

const obj = { name: 'test' }
obj.self = obj
JSON.stringify(obj) // Maximum call stack size exceeded

Отладка переполнения стека вызовов в Node.js и браузерах

Шаг 1: Включите “Pause on Exceptions”

В Chrome DevTools откройте панель Sources и включите “Pause on caught exceptions”. Для Node.js используйте флаг --inspect и подключите Chrome DevTools.

Шаг 2: Проверьте стек вызовов на повторяющиеся фреймы

Когда отладчик остановится, изучите панель стека вызовов. Ищите повторяющиеся паттерны — одна и та же функция, появляющаяся десятки или сотни раз, указывает на точку рекурсии.

Шаг 3: Используйте трассировку асинхронного стека

Современные DevTools по умолчанию показывают трассировку асинхронного стека. Это помогает, когда рекурсия охватывает цепочки Promise или коллбэки setTimeout.

console.trace() // Выводит текущую трассировку стека

Примечание: Увеличение размера стека с помощью node --stack-size — это диагностический инструмент, а не решение. Это откладывает падение, но не исправляет ошибку.

Практические исправления, которые действительно работают

Преобразование рекурсии в итерацию

Большинство рекурсивных алгоритмов можно преобразовать в итеративные с явным стеком:

function processTree(root) {
  const stack = [root]
  while (stack.length > 0) {
    const node = stack.pop()
    process(node)
    if (node.children) {
      stack.push(...node.children)
    }
  }
}

Используйте трамплинирование для глубокой рекурсии

Трамплины разбивают рекурсию на шаги, предотвращая рост стека:

function trampoline(fn) {
  return function(...args) {
    let result = fn(...args)
    while (typeof result === 'function') {
      result = result()
    }
    return result
  }
}

Безопасная обработка циклических ссылок

Для сериализации JSON используйте функцию replacer или библиотеки вроде flatted:

const seen = new WeakSet()
JSON.stringify(obj, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) {
      return '[Circular]'
    }
    seen.add(value)
  }
  return value
})

Предотвращение бесконечной рекурсии в React

Всегда убеждайтесь, что зависимости useEffect стабильны, а обновления состояния условны:

useEffect(() => {
  if (!isProcessed) {
    setData(transformData(rawData))
    setIsProcessed(true)
  }
}, [rawData, isProcessed])

Почему оптимизация хвостовых вызовов вас не спасёт

ES6 определил правильные хвостовые вызовы, которые теоретически позволили бы бесконечную рекурсию в хвостовой позиции. На практике это реализовано только в Safari. Chrome и Firefox этого не делают, а Node.js отключил эту функцию. Не полагайтесь на TCO — рефакторьте свой код.

Заключение

Ошибка “Maximum call stack size exceeded” — это критическая ошибка, требующая структурных исправлений. Вы не можете обойти её с помощью catch, и не стоит пытаться увеличивать лимиты стека в продакшене.

Найдите повторяющийся паттерн в трассировке стека, затем либо добавьте правильные условия завершения, либо преобразуйте в итерацию, либо разбейте работу на асинхронные части. Рассматривайте циклические ссылки как проблему структуры данных, а не сериализации.

Когда вы видите эту ошибку, ваш код говорит вам, что нужно что-то фундаментально изменить.

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

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.