1942905 - perfcompare seems to randomly give "Minified React error #300" message

Status: RESOLVED FIXED

(Testing :: PerfCompare, defect, P2)

Description

[Kash Shampur [:kshampur] ⌚EST]

Attachment: image.png

attached an image, which has the folowing text:

"Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

More information about this error has been written to the Web Console."

this seems to happen randomly when I interact with the "Search results" textbox.

If I look at the console as suggested in the message I see the following

Error: Could not establish connection. Receiving end does not exist. metrics.js:10:32
Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 10
PageError.tsx:30:10
Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 11
PageError.tsx:30:10
Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 11
react-dom.production.min.js:189:29
React Router caught the following error during render Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 11
 
Object { componentStack: "\nQa@https://perf.compare/main.be6cd35e323f87dbed89.js:75:75629\nKa@https://perf.compare/main.be6cd35e323f87dbed89.js:75:75345\nSuspense\ndiv\n5684/l/<@https://perf.compare/main.be6cd35e323f87dbed89.js:2:10092\nju/s<@https://perf.compare/main.be6cd35e323f87dbed89.js:75:209754\nuC@https://perf.compare/main.be6cd35e323f87dbed89.js:102:459079\ndiv\n5684/l/<@https://perf.compare/main.be6cd35e323f87dbed89.js:2:10092\ns<@https://perf.compare/main.be6cd35e323f87dbed89.js:75:208999\nhC@https://perf.compare/main.be6cd35e323f87dbed89.js:102:460602\ndiv\n5684/l/<@https://perf.compare/main.be6cd35e323f87dbed89.js:2:10092\npu<@https://perf.compare/main.be6cd35e323f87dbed89.js:75:206382\ndiv\n5684/l/<@https://perf.compare/main.be6cd35e323f87dbed89.js:2:10092\npu<@https://perf.compare/main.be6cd35e323f87dbed89.js:75:206382\ndiv\ndR@https://perf.compare/main.be6cd35e323f87dbed89.js:102:516977\nBa@https://perf.compare/main.be6cd35e323f87dbed89.js:75:73411\nza@https://perf.compare/main.be6cd35e323f87dbed89.js:75:72629\nbs@https://perf.compare/main.be6cd35e323f87dbed89.js:75:81526\nYa@https://perf.compare/main.be6cd35e323f87dbed89.js:75:74788\ngs@https://perf.compare/main.be6cd35e323f87dbed89.js:75:78675\na@https://perf.compare/main.be6cd35e323f87dbed89.js:75:42938\nyn@https://perf.compare/main.be6cd35e323f87dbed89.js:75:20195\npn@https://perf.compare/main.be6cd35e323f87dbed89.js:75:19919\nbn@https://perf.compare/main.be6cd35e323f87dbed89.js:75:20327\nhO@https://perf.compare/main.be6cd35e323f87dbed89.js:102:576193\ns@https://perf.compare/main.be6cd35e323f87dbed89.js:2:1067310\nk@https://perf.compare/main.be6cd35e323f87dbed89.js:2:1068016" }
index.js:504:12

Comment 1

[Julien Wajsberg [:julienw]]

I reproduce 100% when, when inputting a text, the results go from "some results" to "no result", or the opposite.
For example from https://perf.compare/compare-results?baseRev=933bfbddaf61376385fb1efae72d62d81e6f8b91&baseRepo=mozilla-central&newRev=9025efff31e89eb8c305d20930e1d930ee945a31&newRepo=try&framework=15&search=applink_startup, if I type "'Android", I get results, but if I add some nonsense that matches nothing, then I get the error.

It would be good to try locally with a dev server to be able to debug.

Comment 2

[Nazım Can Altınova [:canova]]

I suspect it's because of an early return here:
https://github.com/mozilla/perfcompare/blob/a2917651017d6ef72c9935bf1c38acdb9127d3a4/src/components/CompareResults/TableContent.tsx#L177-L179
We have a few useMemo below it. And react gets mad once the number of used hooks are different between two renders.

Comment 3

[Julien Wajsberg [:julienw]]

(In reply to Nazım Can Altınova [:canova][:canaltinova on phabricator] from comment #2)

I suspect it's because of an early return here:
https://github.com/mozilla/perfcompare/blob/a2917651017d6ef72c9935bf1c38acdb9127d3a4/src/components/CompareResults/TableContent.tsx#L177-L179
We have a few useMemo below it. And react gets mad once the number of used hooks are different between two renders.

Ah I missed your message and I figured out the same thing :-)

Patch coming in!

Comment 4

[Julien Wajsberg [:julienw]]

Fixed and deployed in https://github.com/mozilla/perfcompare/pull/845