Error de tamaño de pila de llamadas máximo excedido

Estoy usando un archivo de biblioteca JavaScript de Direct Web Remoting (DWR) y obtengo un error solo en Safari (escritorio y iPad)

Dice

Se excedió el número máximo de llamadas a la pila.

¿Qué significa exactamente este error y deja de procesarse por completo?

También cualquier solución para el Safarinavegador (en realidad en el iPad Safari, dice

JS: la ejecución excedió el tiempo de espera

que supongo que es el mismo problema de pila de llamadas)

Significa que en algún lugar de su código, está llamando a una función que a su vez llama a otra función y así sucesivamente, hasta que alcanza el límite de la pila de llamadas.

Esto casi siempre se debe a una función recursiva con un caso base que no se cumple.

Viendo la pila

Considera este código ...

(function a() {
    a();
})();

Aquí está la pila después de un puñado de llamadas ...

Como puede ver, la pila de llamadas crece hasta alcanzar un límite: el tamaño de la pila codificada por el navegador o el agotamiento de la memoria.

Para solucionarlo, asegúrese de que su función recursiva tenga un caso base que se pueda cumplir ...

(function a(x) {
    // The following condition 
    // is the base case.
    if ( ! x) {
        return;
    }
    a(--x);
})(10);

A veces puede obtener esto si accidentalmente importa / incrusta el mismo archivo JavaScript dos veces, vale la pena revisarlo en la pestaña de recursos del inspector.

En mi caso, estaba enviando elementos de entrada en lugar de sus valores:

$.post( '',{ registerName: $('#registerName') } )

En vez de:

$.post( '',{ registerName: $('#registerName').val() } )

Esto congeló mi pestaña de Chrome hasta un punto que ni siquiera me mostró el cuadro de diálogo 'Esperar / matar' cuando la página dejó de responder ...

Hay un bucle recursivo en algún lugar de su código (es decir, una función que eventualmente se llama una y otra vez hasta que la pila esté llena).

Otros navegadores tienen pilas más grandes (por lo que obtienes un tiempo de espera en su lugar) o se tragan el error por alguna razón (tal vez un try-catch mal colocado).

Use el depurador para verificar la pila de llamadas cuando ocurre el error.

El problema con la detección de flujos de stackover es que a veces el seguimiento de la pila se desenrollará y no podrá ver lo que realmente está sucediendo.

He encontrado algunas de las nuevas herramientas de depuración de Chrome útiles para esto.

Presiona Performance tab, asegúrate de que Javascript samplesestén habilitados y obtendrás algo como esto.

¡Es bastante obvio dónde está el desbordamiento aquí! Si hace clic en extendObjectpodrá ver el número de línea exacto en el código.

También puede ver los tiempos que pueden o no ser útiles o un arenque rojo.

Otro truco útil si realmente no puede encontrar el problema es poner muchas console.logdeclaraciones donde cree que está el problema. El paso anterior anterior puede ayudarlo con esto.

En Chrome, si genera datos idénticos repetidamente, los mostrará de esta manera, mostrando dónde está el problema más claramente. En este caso, la pila alcanzó 7152 fotogramas antes de que finalmente se bloqueara:

En mi caso, estaba convirtiendo una gran matriz de bytes en una cadena usando lo siguiente:

String.fromCharCode.apply(null, new Uint16Array(bytes))

bytes contenía varios millones de entradas, que es demasiado grande para caber en la pila.

En mi caso, el evento click se propagaba en el elemento hijo. Entonces, tuve que poner lo siguiente:

e.stopPropagation ()

evento de clic:

 $(document).on("click", ".remove-discount-button", function (e) {
           e.stopPropagation();
           //some code
        });
 $(document).on("click", ".current-code", function () {
     $('.remove-discount-button').trigger("click");
 });

Aquí está el código html:

 <div class="current-code">                                      
      <input type="submit" name="removediscountcouponcode" value="
title="Remove" class="remove-discount-button">
   </div>

Verifique los detalles del error en la consola de la barra de herramientas de desarrollo de Chrome, esto le dará las funciones en la pila de llamadas y lo guiará hacia la recurrencia que está causando el error.

Si necesita un proceso / recursión infinito ejecutándose por alguna razón, puede usar un trabajador web en un hilo separado. http://www.html5rocks.com/en/tutorials/workers/basics/

si desea manipular elementos dom y redibujar, use la animación http://creativejs.com/resources/requestanimationframe/

Casi todas las respuestas aquí indican que esto solo puede ser causado por un bucle infinito. Eso no es cierto, de lo contrario, podría sobrepasar la pila a través de llamadas profundamente anidadas (por no decir que es eficiente, pero ciertamente es posible). Si tiene control de su máquina virtual JavaScript, puede ajustar el tamaño de la pila. Por ejemplo:

node --stack-size=2000

Consulte también: ¿Cómo puedo aumentar el tamaño máximo de la pila de llamadas en Node.js?

En mi caso, dos modales jQuery se mostraban apilados uno encima del otro. Prevenir eso resolvió mi problema.

Recientemente agregamos un campo a un sitio de administración en el que estamos trabajando - contact_type ... fácil ¿verdad? Bueno, si llama al select "type" e intenta enviarlo a través de una llamada jquery ajax, falla con este error enterrado en jquery.js No haga esto:

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, type:type }
});

El problema es ese tipo: tipo: creo que somos nosotros los que nombramos el argumento "tipo"; tener una variable de valor llamada tipo no es el problema. Cambiamos esto a:

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/some_function.php",
    data: { contact_uid:contact_uid, contact_type:type }
});

Y reescribí some_function.php en consecuencia, problema resuelto.

Comprueba si tienes una función que se llame a sí misma. Por ejemplo

export default class DateUtils {
  static now = (): Date => {
    return DateUtils.now()
  }
}

Esto también puede causar un Maximum call stack size exceedederror:

var items = [];
[].push.apply(items, new Array(1000000)); //Bad

Igual que aquí:

items.push(...new Array(1000000)); //Bad

De los documentos de Mozilla :

Pero tenga cuidado: al usar Apply de esta manera, corre el riesgo de exceder el límite de longitud del argumento del motor JavaScript. Las consecuencias de aplicar una función con demasiados argumentos (piense más de decenas de miles de argumentos) varían entre motores (JavaScriptCore tiene un límite de argumento codificado de 65536), porque el límite (incluso la naturaleza de cualquier pila excesivamente grande comportamiento) no está especificado. Algunos motores arrojarán una excepción. Más perniciosamente, otros limitarán arbitrariamente el número de argumentos realmente pasados ​​a la función aplicada. Para ilustrar este último caso: si dicho motor tuviera un límite de cuatro argumentos (los límites reales son, por supuesto, significativamente más altos), sería como si los argumentos 5, 6, 2, 3 se hubieran pasado para aplicar en los ejemplos anteriores, en lugar de la matriz completa.

Entonces intenta:

var items = [];
var newItems = new Array(1000000);
for(var i = 0; i < newItems.length; i++){
  items.push(newItems[i]);
}

Ambas invocaciones del código idéntico a continuación si disminuyen en 1 funcionan en Chrome 32 en mi computadora, por ejemplo, 17905 frente a 17904. Si se ejecutan tal cual, producirán el error "RangeError: Se excedió el tamaño máximo de la pila de llamadas". Parece que este límite no está codificado sino que depende del hardware de su máquina. Parece que si se invoca como una función, este límite autoimpuesto es mayor que si se invoca como un método, es decir, este código en particular usa menos memoria cuando se invoca como una función.

Se invoca como método:

var ninja = {
    chirp: function(n) {
        return n > 1 ? ninja.chirp(n-1) + "-chirp" : "chirp";
    }
};

ninja.chirp(17905);

Se invoca como una función:

function chirp(n) {
    return n > 1 ? chirp( n - 1 ) + "-chirp" : "chirp";
}

chirp(20889);

puede encontrar su función recursiva en el navegador crome, presione ctrl + shift + j y luego la pestaña fuente, que le brinda el flujo de compilación de código y puede encontrarlo usando el punto de interrupción en el código.

También me enfrenté a un problema similar aquí: los detalles al cargar el logotipo utilizando el cuadro desplegable de carga del logotipo

<div>
      <div class="uploader greyLogoBox" id="uploader" flex="64" onclick="$('#filePhoto').click()">
        <img id="imageBox" src="{{ $ctrl.companyLogoUrl }}" alt=""/>
        <input type="file" name="userprofile_picture"  id="filePhoto" ngf-select="$ctrl.createUploadLogoRequest()"/>
        <md-icon ng-if="!$ctrl.isLogoPresent" class="upload-icon" md-font-set="material-icons">cloud_upload</md-icon>
        <div ng-if="!$ctrl.isLogoPresent" class="text">Drag and drop a file here, or click to upload</div>
      </div>
      <script type="text/javascript">
          var imageLoader = document.getElementById('filePhoto');
          imageLoader.addEventListener('change', handleImage, false);

          function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {

                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }
      </script>
      </div>

CSS.css

.uploader {
  position:relative;
  overflow:hidden;
  height:100px;
  max-width: 75%;
  margin: auto;
  text-align: center;

  img{
    max-width: 464px;
    max-height: 100px;
    z-index:1;
    border:none;
  }

  .drag-drop-zone {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
  }
}

.uploader img{
  max-width: 464px;
  max-height: 100px;
  z-index:1;
  border:none;
}



.greyLogoBox {
  width: 100%;
  background: #EBEBEB;
  border: 1px solid #D7D7D7;
  text-align: center;
  height: 100px;
  padding-top: 22px;
  box-sizing: border-box;
}


#filePhoto{
  position:absolute;
  width:464px;
  height:100px;
  left:0;
  top:0;
  z-index:2;
  opacity:0;
  cursor:pointer;
}

antes de la corrección mi código era:

function handleImage(e) {
              var reader = new FileReader();
              reader.onload = function (event) {
                  onclick="$('#filePhoto').click()"
                  $('.uploader img').attr('src',event.target.result);
              }
              reader.readAsDataURL(e.target.files[0]);
          }

El error en la consola:

Lo resolví eliminando onclick="$('#filePhoto').click()"de la etiqueta div.

Estaba enfrentando el mismo problema, lo resolví eliminando un nombre de campo que se usó dos veces en ajax, por ejemplo

    jQuery.ajax({
    url : '/search-result',
    data : {
      searchField : searchField,
      searchFieldValue : searchField,
      nid    :  nid,
      indexName : indexName,
      indexType : indexType
    },
.....

Sé que este hilo es antiguo, pero creo que vale la pena mencionar el escenario en el que encontré este problema para que pueda ayudar a otros.

Supongamos que tiene elementos anidados como este:

<a href="#" id="profile-avatar-picker">
    <span class="fa fa-camera fa-2x"></span>
    <input id="avatar-file" name="avatar-file" type="file" style="display: none;" />
</a>

No puede manipular los eventos del elemento hijo dentro del evento de su padre porque se propaga a sí mismo, haciendo llamadas recursivas hasta que se lanza la excepción.

Entonces este código fallará:

$('#profile-avatar-picker').on('click', (e) => {
    e.preventDefault();

    $('#profilePictureFile').trigger("click");
});

Tienes dos opciones para evitar esto:

• Mueva al niño al exterior del padre.
• Aplique la función stopPropagation al elemento hijo.

Tuve este error porque tenía dos funciones JS con el mismo nombre

Si está trabajando con google maps, compruebe si los lat lng que se están pasando new google.maps.LatLngtienen un formato adecuado. En mi caso, se pasaban como indefinidos.

El problema en mi caso es porque tengo rutas de niños con la misma ruta con los padres:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'prefix' },
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

Así que tuve que quitar la línea de la ruta de los niños.

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'home', loadChildren: './home.module#HomeModule' },
    ]
  }
];

en mi caso recibo este error en una llamada ajax y los datos que intenté pasar esa variable no se han definido, eso me muestra este error pero no describe esa variable no definida. Agregué definido que la variable n tiene valor.

Me he encontrado con el mismo problema, no podría haber descubierto lo que está mal y comenzó a culpar a Babel;)

Tener código que no devuelve ninguna excepción en los navegadores:

if (typeof document.body.onpointerdown !== ('undefined' || null)) {

problema fue mal creado || (o) parte cuando babel crea su propia verificación de tipo:

function _typeof(obj){if(typeof Symbol==="function"&&_typeof(Symbol.iterator)==="symbol")

así que quitando

|| null

hizo que la transpiración de babel funcionara.

En mi caso, por error, he asignado el mismo nombre de variable y a la función val "class_routine_id"

var class_routine_id = $("#class_routine_id").val(class_routine_id);

debería ser como:

 var class_routine_id = $("#class_routine_id").val(); 

en Angular, si está usando mat-select y tiene más de 400 opciones, este error puede ocurrir https://github.com/angular/components/issues/12504

tienes que actualizar la versión @ angular / material

Estoy usando React-Native 0.61.5 junto con ( npm 6.9.0 y nodo 10.16.1 )

Mientras instalo cualquier biblioteca nueva en Project, obtuve una de

(por ejemplo, npm install @ react-navigation / native --save)

Error de tamaño de pila de llamadas máximo excedido

por eso lo intento

sudo npm cache clean --force

(Nota: - El siguiente comando generalmente demora de 1 a 2 minutos, dependiendo del tamaño de su caché npm )

A veces sucedió debido al tipo de datos de conversión, por ejemplo, tiene un objeto que consideró como cadena.

socket.id en nodejs, ya sea en el cliente js como ejemplo, no es una cadena. Para usarlo como cadena, debe agregar la palabra Cadena antes:

String(socket.id);

Estaba tratando de asignar una variable, un valor, cuando esa variable no se había declarado.

Declarar la variable corrigió mi error.