Uncaught RangeError: превышен максимальный размер стека вызовов - laravel 5.6 [duplicate]

В вашем коде есть рекурсивный цикл (т. е. функция, которая в конечном итоге вызывает себя снова и снова до тех пор, пока стек не будет заполнен).

Другие браузеры имеют большие стеки (так что вместо этого вы получаете тайм-аут ) или они проглатывают ошибку по какой-либо причине (возможно, плохо поставленный try-catch).

Используйте отладчик для проверки стека вызовов при возникновении ошибки.

Проблема в моем случае состоит в том, что у меня есть маршрут для детей с одним и тем же путем с родителем:

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

Поэтому мне пришлось удалить линию детского маршрута

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

В моем случае два модажа jQuery отображались друг на друга. Предотвращение этой проблемы.

Проверьте сведения об ошибках на консоли панели инструментов Chrome dev, это даст вам функции в стеке вызовов и направит вас к рекурсии, вызывающей ошибку.

Если по какой-то причине вам нужен бесконечный процесс / рекурсия, вы можете использовать веб-исполнителя в отдельном потоке. http://www.html5rocks.com/en/tutorials/workers/basics/

, если вы хотите манипулировать элементами dom и перерисовывать, используйте анимацию http: / /creativejs.com/resources/requestanimationframe/

Оба вызова идентичного кода ниже, если оно уменьшено на 1, работают в Chrome 32 на моем компьютере, например. 17905 по сравнению с 17904. Если они выполняются так, они выдают ошибку «RangeError: Максимальный размер стека вызовов». Похоже, что это ограничение не является жестким, а зависит от оборудования вашего аппарата. Похоже, что если вызывается как функция, этот самоналоженный предел выше, чем если он вызывается как метод, то есть этот конкретный код использует меньше памяти при вызове как функцию.

Вызывается как метод:

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

ninja.chirp(17905);

Вызывается как функция:

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

chirp(20889);

В моем случае я отправлял входные элементы вместо их значений:

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

Вместо:

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

Это заморозило мою вкладку Chrome до такой степени, что она даже покажите мне диалоговое окно «Wait / Kill», когда страница становится невосприимчивой ...

Я использую Devexpress Scheduler в Angular, и проблема заключается в неправильном использовании переменной, назначенной тегу datasource планировщика.

Иногда это происходит из-за преобразования типа данных, например, у вас есть объект, который вы считаете строкой.

socket.id в nodejs либо в js-клиенте в качестве примера, не является строкой. для использования в качестве строки вам нужно добавить слово String до:

String(socket.id);

У меня была эта ошибка, потому что у меня было два JS-функции с тем же именем

В моем случае событие click распространялось по дочернему элементу. Итак, мне пришлось поставить следующее:

e.stopPropagation ()

при событии клика:

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

Здесь это html-код:

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

Вы можете иногда получить это, если вы случайно импортируете / вставляете один и тот же JS-файл дважды, стоит проверить вкладку ваших ресурсов инспектора:)

В моем случае я преобразовал большой массив байтов в строку, используя следующее:

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

bytes содержал несколько миллионов записей, которые слишком велики, чтобы вписаться в стек.

Проблема с обнаружением stackoverflows иногда трассирует трассировку стека, и вы не сможете увидеть, что происходит на самом деле.

Я нашел некоторые из новых инструментов отладки Chrome, полезных для этого.

Нажмите Performance tab, убедитесь, что Javascript samples включены, и вы получите что-то вроде этого.

Это довольно очевидно, где переполнение здесь! Если вы нажмете extendObject, вы сможете увидеть точное число строк в коде.

Вы также можете увидеть тайминги, которые могут быть полезными или могут быть полезными или красная селедка.

Еще один полезный трюк, если вы не можете найти проблему, состоит в том, чтобы поместить много console.log операторов, где вы думаете, что проблема. Предыдущий шаг выше может помочь вам в этом.

В Chrome, если вы многократно выдаете идентичные данные, он отображает его так, как показано, где проблема более четко. В этом случае стек попал в 7152 кадра до того, как он окончательно разбился:

Я также столкнулся с подобной проблемой, вот подробности при загрузке логотипа с помощью выпадающего меню для загрузки логотипа

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

до исправления моего кода:

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

Ошибка в консоли:

Я решил это, удалив onclick="$('#filePhoto').click()" из тега div.

Я столкнулся с той же проблемой, я разрешил ее, удалив имя поля, которое дважды использовалось для ajax, например

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

Если вы работаете с картами google, тогда проверьте, передаются ли lat lng в new google.maps.LatLng, соответствующего формата. В моем случае они передавались как неопределенные.

вы можете найти свою рекурсивную функцию в браузере Chrome, нажмите ctrl + shift + j, а затем вкладку source, которая даст вам компиляцию кода, и вы можете найти с помощью точки прерывания в коде.

Я знаю, что эта ветка устарела, но я думаю, что стоит упомянуть сценарий, я нашел эту проблему, чтобы она могла помочь другим.

Предположим, что у вас есть вложенные элементы:

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

Вы не можете манипулировать событиями дочерних элементов внутри события своего родителя, потому что он распространяется сам по себе, делая рекурсивные вызовы до тех пор, пока исключение не будет выбрано.

Таким образом, этот код не будет выполнен:

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

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

У вас есть два варианта, чтобы избежать этого:

• Переместить дочерний элемент в сторону родителя.
• Применить функцию stopPropagation для дочерний элемент.

Другая опция, которая вызывает эту ошибку. Если вы конвертируете в json с сокетом.

export class User {
  constructor(socket: Socket, name: string) { 
     this.socket = socket;
     this.name   = name;
  }

   name   : string;
   socket : Socket;
}

...
let json: string = JSON.stringify(user);