Erreur de taille maximale de la pile d'appels dépassée

J'utilise un fichier de bibliothèque JavaScript Direct Web Remoting (DWR) et j'obtiens une erreur uniquement dans Safari (ordinateur de bureau et iPad)

Ça dit

Taille de la pile d'appel maximale dépassée.

Que signifie exactement cette erreur et arrête-t-elle complètement le traitement?

Aussi tout correctif pour le Safarinavigateur (en fait sur le iPad Safari, dit-il

JS: délai d'exécution dépassé

que je suppose est le même problème de pile d'appels)

Cela signifie que quelque part dans votre code, vous appelez une fonction qui à son tour appelle une autre fonction et ainsi de suite, jusqu'à ce que vous atteigniez la limite de pile d'appels.

Cela est presque toujours dû à une fonction récursive avec un cas de base qui n'est pas respecté.

Affichage de la pile

Considérez ce code ...

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

Voici la pile après une poignée d'appels ...

Comme vous pouvez le voir, la pile d'appels augmente jusqu'à ce qu'elle atteigne une limite: la taille de pile codée en dur du navigateur ou l'épuisement de la mémoire.

Afin de le corriger, assurez-vous que votre fonction récursive a un cas de base qui peut être respecté ...

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

Vous pouvez parfois l'obtenir si vous importez / intégrez accidentellement le même fichier JavaScript deux fois, cela vaut la peine de vérifier dans l'onglet ressources de l'inspecteur.

Dans mon cas, j'envoyais des éléments d'entrée au lieu de leurs valeurs:

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

Au lieu de:

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

Cela a gelé mon onglet Chrome au point qu'il ne m'a même pas montré la boîte de dialogue `` Attendre / Tuer '' lorsque la page ne répondait plus ...

Il y a une boucle récursive quelque part dans votre code (c'est-à-dire une fonction qui finit par s'appeler encore et encore jusqu'à ce que la pile soit pleine).

Les autres navigateurs ont des piles plus importantes (vous obtenez donc un délai d'attente à la place) ou ils avalent l'erreur pour une raison quelconque (peut-être un try-catch mal placé).

Utilisez le débogueur pour vérifier la pile d'appels lorsque l'erreur se produit.

Le problème avec la détection des débordements de pile est parfois que la trace de la pile se déroule et vous ne pourrez pas voir ce qui se passe réellement.

J'ai trouvé certains des nouveaux outils de débogage de Chrome utiles pour cela.

Appuyez sur Performance tab, assurez-vous qu'ils Javascript samplessont activés et vous obtiendrez quelque chose comme ça.

Il est assez évident où le débordement est là! Si vous cliquez sur, extendObjectvous pourrez réellement voir le numéro de ligne exact dans le code.

Vous pouvez également voir les horaires qui peuvent ou non être utiles ou un hareng rouge.

Une autre astuce utile si vous ne pouvez pas réellement trouver le problème est de mettre beaucoup de console.logdéclarations là où vous pensez que le problème est. L'étape précédente ci-dessus peut vous aider.

Dans Chrome, si vous produisez à plusieurs reprises des données identiques, il les affichera comme ceci, montrant où le problème est plus clair. Dans ce cas, la pile a atteint 7152 images avant de se bloquer définitivement:

Dans mon cas, je convertissais un grand tableau d'octets en une chaîne en utilisant ce qui suit:

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

bytes contenait plusieurs millions d'entrées, ce qui est trop gros pour tenir dans la pile.

Dans mon cas, l'événement click se propageait sur l'élément enfant. Donc, j'ai dû mettre ce qui suit:

e.stopPropagation ()

sur événement 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");
 });

Voici le code html:

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

Vérifiez les détails de l'erreur dans la console de la barre d'outils de développement Chrome, cela vous donnera les fonctions de la pile d'appels et vous guidera vers la récursivité qui cause l'erreur.

Si vous avez besoin d'un processus / récursion infini en cours d'exécution pour une raison quelconque, vous pouvez utiliser un webworker dans un thread séparé. http://www.html5rocks.com/en/tutorials/workers/basics/

si vous voulez manipuler des éléments dom et redessiner, utilisez l'animation http://creativejs.com/resources/requestanimationframe/

Presque toutes les réponses ici indiquent que cela ne peut être causé que par une boucle infinie. Ce n'est pas vrai, sinon vous pourriez dépasser la pile par des appels profondément imbriqués (pour ne pas dire que c'est efficace, mais c'est certainement dans le domaine du possible). Si vous contrôlez votre machine virtuelle JavaScript, vous pouvez ajuster la taille de la pile. Par exemple:

node --stack-size=2000

Voir aussi: Comment puis-je augmenter la taille maximale de la pile d'appels dans Node.js

Dans mon cas, deux modaux jQuery montraient empilés les uns sur les autres. Empêcher cela a résolu mon problème.

Nous avons récemment ajouté un champ à un site d'administration sur lequel nous travaillons - contact_type ... c'est facile, non? Eh bien, si vous appelez le "type" sélectionné et essayez d'envoyer cela via un appel ajqu jquery, il échoue avec cette erreur enfouie profondément dans jquery.js Ne faites pas ceci:

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

Le problème est ce type: type - je crois que c'est nous qui nommons l'argument "type" - avoir une variable de valeur nommée type n'est pas le problème. Nous avons changé cela en:

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

Et réécrit some_function.php en conséquence - problème résolu.

Vérifiez si vous avez une fonction qui s'appelle elle-même. Par exemple

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

Cela peut également provoquer une Maximum call stack size exceedederreur:

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

Pareil ici:

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

Depuis les documents Mozilla :

Mais attention: en utilisant Apply de cette façon, vous courez le risque de dépasser la limite de longueur d'argument du moteur JavaScript. Les conséquences de l'application d'une fonction avec trop d'arguments (pensez à plus de dizaines de milliers d'arguments) varient selon les moteurs (JavaScriptCore a une limite d'arguments codée en dur de 65536), car la limite (en fait même la nature de toute pile trop grande) comportement) n'est pas spécifié. Certains moteurs lèveront une exception. Plus pernicieusement, d'autres limiteront arbitrairement le nombre d'arguments réellement passés à la fonction appliquée. Pour illustrer ce dernier cas: si un tel moteur avait une limite de quatre arguments (les limites réelles sont bien sûr significativement plus élevées), ce serait comme si les arguments 5, 6, 2, 3 avaient été passés pour s'appliquer dans les exemples ci-dessus, plutôt que le tableau complet.

Alors essayez:

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

Les deux invocations du code identique ci-dessous si elles sont diminuées de 1 fonctionnent dans Chrome 32 sur mon ordinateur, par exemple 17905 vs 17904. Si elles sont exécutées telles quelles, elles produiront l'erreur "RangeError: la taille maximale de la pile d'appels est dépassée". Il semble que cette limite ne soit pas codée en dur mais dépend du matériel de votre machine. Il semble que s'il est invoqué en tant que fonction, cette limite auto-imposée est plus élevée que s'il est invoqué en tant que méthode, c'est-à-dire que ce code particulier utilise moins de mémoire lorsqu'il est invoqué en tant que fonction.

Appelé comme méthode:

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

ninja.chirp(17905);

Appelé en tant que fonction:

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

chirp(20889);

vous pouvez trouver votre fonction récursive dans le navigateur crome, appuyez sur ctrl + shift + j puis sur l'onglet source, ce qui vous donne le flux de compilation du code et vous pouvez le trouver en utilisant le point d'arrêt dans le code.

J'ai également rencontré un problème similaire ici: les détails lors du téléchargement du logo à l'aide de la zone de téléchargement du logo déroulant

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

avant correction mon code était:

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'erreur dans la console:

Je l'ai résolu en supprimant onclick="$('#filePhoto').click()"de la balise div.

J'étais confronté au même problème que je l'ai résolu en supprimant un nom de champ qui a été utilisé deux fois sur ajax, par exemple

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

Je sais que ce fil est ancien, mais je pense qu'il vaut la peine de mentionner le scénario où j'ai trouvé ce problème afin qu'il puisse aider les autres.

Supposons que vous ayez des éléments imbriqués comme ceci:

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

Vous ne pouvez pas manipuler les événements d'élément enfant à l'intérieur de l'événement de son parent car il se propage à lui-même, effectuant des appels récursifs jusqu'à ce que l'exception soit levée.

Donc, ce code échouera:

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

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

Vous avez deux options pour éviter cela:

• Déplacez l'enfant vers l'extérieur du parent.
• Appliquez la fonction stopPropagation à l'élément enfant.

J'ai eu cette erreur car j'avais deux fonctions JS avec le même nom

Si vous travaillez avec google maps, vérifiez si le dernier lng est passé dans new google.maps.LatLngun format correct. Dans mon cas, ils étaient passés comme indéfinis.

Le problème dans mon cas est que j'ai des enfants qui ont le même chemin avec le parent:

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

J'ai donc dû supprimer la ligne de la route des enfants

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

dans mon cas, j'obtiens cette erreur lors d'un appel ajax et les données que j'ai essayé de transmettre ne sont pas définies, cela me montre cette erreur mais ne décrit pas cette variable non définie. J'ai ajouté défini que la variable n a une valeur.

Je suis tombé sur le même problème, je n'ai pas compris ce qui n'allait pas, j'ai commencé à blâmer Babel;)

Avoir du code ne renvoyant aucune exception dans les navigateurs:

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

problème a été mal créé || (ou) partie lorsque babel crée sa propre vérification de type:

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

donc enlever

|| null

fait fonctionner la transpilation de babel.

Dans mon cas, par erreur, j'ai attribué le même nom de variable et à la fonction val "class_routine_id"

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

ça devrait être comme:

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

dans Angular, si vous utilisez mat-select et avez plus de 400 options, cette erreur peut se produire https://github.com/angular/components/issues/12504

vous devez mettre à jour la version @ angular / material

J'utilise React-Native 0.61.5 avec ( npm 6.9.0 & node 10.16.1 )

Pendant que j'installe de nouvelles bibliothèques dans Project, j'ai obtenu un des

(par exemple, npm install @ react-navigation / native --save)

Erreur de taille maximale de la pile d'appels dépassée

pour ça j'essaye

sudo npm cache clean --force

(Remarque: - La commande ci-dessous prend généralement 1 à 2 minutes en fonction de la taille de votre cache npm )

Parfois arrivé à cause du type de données converti, par exemple vous avez un objet que vous considérez comme une chaîne.

socket.id dans nodejs soit dans js client comme exemple, n'est pas une chaîne. pour l'utiliser comme chaîne, vous devez ajouter le mot chaîne avant:

String(socket.id);

J'essayais d'assigner une variable, une valeur, alors que cette variable n'avait pas été déclarée.

La déclaration de la variable a corrigé mon erreur.