lunes 15 julio 2024

Cómo solucionar el error "Uncaught RangeError: Maximum call stack size exceeded" en JavaScript

Causas comunes del error

Este error normalmente ocurre en los siguientes casos:

1. Recursión infinita:

Una función se llama a sí misma sin una condición de salida apropiada.

function recurse() {
       recurse();
   }
   recurse();  // Error: Maximum call stack size exceeded

2. Llamadas mutuas entre funciones:

Dos o más funciones se llaman entre sí en un bucle infinito.

function funcA() {
       funcB();
   }
   function funcB() {
       funcA();
   }
   funcA();  // Error: Maximum call stack size exceeded

Soluciones

1. Asegurar una condición de salida en la recursión

Siempre que utilices recursión, asegúrate de que haya una condición de salida que detenga la llamada recursiva.

function recurse(n) {
    if (n <= 0) return;
    console.log(n);
    recurse(n - 1);
}
recurse(5);  // Salida: 5, 4, 3, 2, 1

2. Verificar y corregir llamadas mutuas

Si tienes funciones que se llaman mutuamente, asegúrate de que haya una condición que detenga el ciclo de llamadas.

let counter = 0;
function funcA() {
    if (counter > 10) return;
    counter++;
    funcB();
}
function funcB() {
    if (counter > 10) return;
    counter++;
    funcA();
}
funcA();  // Evitará el bucle infinito

3. Usar iteración en lugar de recursión

Si la recursión no es estrictamente necesaria, considera usar un bucle iterativo para evitar el desbordamiento de la pila.

function recurseIteratively(n) {
    while (n > 0) {
        console.log(n);
        n--;
    }
}
recurseIteratively(5);  // Salida: 5, 4, 3, 2, 1

4. Implementar recursión de cola (Tail Recursion)

En algunas situaciones, puedes optimizar la recursión utilizando la recursión de cola, aunque esta técnica depende de la implementación del motor JavaScript.

function tailRecurse(n, acc = 0) {
    if (n <= 0) return acc;
    return tailRecurse(n - 1, acc + n);
}
console.log(tailRecurse(5));  // Salida: 15

5. Aumentar el límite de la pila de llamadas (solo para desarrollo y pruebas)

En entornos de desarrollo y pruebas, puedes aumentar el tamaño de la pila de llamadas para identificar otros problemas, pero no es una solución recomendada para producción.

function recurse(n) {
    console.log(n);
    recurse(n + 1);
}
try {
    recurse(1);
} catch (e) {
    console.error('Stack size exceeded at recursion depth:', e);
}

Etiquetas:

javascript desarrollo web

Creado por:

Jorge García

Fullstack developer