[DevTools Bug]: "Message length exceeded maximum allowed length" when profiling a complex application

[joshkel]

Website or app

N/A

Repro steps

When profiling a complex, proprietary app, I regularly get an error message, "Message length exceeded maximum allowed length."

Steps to reproduce:

1. Within the Dev Tools, go to the Profiler tab.
2. Click the "Start Profiling" button.
3. Let the app run for a bit. Do some things in the app.
4. Click the "Stop Profiling" ("record") button.

At this point, the Chrome Dev Tools console logs an error:

contentScript.js:116 Uncaught Error: Message length exceeded maximum allowed length.
    at handleMessageFromPage (contentScript.js:116:10)

And the Profiler tab is stuck with the message, "Processing data... This should only take a minute."

The error is thrown from https://github.com/facebook/react/blob/64fe791be84ad04a4a1d005376ba5cf5701db9b7/packages/react-devtools-extensions/src/contentScript.js#L36

The last time this occurred, when breaking on exceptions at that line, JSON.stringify(event.data.payload).length reports 92074565. I can provide further information on the contents of the problematic event.data.payload if that would be helpful.

I apologize for the lack of a reproducible test case - it's a complex app (which is why I was looking into profiling), and I don't think I could simplify it down to a public test case while triggering the error.

How often does this bug happen?

Often

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[muhammadjufry]

I think I can do this, Can you assign this issue to me, please?

[greenlife-developer]

You sure can do this

[elliot-huffman]

Bumping. Any updates? I just had this happen to me and I can reproduce this. I can't post the code publicly because this is also an internal app but I am up for a screenshare or something to go through debugging it.

[PiTiLeZarD]

I think he couldn't do this ;) (teasing) but yeah I have the same issue now!

[fgatti675]

Yep, same here!

[pwbriggs]

@PiTiLeZarD @fgatti675 are either of you able to share a reproducible example?

[kaikun213]

Got the same issue, any updates? Is there a workaround?

[jorge-fernandes]

Also have this issue, albeit a slightly different stacktrace:

proxy.js:1 
 Uncaught Error: Message length exceeded maximum allowed length.
    at handleMessageFromPage (proxy.js:1:779)
handleMessageFromPage	@	proxy.js:1
postMessage (async)		
send	@	backendManager.js:1
(anonymous)	@	bridge.js:72
setTimeout (async)		
(anonymous)	@	bridge.js:79
setTimeout (async)		
send	@	bridge.js:168
(anonymous)	@	agent.js:405
emit	@	events.js:37
(anonymous)	@	bridge.js:136
listener	@	backendManager.js:1
postMessage (async)		
handleMessageFromDevtools	@	proxy.js:1

Unfortunately i can't also share a repro scenario as "complex application" is proprietary.

Got the same error with both versions 4.2.8 and 5.0.0 of the react devtools

[fgatti675]

@PiTiLeZarD @fgatti675 are either of you able to share a reproducible example?

Hi, we face this issue when debugging FireCMS. It is a fairly large project. It is all open source and can be run locally: https://github.com/firecmsco/firecms

If you would like to give it a try, running it should be as simple as yarn and yarn dev

[danielsgriffin]

I had the same issue in my program. In case it is useful to anyone: it turned out to be caused by a few runaway useEffects in my code that were constantly updating.

[Aidam1]

Any update on this? I have the same issue in my app.

[mgmrx]

We experience this issue in our application aswell. Without the help of the react profiler performance optimizations are almost impossible so we would highly appreciate a fix.

[rahulparmar339]

Experiencing same issue. Can someone please check this?

[Angelelz]

I just ran into this trying to profile a huge internal application and worked around it by reducing the number of components that I'm rendering (for example, don't map over the entire array but just a small slice). If you have bottlenecks in your application, they should still be visible when you profile the smaller version.