Uncaught RangeError: Maximum call stack size exceeded

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.

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)

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?

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

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)

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

Thanks

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, with refreshModel: true so when you change the page it refetches the model
  • change your route model hook 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 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.