React-instantsearch: Maximum call stack size exceeded. Related to cache ?

Created on 7 Apr 2020  ·  25Comments  ·  Source: algolia/react-instantsearch

Describe the bug 🐛

I got a 500 from SSR response. In my log I get RangeError: Maximum call stack size exceeded

To Reproduce 🔍

Infortunately, I have only this problem on production, not on staging or local.

If I restart my instance, everything back to normal. My memory was around 25%, I have a total o 2040 mo for my instance.

So I assume it's a problem on Algolia's cache.

Environment:

Next JS 9.3.4, Algolia javascript 4.1, ReactInstantSearch 6.4.0.

Never had the problem with Algolia 3.35.1 and ReactInstanceSearch 6.3.0

Additional context

14:30:24
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
14:30:24
at client.search (/usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:344:50)
14:30:24
at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29
14:30:24
at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)
picture YoannDelpierre
👍2

Most helpful comment

Feedback: I've identified the problem, and we are now working on the solution. Most likely will be deployed on only next Monday because it's Friday.

picture nunomaduro on 15 May 2020
🚀2 🎉2 ❤1 👍1

All 25 comments

Please make a reproducible example @YoannDelpierre, we have a template available for that purpose here. Thanks!

Haroenv picture Haroenv on 7 Apr 2020

Infortunately I can't, because it will expose my data.

{"log":"RangeError: Maximum call stack size exceeded\n","stream":"stderr","time":"2020-04-07T08:45:49.092543019Z"}
{"log":"    at String.replace (\u003canonymous\u003e)\n","stream":"stderr","time":"2020-04-07T08:45:49.092568066Z"}
{"log":"    at encode (/usr/src/app/node_modules/@algolia/transporter/dist/transporter.cjs.js:369:19)\n","stream":"stderr","time":"2020-04-07T08:45:49.09257121Z"}
{"log":"    at /usr/src/app/node_modules/@algolia/transporter/dist/transporter.cjs.js:385:21\n","stream":"stderr","time":"2020-04-07T08:45:49.092573699Z"}
{"log":"    at Array.map (\u003canonymous\u003e)\n","stream":"stderr","time":"2020-04-07T08:45:49.092576049Z"}
{"log":"    at Object.serializeQueryParameters (/usr/src/app/node_modules/@algolia/transporter/dist/transporter.cjs.js:385:10)\n","stream":"stderr","time":"2020-04-07T08:45:49.092578296Z"}
{"log":"    at /usr/src/app/node_modules/@algolia/client-search/dist/client-search.cjs.js:399:37\n","stream":"stderr","time":"2020-04-07T08:45:49.092580601Z"}
{"log":"    at Array.map (\u003canonymous\u003e)\n","stream":"stderr","time":"2020-04-07T08:45:49.092582675Z"}
{"log":"    at /usr/src/app/node_modules/@algolia/client-search/dist/client-search.cjs.js:396:34\n","stream":"stderr","time":"2020-04-07T08:45:49.092594457Z"}
{"log":"    at /usr/src/app/node_modules/react-instantsearch-core/dist/cjs/core/createInstantSearchManager.js:348:29\n","stream":"stderr","time":"2020-04-07T08:45:49.092596711Z"}
{"log":"    at Object.get (/usr/src/app/node_modules/@algolia/cache-common/dist/cache-common.cjs.js:43:27)\n","stream":"stderr","time":"2020-04-07T08:45:49.09259898Z"}

It seems I have an error on serialize my query parameters :(

YoannDelpierre picture YoannDelpierre on 7 Apr 2020

You can remove the appId & apiKey and use the credentials in the example I sent you @YoannDelpierre

Haroenv picture Haroenv on 7 Apr 2020

Problem is that it's coming after lots of requests. We reproduce the problem on a sandbox by spamming it. After 4k requests, we got the 500 and the log associated above.

YoannDelpierre picture YoannDelpierre on 7 Apr 2020

could you make clear and easy to reproduce instructions for that please? It seems quite related to your particular setup

Haroenv picture Haroenv on 7 Apr 2020
😕1

glad you found your solution @YoannDelpierre, can you explain what was the issue?

Haroenv picture Haroenv on 10 Apr 2020

hey @Haroenv , I'm using

    responsesCache: createInMemoryCache(),
    requestsCache: createInMemoryCache({ serializable: false })

Looks like the serializer does not like some requests 🤷‍♂️

YoannDelpierre picture YoannDelpierre on 10 Apr 2020

Very weird, I'd still love it if you could create a minimal reproduction for this. Cc @nunomaduro

Haroenv picture Haroenv on 10 Apr 2020

Hi @Haroenv, I finally got again the same problem as before.

It appears only after few days on production. One "better" thing today that it was the problem appears only on results when page parameters was out of range result

I can try to make a codesandbox, but we will have not the same env as we have in production (aws environment).

https://codesandbox.io/s/hidden-snowflake-8vflp my searchState based on configure object seems not working on my codesandbox 🤦 I should have 14 results and I got all of them.

YoannDelpierre picture YoannDelpierre on 14 Apr 2020

I am experiencing the exact same issue after getting many requests on the production site. I've had no issues while running in dev.

It is, as YoannDelpierre says, difficult to create a reproduction sandbox as it seems to happen when there are a lot of requests.

@Haroenv Has the official examples with next.js been load tested?

@YoannDelpierre Did you find a solution for this?

kjetilhau picture kjetilhau on 8 May 2020

@kjetilhau No I did not find a solution.. For now, I'm lucky, I deploy every day so my cache is cleaned. I think I got the problem around 10k requests.

One idea was to clear cache on SSR side, https://www.algolia.com/doc/api-client/getting-started/upgrade-guides/javascript/#the-clearcache-method

I think you're right, the official example has not been load tested.

@Haroenv can you check with your team to load test your next js example ? 🙏

YoannDelpierre picture YoannDelpierre on 8 May 2020
👍3

Tried using the null cache but still getting Maximum call stack size exceeded with only light traffic.

const searchClient = algoliasearch( 
    "xxx",  
    "xxx",  
    {   
        requestsCache: createNullCache(),   
        responsesCache: createNullCache()   
    }   
);
stuart-williams picture stuart-williams on 12 May 2020

@stuart-williams are you using next.js too ?

YoannDelpierre picture YoannDelpierre on 13 May 2020

@stuart-williams are you using next.js too ?

Yes we are using next.js

stuart-williams picture stuart-williams on 13 May 2020

@Haroenv @nunomaduro if you have free time for trying to test load your nextjs app 🙏

YoannDelpierre picture YoannDelpierre on 13 May 2020

I am off today. I will dive into this next Friday. @Haroenv Meanwhile maybe you can jump? Otherwise only Friday I will have time.

nunomaduro picture nunomaduro on 13 May 2020

I've looked into this before, but wasn't able to reproduce it. Is there a step-by-step to clone and some way to efficiently load-test it?

Haroenv picture Haroenv on 13 May 2020

We load test with Locust, python tool, on our side. We host our next.js app on AWS fargate.

YoannDelpierre picture YoannDelpierre on 13 May 2020

We test directly on your nextjs example with locust

image

We send around 1700 requests.

Do you have more detail on your side by reading logs ?

YoannDelpierre picture YoannDelpierre on 13 May 2020

Going to tackle this. Gonna get back to you guys once I find the problem.

nunomaduro picture nunomaduro on 14 May 2020
❤2 👍2

Feedback: I've identified the problem, and we are now working on the solution. Most likely will be deployed on only next Monday because it's Friday.

nunomaduro picture nunomaduro on 15 May 2020
🚀2 🎉2 ❤1 👍1

Thanks a lot @nunomaduro

Have a good week-end

YoannDelpierre picture YoannDelpierre on 15 May 2020

Thanks. Just bump my version and deploy soon 🤞

YoannDelpierre picture YoannDelpierre on 18 May 2020

@YoannDelpierre Tell me how it goes. 🤞

nunomaduro picture nunomaduro on 18 May 2020

@nunomaduro it's working, thanks a lot for your PR. We just did 6K requests and no error.

My memory is very stable right now.

YoannDelpierre picture YoannDelpierre on 18 May 2020
🚀2 ❤2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hatched-danny picture hatched-danny  ·  3Comments
rtman picture rtman  ·  5Comments
afgoulart picture afgoulart  ·  4Comments
flouc001 picture flouc001  ·  5Comments
itsmichaeldiego picture itsmichaeldiego  ·  4Comments