Błąd maksymalnego rozmiaru stosu wywołań

Używam pliku biblioteki JavaScript Direct Web Remoting (DWR) i pojawia się błąd tylko w przeglądarce Safari (komputer stacjonarny i iPad)

To mówi

Przekroczono maksymalny rozmiar stosu wywołań.

Co dokładnie oznacza ten błąd i czy przestaje on całkowicie przetwarzać?

Również wszelkie poprawki dla Safariprzeglądarki (w rzeczywistości iPad Safarimówi

JS: wykonanie przekroczyło limit czasu

zakładam, że to ten sam problem ze stosem wywołań)

Oznacza to, że gdzieś w kodzie wywołujesz funkcję, która z kolei wywołuje inną funkcję i tak dalej, dopóki nie osiągniesz limitu stosu wywołań.

Jest to prawie zawsze spowodowane funkcją rekurencyjną z przypadkiem podstawowym, który nie jest spełniony.

Wyświetlanie stosu

Rozważ ten kod ...

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

Oto stos po kilku połączeniach ...

Jak widać, stos wywołań rośnie, aż osiągnie limit: rozmiar stosu w przeglądarce lub wyczerpanie pamięci.

Aby to naprawić, upewnij się, że funkcja rekurencyjna ma przypadek podstawowy, który można spełnić ...

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

Czasami możesz to uzyskać, jeśli przypadkowo zaimportujesz / osadzisz ten sam plik JavaScript dwa razy, co warto sprawdzić na karcie zasobów inspektora.

W moim przypadku wysyłałem elementy wejściowe zamiast ich wartości:

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

Zamiast:

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

To zamroziło moją kartę Chrome do tego stopnia, że ​​nawet nie pokazało mi okna dialogowego „Czekaj / zabij”, gdy strona przestała reagować ...

Gdzieś w kodzie znajduje się pętla rekurencyjna (tj. Funkcja, która ostatecznie wywołuje się wielokrotnie, aż stos się zapełni).

Inne przeglądarki albo mają większe stosy (zamiast tego dostajesz limit czasu), albo z jakiegoś powodu połykają błąd (być może źle ustawiony try-catch).

Za pomocą debugera sprawdź stos wywołań, gdy wystąpi błąd.

Problem z wykrywaniem przepełnienia stosu polega na tym, że ślad stosu się odpręża i nie można zobaczyć, co się właściwie dzieje.

Uznałem, że niektóre z nowszych narzędzi do debugowania w Chrome są przydatne do tego.

Naciśnij Performance tab, upewnij się, że Javascript samplessą włączone, a dostaniesz coś takiego.

To oczywiste, gdzie jest przepełnienie! Jeśli klikniesz extendObject, będziesz w stanie zobaczyć dokładny numer wiersza w kodzie.

Możesz także zobaczyć czasy, które mogą być pomocne lub nie, lub czerwony śledź.

Kolejną przydatną sztuczką, jeśli nie możesz znaleźć problemu, jest umieszczenie wielu console.logstwierdzeń tam, gdzie Twoim zdaniem jest problem. Poprzedni krok powyżej może ci w tym pomóc.

W Chrome, jeśli wielokrotnie wyprowadzasz identyczne dane, wyświetli się w ten sposób, pokazując, gdzie problem jest wyraźniejszy. W tym przypadku stos uderzył w 7152 klatek, zanim ostatecznie się zawiesił:

W moim przypadku konwertowałem tablicę dużych bajtów na ciąg znaków, używając:

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

bytes zawiera kilka milionów wpisów, które są zbyt duże, aby zmieścić się na stosie.

W moim przypadku zdarzenie click propagowało się na elemencie potomnym. Musiałem więc powiedzieć:

e.stopPropagation ()

na zdarzenie kliknięcia:

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

Oto kod HTML:

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

Sprawdź szczegółowe informacje o błędzie w konsoli paska narzędzi Chrome dla programistów, to da ci funkcje na stosie wywołań i poprowadzi cię do rekurencji, która powoduje błąd.

Jeśli z jakiegoś powodu potrzebujesz nieskończonego procesu / rekurencji, możesz użyć webworkera w osobnym wątku. http://www.html5rocks.com/en/tutorials/workers/basics/

jeśli chcesz manipulować elementami domowymi i przerysować, użyj animacji http://creativejs.com/resources/requestanimationframe/

Prawie każda odpowiedź tutaj stwierdza, że ​​może to być spowodowane tylko nieskończoną pętlą. To nie jest prawda, w przeciwnym razie można by przekroczyć stos poprzez głęboko zagnieżdżone wywołania (nie mówiąc, że jest to wydajne, ale z pewnością jest to możliwe). Jeśli masz kontrolę nad maszyną wirtualną JavaScript, możesz dostosować rozmiar stosu. Na przykład:

node --stack-size=2000

Zobacz także: Jak zwiększyć maksymalny rozmiar stosu wywołań w Node.js

W moim przypadku dwa moduły jQuery były ułożone jeden na drugim. Zapobieganie to rozwiązało mój problem.

Niedawno dodaliśmy pole do strony administratora, nad którą pracujemy - typ_kontaktu ... łatwe, prawda? Cóż, jeśli wywołasz select „typ” i spróbujesz wysłać go przez wywołanie ajax jquery, to nie powiedzie się z tym błędem ukrytym głęboko w jquery.js Nie rób tego:

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

Problem polega na tym, że typ: typ - myślę, że to my nazywamy argument „typ” - posiadanie zmiennej wartości o nazwie typ nie jest problemem. Zmieniliśmy to na:

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

I odpowiednio przepisałem some_function.php - problem rozwiązany.

Sprawdź, czy masz funkcję, która się wywołuje. Na przykład

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

Może to również powodować Maximum call stack size exceededbłąd:

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

To samo tutaj:

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

Z Dokumentów Mozilla :

Ale uwaga: używając tej opcji, ryzykujesz przekroczenie limitu długości argumentów silnika JavaScript. Konsekwencje zastosowania funkcji z zbyt dużą liczbą argumentów (pomyśl więcej niż dziesiątki tysięcy argumentów) są różne w różnych silnikach (JavaScriptCore ma zakodowany na stałe limit argumentów 65536), ponieważ limit (a nawet charakter każdego nadmiernie dużego stosu zachowanie) jest nieokreślony. Niektóre silniki zgłoszą wyjątek. Bardziej szkodliwe jest, że inni dowolnie ograniczą liczbę argumentów faktycznie przekazanych do zastosowanej funkcji. Aby zilustrować ten ostatni przypadek: gdyby taki silnik miał limit czterech argumentów (rzeczywiste limity są oczywiście znacznie wyższe), byłoby tak, jakby argumenty 5, 6, 2, 3 zostały przekazane do zastosowania w powyższych przykładach, zamiast pełnej tablicy.

Więc spróbuj:

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

Oba wywołania tego samego kodu poniżej, jeśli zostaną zmniejszone o 1, działają w Chrome 32 na moim komputerze, np. 17905 vs. 17904. Jeśli zostaną uruchomione, spowodują błąd „RangeError: Przekroczono maksymalny rozmiar stosu wywołań”. Wydaje się, że ten limit nie jest zakodowany na stałe, ale zależy od sprzętu twojego komputera. Wygląda na to, że jeśli zostanie wywołany jako funkcja, to narzucony przez siebie limit jest wyższy niż przy wywołaniu jako metoda, tzn. Ten konkretny kod zużywa mniej pamięci po wywołaniu jako funkcja.

Wywoływany jako metoda:

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

ninja.chirp(17905);

Wywoływany jako funkcja:

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

chirp(20889);

możesz znaleźć swoją funkcję rekurencyjną w przeglądarce crome, naciśnij ctrl + shift + j, a następnie kartę źródłową, co daje przepływ kompilacji kodu i możesz znaleźć za pomocą punktu przerwania w kodzie.

Napotkałem również podobny problem, tutaj są szczegóły podczas przesyłania logo za pomocą rozwijanego pola przesyłania logo

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

przed korektą mój kod był:

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

Błąd w konsoli:

Rozwiązałem go, usuwając onclick="$('#filePhoto').click()"z tagu div.

Miałem do czynienia z tym samym problemem, który rozwiązałem, usuwając nazwę pola, która była używana dwukrotnie w ajax np

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

Wiem, że ten wątek jest stary, ale myślę, że warto wspomnieć o scenariuszu, w którym znalazłem ten problem, aby mógł pomóc innym.

Załóżmy, że masz takie elementy zagnieżdżone:

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

Nie można manipulować zdarzeniami elementu potomnego w zdarzeniu jego elementu nadrzędnego, ponieważ propaguje się ono do siebie, wykonując wywołania rekurencyjne, dopóki wyjątek nie zostanie zgłoszony.

Więc ten kod zawiedzie:

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

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

Masz dwie opcje, aby tego uniknąć:

• Przenieś dziecko na zewnątrz rodzica.
• Zastosuj funkcję stopPropagation do elementu potomnego.

Miałem ten błąd, ponieważ miałem dwie funkcje JS o tej samej nazwie

Jeśli pracujesz z mapami Google, sprawdź, czy są one przekazywane w new google.maps.LatLngodpowiednim formacie. W moim przypadku były one uznawane za niezdefiniowane.

Problem w moim przypadku polega na tym, że mam trasy dzieci z tą samą ścieżką z rodzicem:

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

Musiałem więc usunąć linię z trasy dla dzieci

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

w moim przypadku otrzymuję ten błąd przy wywołaniu ajax, a dane, które próbowałem przekazać, nie zostały zdefiniowane, co pokazuje mi ten błąd, ale nie opisuję tej zmiennej, która nie została zdefiniowana. Dodałem zdefiniowane, że zmienna n ma wartość.

Dotarłem do tego samego problemu, nie mogłem zrozumieć, co jest nie tak, że zaczął obwiniać Babel;)

Kod nie zwraca żadnych wyjątków w przeglądarkach:

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

problem został źle utworzony || (lub) część, ponieważ babel tworzy własną kontrolę typu:

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

więc usuwam

|| null

sprawiło, że transpilacja babel działała.

W moim przypadku przez pomyłkę przypisałem tę samą nazwę zmiennej i do funkcji val „class_routine_id”

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

powinno być jak:

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

w Angular, jeśli używasz mat-select i masz ponad 400 opcji, może wystąpić błąd https://github.com/angular/components/issues/12504

musisz zaktualizować @ wersję kątową / materiałową

Używam React-Native 0.61.5 wraz z ( npm 6.9.0 i węzeł 10.16.1 )

Podczas gdy instaluję nowe biblioteki w Project, mam

(np. npm install @ reag-navigation / native --save)

Błąd maksymalnego rozmiaru stosu wywołań

do tego próbuję

sudo npm cache clean --force

(Uwaga: - Poniższe polecenie zwykle zajmuje od 1 do 2 minut w zależności od wielkości pamięci podręcznej npm )

Czasami zdarzało się z powodu konwersji typu danych, na przykład masz obiekt, który uważałeś za ciąg znaków.

socket.id w nodejs w kliencie js jako przykład nie jest łańcuchem. aby użyć go jako ciągu, musisz dodać słowo Ciąg przed:

String(socket.id);

Próbowałem przypisać zmienną, wartość, gdy ta zmienna nie została zadeklarowana.

Zadeklarowanie zmiennej naprawiło mój błąd.