# Uncaught RangeError: Maximum call stack size exceeded

**URL:** <https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228>\
**Category:** Uncategorized\
**Created:** [September 22, 2020, 10:42am UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228 "2020-09-22T10:42:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sahil\_Paudel](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sahil_paudel/32/17179_2.png) [@Sahil\_Paudel](https://discuss.emberjs.com/u/Sahil_Paudel)\
**Post date:** [September 22, 2020, 10:42am UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/1 "2020-09-22T10:42:01Z")

</div>

I am getting this error in production for only one request `rule-sets.rule-set-versions.index` other request are working fine.

I am not sure if the data we are getting is the issue as we are gettting 250 rows in this request and other request using same route with lesser rows are working fine.

```auto
Error while processing route: rule-sets.rule-set-versions.index Maximum call stack size exceeded RangeError: Maximum call stack size exceeded
    at n._normalizeResponse (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:4889:26)
    at normalizeArrayResponse (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:4838:1393)
    at normalizeQueryResponse (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:4838:803)
    at normalizeResponse (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:4835:48)
    at V (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:4975:226)
    at https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:5308:74
    at y (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:3719:25)
    at k (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:3727:9)
    at S (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:3725:43)
    at e.invoke (https://carbon.pharmeasy.in/assets/vendor-adf5126a4e05be4713be103fa127d661.js:1942:254)

```

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [September 22, 2020, 2:10pm UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/2 "2020-09-22T14:10:42Z")

</div>

It doesn’t seem like 250 records would cause that kind of error, not even close. How big is each “row”? And is there a log of customer serializer logic?

---

<div class="post-metadata">

**Author:** ![Sahil\_Paudel](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sahil_paudel/32/17179_2.png) [@Sahil\_Paudel](https://discuss.emberjs.com/u/Sahil_Paudel)\
**Post date:** [September 22, 2020, 2:22pm UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/3 "2020-09-22T14:22:42Z")

</div>

Size wise I have checked there is json 300 json object and total size 25 MB.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [September 22, 2020, 2:37pm UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/4 "2020-09-22T14:37:00Z")

</div>

Oof 25mb of JSON seems like a _lot_, and I’d think it could cause other problems too like request time, memory consumption (once that’s serialized in the store it’s probably going to take up a lot more memory than that), etc.

My advice would be one of:

- try and break the request up into pages and fetch them consecutively or in parallel
- use pages but only fetch the first one (ideal from a memory perspective)
- try and reduce the size of the request in some other way (sparse fieldsets if possible, etc)

---

<div class="post-metadata">

**Author:** ![Sahil\_Paudel](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sahil_paudel/32/17179_2.png) [@Sahil\_Paudel](https://discuss.emberjs.com/u/Sahil_Paudel)\
**Post date:** [September 22, 2020, 2:52pm UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/5 "2020-09-22T14:52:34Z")

</div>

Can you please suggest some examples (existing) I am new to ember and it has been overwhelming so far.

Thanks

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [September 24, 2020, 2:52pm UTC](https://discuss.emberjs.com/t/uncaught-rangeerror-maximum-call-stack-size-exceeded/18228/6 "2020-09-24T14:52:15Z")

</div>

First you want to make sure your API has pagination support, or it can be added. Then you’ll need to change your front-end request(s) to use pagination depending on the strategy.

Could you share the model hook from the route that’s breaking? Presumably it’s using `store.query` or `store.findAll`. You’d basically want to use `store.query` and add pagination parameters to the query.

At a high level that would look like this:

- [wire up query params on your route](https://guides.emberjs.com/release/routing/query-params/#toc_opting-into-a-full-transition), with `refreshModel: true` so when you change the page it refetches the model
- [change your route model hook](https://guides.emberjs.com/release/routing/query-params/#toc_opting-into-a-full-transition) to use `store.query('<modelname'>, params)` (this will use the query params from your route e.g. page to make the request to the backend
- wire up the same query param(s) [on the controller](https://guides.emberjs.com/release/routing/query-params/#toc_specifying-query-parameters) and default page to `1`
- add UI controls for pagination to the page, and have them update the controller property that corresponds to the query param e.g. `page`

So the way this will work is like this:

- when the route is first entered it will fetch the first page (since page is defaulting to 1)
- when the user navigates to the next page it will update the controller property
- … which will update the query param
- … which will cause a “full transition” in the route
- … which will re-run the model hook with the new “params” e.g. the new page number
- … which will send a request to your API with `page=2` or the equivalent of that
- … which will resolve with the data and re-render the page with the second page of data

This will mean that each request is much smaller, completely sidestepping any serialization or memory concerns. Binding the page to a query param also ensures that a refresh or a link to the page will always show the same page of results and it won’t be reset to the first page every time.