La dimensione massima dello stack di chiamate ha superato l'errore

Sto utilizzando un file di libreria JavaScript Direct Web Remoting (DWR) e visualizzo un errore solo in Safari (desktop e iPad)

Dice

Dimensione massima dello stack di chiamate superata.

Cosa significa esattamente questo errore e interrompe l'elaborazione completamente?

Anche qualsiasi correzione per il Safaribrowser (in realtà sul iPad Safari, dice

JS: esecuzione superata timeout

che presumo sia lo stesso problema di stack di chiamate)

Significa che da qualche parte nel tuo codice, stai chiamando una funzione che a sua volta chiama un'altra funzione e così via, fino a quando non raggiungi il limite dello stack di chiamate.

Questo è quasi sempre a causa di una funzione ricorsiva con un caso base che non viene soddisfatto.

Visualizza la pila

Considera questo codice ...

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

Ecco lo stack dopo una manciata di chiamate ...

Come puoi vedere, lo stack di chiamate cresce fino a raggiungere un limite: le dimensioni dello stack codificato dal browser o l'esaurimento della memoria.

Per risolverlo, assicurati che la tua funzione ricorsiva abbia un caso base che possa essere soddisfatto ...

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

A volte puoi ottenerlo se importi / incorpori accidentalmente lo stesso file JavaScript due volte, vale la pena controllare nella scheda Risorse della finestra di ispezione.

Nel mio caso, stavo inviando elementi di input anziché i loro valori:

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

Invece di:

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

Questo ha bloccato la mia scheda Chrome fino a un punto in cui non mi ha nemmeno mostrato la finestra di dialogo "Aspetta / Uccidi" per quando la pagina non ha risposto ...

C'è un ciclo ricorsivo da qualche parte nel tuo codice (cioè una funzione che alla fine si chiama più e più volte fino a quando lo stack è pieno).

Altri browser hanno stack più grandi (quindi si ottiene un timeout invece) o inghiottono l'errore per qualche motivo (forse un try-catch posizionato male).

Utilizzare il debugger per controllare lo stack di chiamate quando si verifica l'errore.

Il problema con il rilevamento di stackoverflow è che a volte la traccia dello stack si svolgerà e non sarai in grado di vedere cosa sta realmente succedendo.

Ho trovato utili alcuni dei più recenti strumenti di debug di Chrome.

Premi il Performance tab, assicurati che Javascript samplessiano abilitati e otterrai qualcosa del genere.

È abbastanza ovvio dove si trova l'overflow! Se fai clic su extendObject, sarai in grado di vedere esattamente il numero di riga nel codice.

Puoi anche vedere i tempi che possono essere utili o meno o un'aringa rossa.

Un altro trucco utile se non riesci effettivamente a trovare il problema è quello di mettere un sacco di console.log affermazioni dove pensi che sia il problema. Il passaggio precedente sopra può aiutarti in questo.

In Chrome, se si emettono ripetutamente dati identici, verranno visualizzati in questo modo, mostrando dove il problema è più chiaro. In questo caso lo stack ha colpito 7152 frame prima che si schiantasse alla fine:

Nel mio caso, stavo convertendo un array di byte di grandi dimensioni in una stringa utilizzando quanto segue:

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

bytes conteneva diversi milioni di voci, che è troppo grande per stare nello stack.

Nel mio caso, l'evento click si stava propagando sull'elemento figlio. Quindi, ho dovuto mettere quanto segue:

e.stopPropagation ()

evento al clic:

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

Ecco il codice html:

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

Controlla i dettagli dell'errore nella console della barra degli strumenti di sviluppo di Chrome, questo ti darà le funzioni nello stack di chiamate e ti guiderà verso la ricorsione che causa l'errore.

Se hai bisogno di un processo / ricorsione infinito in esecuzione per qualche motivo, puoi utilizzare un webworker in un thread separato. http://www.html5rocks.com/en/tutorials/workers/basics/

se vuoi manipolare elementi dom e ridisegnare, usa l'animazione http://creativejs.com/resources/requestanimationframe/

Quasi ogni risposta qui afferma che ciò può essere causato solo da un ciclo infinito. Questo non è vero, altrimenti potresti sovraccaricare lo stack attraverso chiamate profondamente annidate (per non dire che è efficiente, ma è certamente nel regno del possibile). Se hai il controllo della tua VM JavaScript, puoi regolare le dimensioni dello stack. Per esempio:

node --stack-size=2000

Vedi anche: Come posso aumentare la dimensione massima dello stack di chiamate in Node.js

Nel mio caso, due modali jQuery sono state mostrate sovrapposte. Prevenire ciò ha risolto il mio problema.

Di recente abbiamo aggiunto un campo a un sito di amministrazione su cui stiamo lavorando - contact_type ... easy right? Bene, se chiami il "tipo" selezionato e provi a inviarlo tramite una chiamata ajax jquery fallisce con questo errore sepolto in profondità in jquery.js Non farlo:

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

Il problema è quel tipo: tipo - credo che siamo noi a nominare l'argomento "tipo" - avere una variabile di valore chiamata tipo non è il problema. Abbiamo cambiato questo in:

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

E riscritto some_function.php di conseguenza - problema risolto.

Controlla se hai una funzione che si chiama da sola. Per esempio

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

Ciò può anche causare un Maximum call stack size exceedederrore:

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

Anch'io:

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

Dai documenti di Mozilla :

Ma attenzione: nell'uso di applicare in questo modo, si corre il rischio di superare il limite di lunghezza degli argomenti del motore JavaScript. Le conseguenze dell'applicazione di una funzione con troppi argomenti (pensa più di decine di migliaia di argomenti) variano a seconda dei motori (JavaScriptCore ha un limite di argomenti codificato a 65536), perché il limite (anzi persino la natura di uno stack eccessivamente grande comportamento) non è specificato. Alcuni motori genereranno un'eccezione. Più perniciosamente, altri limiteranno arbitrariamente il numero di argomenti effettivamente passati alla funzione applicata. Per illustrare quest'ultimo caso: se un tale motore avesse un limite di quattro argomenti (i limiti effettivi sono ovviamente significativamente più alti), sarebbe come se gli argomenti 5, 6, 2, 3 fossero stati passati per applicarsi negli esempi precedenti, piuttosto che l'array completo.

Allora prova:

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

Entrambe le invocazioni dello stesso identico codice riportato di seguito se diminuite di 1 funzionano in Chrome 32 sul mio computer, ad es. 17905 vs 17904. Se eseguito così com'è, genererà l'errore "RangeError: Dimensione massima dello stack di chiamate superata". Sembra che questo limite non sia hardcoded ma dipendente dall'hardware del tuo computer. Sembra che se invocato come funzione questo limite autoimposto è maggiore di se invocato come metodo, cioè questo particolare codice usa meno memoria quando viene invocato come funzione.

Richiamato come metodo:

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

ninja.chirp(17905);

Richiamato come funzione:

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

chirp(20889);

puoi trovare la tua funzione ricorsiva nel browser crome, premere ctrl + shift + j e quindi la scheda sorgente, che ti dà il flusso di compilazione del codice e puoi trovare usando il punto di interruzione nel codice.

Ho anche riscontrato problemi simili qui sono i dettagli quando si carica il logo utilizzando la casella di caricamento del logo a discesa

<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;
}

prima della correzione il mio codice 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]);
          }

L'errore nella console:

L'ho risolto rimuovendo onclick="$('#filePhoto').click()"dal tag div.

Stavo affrontando lo stesso problema che ho risolto rimuovendo un nome di campo che è stato usato due volte su Ajax ad es

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

So che questo thread è vecchio, ma penso che valga la pena menzionare lo scenario in cui ho riscontrato questo problema in modo che possa aiutare gli altri.

Supponiamo di avere elementi nidificati come questo:

<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>

Non è possibile manipolare gli eventi dell'elemento figlio all'interno dell'evento del suo genitore perché si propaga a se stesso, effettuando chiamate ricorsive fino a quando non viene generata l'eccezione.

Quindi questo codice fallirà:

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

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

Hai due opzioni per evitare questo:

• Sposta il bambino all'esterno del genitore.
• Applica la funzione stopPropagation all'elemento figlio.

Ho avuto questo errore perché avevo due funzioni JS con lo stesso nome

Se stai lavorando con google maps, controlla se il lat lng viene passato nel new google.maps.LatLngformato corretto. Nel mio caso venivano passati come indefiniti.

Il problema nel mio caso è perché ho percorso figlio con lo stesso percorso con il genitore:

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

Quindi ho dovuto rimuovere la linea del percorso dei bambini

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

nel mio caso sto ricevendo questo errore su una chiamata Ajax e i dati che ho provato a passare quella variabile non sono stati definiti, questo mi sta mostrando questo errore ma non sta descrivendo quella variabile non definita. Ho aggiunto definito che la variabile n ha ottenuto valore.

Si sono imbattuti nello stesso problema, non è stato possibile capire cosa c'è che non ha iniziato a incolpare Babel;)

Avere codice che non restituisce alcuna eccezione nei browser:

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

il problema è stato creato male || (o) parte come babel crea il proprio controllo del tipo:

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

così rimuovendo

|| null

fatto funzionare la transpilazione della babele.

Nel mio caso, per errore, ho assegnato lo stesso nome di variabile e alla funzione val "class_routine_id"

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

dovrebbe essere come:

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

in Angolare, se si utilizza mat-select e si dispone di oltre 400 opzioni, è possibile che si verifichi questo errore https://github.com/angular/components/issues/12504

devi aggiornare @ versione angolare / materiale

Sto usando React-Native 0.61.5 insieme a ( npm 6.9.0 e nodo 10.16.1 )

Mentre sto installando tutte le nuove librerie in Project ho ottenuto un

(ad es. npm install @ reply-navigation / native --save)

La dimensione massima dello stack di chiamate ha superato l'errore

per quello, ci provo

sudo npm cache clean --force

(Nota: - Sotto il comando di solito impiegano da 1 a 2 minuti a seconda della dimensione della cache npm )

A volte è successo a causa del tipo di dati convertito, ad esempio hai un oggetto che hai considerato stringa.

socket.id in nodejs o nel client js come esempio, non è una stringa. per usarlo come stringa devi aggiungere la parola String prima di:

String(socket.id);

Stavo cercando di assegnare una variabile, un valore, quando quella variabile non era stata dichiarata.

Dichiarare la variabile ha corretto il mio errore.