Stack limits & stack overflow

Why recursion can crash

A recursive function is a function that calls itself, directly or through other functions. The earlier Recursion and Advanced recursion lessons teach when that idea is useful. Here we focus on the engine limit that makes very deep recursion fail.

Every unfinished call needs a stack frame: a small record that lets the engine return to the caller with the right values. The previous lesson, Stack frames & calling conventions, covers what a frame holds. This lesson uses that mental model without repeating all of it.

The key word is host. ECMAScript defines how calls and returns behave, but it does not require one universal stack size or one universal error constructor for stack exhaustion.

1function countUntilLimit(limit) {2  let depth = 0;3  function dive() {4    depth += 1;5    if (depth === limit) return depth;6    return dive();7  }8  return dive();9}10 11console.log(countUntilLimit(3));Run

The execution above is deliberately tiny. Line 2 stores a counter. Line 4 increments it. Line 6 calls the same function again, so another frame is now waiting. A real unguarded recursion keeps stacking calls until the host refuses another frame.

Maximum call stack size is stack space, not a call-count promise

The phrase “maximum call stack size” sounds like a number of calls, but engines usually enforce a byte budget for the native stack. If each frame is small, more calls fit. If each frame is large, fewer calls fit.

Node exposes V8's stack reservation through node --stack-size=<kB>. That is useful for experiments, not a production fix for algorithms that can recurse through user-controlled data.

`RangeError` in V8 and JavaScriptCore, `InternalError` in Firefox

Stack overflow reporting is an implementation detail. In Node 22 and Chrome's V8, overflowing the call stack throws a RangeError with the message Maximum call stack size exceeded. MDN documents Safari's JavaScriptCore entry as the same RangeError message with a trailing period, and Firefox's SpiderMonkey entry as InternalError: too much recursion.

InternalError is not one of ECMAScript's standard error constructors. It is a Firefox-exposed constructor, so portable code should not require it to exist.

1function measureSmallFrame() {2  let depth = 0;3  function dive() {4    depth += 1;5    return dive();6  }7  try {8    dive();9  } catch (error) {10    return { depth, name: error.name, message: error.message, range: error instanceof RangeError };11  }12}13 14function measureLargeFrame() {15  let depth = 0;16  function dive(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z) {17    const localSum = a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;18    depth += 1;19    if (localSum === -1) throw new Error("unreachable");20    return dive(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z);21  }22  try {23    dive(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);24  } catch (error) {25    return { depth, name: error.name, message: error.message, range: error instanceof RangeError };26  }27}28 29console.log(JSON.stringify({30  node: process.versions.node,31  v8: process.versions.v8,32  small: measureSmallFrame(),33  large: measureLargeFrame(),34}));

The MDN page InternalError: too much recursion is the source for the cross-browser message table. The tests prove the V8/Node facts directly.

Measure depth, but label it honestly

A stack-depth measurement is a diagnostic. It should answer, “What happened in this host, for this function shape, right now?” It should not become a magic constant in your application.

The playground below runs two real probes in your browser. The small-frame function only increments a counter before recursing. The large-frame function carries many parameters and a local sum before recursing. You should expect different numbers, but do not expect a particular exact value.

1function measureSmallFrame() {2  let depth = 0;3  function dive() {4    depth += 1;5    return dive();6  }7  try {8    dive();9  } catch (error) {10    return { depth, name: error.name, message: error.message };11  }12}13 14function measureLargeFrame() {15  let depth = 0;16  function dive(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z) {17    const localSum = a + b + c + d + e + f + g + h + i + j + k + l + m + n + o + p + q + r + s + t + u + v + w + x + y + z;18    depth += 1;19    if (localSum === -1) throw new Error("unreachable");20    return dive(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z);21  }22  try {23    dive(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);24  } catch (error) {25    return { depth, name: error.name, message: error.message };26  }27}

Line 4 in the small probe increments the counter. Line 18 in the large probe increments a separate counter after a much wider parameter list and local expression. Both catch the thrown error so the page can show the measurement instead of crashing the lesson.

Frame size changes how deep recursion gets

The Node proof uses the same stack reservation for two functions. The tiny function has almost no frame data. The large function has many parameters and a local expression. The large-frame function overflows sooner because each call consumes more stack bytes.

This is why a benchmark that says “my browser handles about N calls” is incomplete. You need to know which function shape produced N, and you need to know the host.

Convert recursion to iteration when depth is unbounded

Recursion is often the clearest way to describe tree-shaped data. It is safe when you can prove the depth is small. It is risky when the depth comes from users, APIs, imports, or content management systems.

1function makeDeepList(depth) {2  let node = null;3  for (let i = 0; i < depth; i += 1) {4    node = { value: 1, next: node };5  }6  return node;7}8 9function sumRecursive(node) {10  if (node === null) return 0;11  return node.value + sumRecursive(node.next);12}13 14const deepList = makeDeepList(100000);15console.log(sumRecursive(deepList));

Line 14 builds a 100000-node list. Line 15 calls the recursive sum. Line 11 is the problem: every node adds another unfinished function call before any call can return.

1function makeDeepList(depth) {2  let node = null;3  for (let i = 0; i < depth; i += 1) {4    node = { value: 1, next: node };5  }6  return node;7}8 9function sumWithExplicitStack(root) {10  let total = 0;11  const pending = [root];12  while (pending.length > 0) {13    const node = pending.pop();14    if (node === null) continue;15    total += node.value;16    pending.push(node.next);17  }18  return total;19}20 21const deepList = makeDeepList(100000);22console.log(sumWithExplicitStack(deepList));

Line 11 creates pending, an array that stores work on the heap. Line 13 pops one node. Line 15 adds its value. Line 16 pushes the next node. The JavaScript call stack stays shallow, and the program prints 100000.

1const list = { value: 1, next: { value: 2, next: { value: 3, next: null } } };2 3function sumWithExplicitStack(root) {4  let total = 0;5  const pending = [root];6 7  while (pending.length > 0) {8    const node = pending.pop();9    if (node === null) continue;10    total += node.value;11    pending.push(node.next);12  }13 14  return total;15}16 17console.log(sumWithExplicitStack(list));Run

Where this shows up in real apps

Deep nesting appears in comment threads, category trees, CMS page trees, file explorers, menus, JSON imports, graph traversals, and route builders. A Bengaluru events site might fetch a comment thread where replies nest far deeper than the UI designer expected.

1const thread = {2  text: "Bengaluru meetup",3  replies: [4    { text: "Where in Indiranagar?", replies: [] },5    { text: "Can I bring a friend?", replies: [6      { text: "Yes, register both names.", replies: [] },7      { text: "Metro is easier than parking.", replies: [] },8    ] },9  ],10};11 12function countComments(root) {13  let count = 0;14  const pending = [root];15  while (pending.length > 0) {16    const comment = pending.pop();17    if (!comment) continue;18    count += 1;19    for (const reply of comment.replies) pending.push(reply);20  }21  return count;22}23 24console.log(countComments(thread));

Line 14 stores the first comment to visit. Line 16 pops one comment. Line 19 pushes replies, so depth becomes heap data instead of call-stack depth. The example prints 5.

• Use recursion freely when depth is bounded and clear.
• Use an explicit stack or queue when depth comes from user data, API data, or imported files.
• Keep a guard for cycles or runaway graph traversal; stack overflow is not your cycle detector.
• Measure first if you are changing code for performance. The safety reason is depth, not folklore.
• Link to Tail calls for proper tail calls and trampolines instead of teaching them here.

Common misconceptions

• “The limit is exactly the same everywhere.” It varies by host, stack reservation, frame size, optimization state, and device.
• “Stack overflow means the heap is full.” Stack and heap are different resources. An explicit stack uses heap memory to avoid nesting calls.
• “Catching `RangeError` is a good loop condition.” Recovery code runs after partial work already happened and while the stack was near exhaustion.
• “All recursion is bad.” Recursion is fine for shallow, bounded structures. The risk is unbounded depth.
• “Tail calls solve this everywhere.” Proper tail calls and trampolines are the next lesson. Do not assume general PTC in every engine.

1let writes = 0;2function riskySave() {3  writes += 1;4  return riskySave();5}6 7try {8  riskySave();9} catch (error) {10  console.log(error instanceof RangeError);11  console.log(writes > 0);12}

This snippet usually logs true twice in V8: the error is a RangeError, and writes is already greater than zero. Catching the error did not roll back line 3.

Practice exercises

function countUntilLimit(limit) {
  let depth = 0;
  function dive() {
    depth += 1;
    if (depth === limit) return depth;
    return dive();
  }
  return dive();
}
console.log(countUntilLimit(3));

function makeDeepList(depth) {
  let node = null;
  for (let i = 0; i < depth; i += 1) {
    node = { value: 1, next: node };
  }
  return node;
}

function sumRecursive(node) {
  if (node === null) return 0;
  return node.value + sumRecursive(node.next);
}

const deepList = makeDeepList(100000);
console.log(sumRecursive(deepList));

const list = { value: 1, next: { value: 2, next: { value: 3, next: null } } };
function sumWithExplicitStack(root) {
  let total = 0;
  const pending = [root];
  while (pending.length > 0) {
    const node = pending.pop();
    if (node === null) continue;
    total += node.value;
    pending.push(node.next);
  }
  return total;
}
console.log(sumWithExplicitStack(list));

Check your understanding

Answer by separating JavaScript semantics from host limits, then decide where the pending work lives.

Key takeaways

• Deep recursion crashes because unfinished calls consume finite stack space.
• The limit is host-dependent and frame-size-dependent; never assert one exact portable depth.
• V8 and JavaScriptCore report stack overflow as RangeError; Firefox documents InternalError: too much recursion.
• Measure stack depth only as a local diagnostic, and catch overflow only to report it, not as normal control flow.
• For unbounded trees, lists, and comment threads, move pending work into an explicit stack or queue.

Next: Tail calls explains proper tail calls and trampolines. We linked to it here; it teaches the tail-call details there.