-2

I have reviewed this thread about max call stack error. I am building a fairly large MERN-stack React application, and here is my own error that I'm receiving in chrome developer tools console:

enter image description here

These errors pop up from time to time when I toggle between pages in my application. The error is not consistent, and when I refresh chrome after the error occurred on, the page loads fine after the refresh. I am totally lost with regards to debugging this issue. The index.js:42, 23, and 96 are code that I did not write. My question is then, with regards to debugging:

(1) how can i view the call stack to see what it's filled with? can i see this somewhere in chrome dev tools?

(2) Can I install a react / chrome / developer debugger to debug this? what debugger would i want to use?

(3) any other thoughts on how to go about debugging this. In particular I don't understand what the call stack is.

I use redux in my react application, and the different pages of my website perform a lot of fetches for data of varying sizes from my database, if this info helps. Maybe I'm simply fetching too much data too quickly? Any help with this is greatly appreciated.

EDIT: In 2 separate screenshots (because I could not fit it all in one), I've shared the contents of the index.js referred to in the error messages. It looks like a loop is occurring between objEquiv and deepEqual functions calling each other, but I call these named functions in my application specifically.

enter image description here enter image description here

Canovice
  • 9,012
  • 22
  • 93
  • 211
  • 2
    index.js:96 is repeated multiple times at the top of your call stack. What is taking place at that line? It sounds like you have a component that is setting the state as a result of the state updating, causing an infinite loop. – chris.va.rao Apr 13 '19 at 19:55
  • my apps main src/index.js file is only 23 lines of code, and my models/index.js file is only 30 lines of code - i added my index.js file. – Canovice Apr 13 '19 at 19:58
  • 3
    please, share your code or create a fiddle. Don't add pictures. – gaetanoM Apr 13 '19 at 20:00
  • You’ll want to look at the index.js the browser is seeing instead – the JSX and such will be compiled out. Click the index.js:96 and index.js:23 links. – Ry- Apr 13 '19 at 20:01
  • If you use the debugger to stop on the stack overflow, what are the objects being compared? Do they look familiar? My guess is that there’s a circular reference being created somewhere. – Ry- May 04 '19 at 04:57

1 Answers1

1

This github post - https://github.com/nfl/react-helmet/issues/373 - is the solution. It appears to have been something related to my React Helmet usage.

Canovice
  • 9,012
  • 22
  • 93
  • 211