[react-devtools-extensions] Bug: Uncaught TypeError: Cannot read property 'sub' of undefined when navigating to plain-text pages

[ivan-aksamentov]

React Developer Tools: 4.4.0 f749045 (1/3/2020) from chrome webstore
Chromium: 81.0.4024.0 snapshot
Ubuntu: 18.04

Steps To Reproduce

1. Open chrome with React Developer Tools installed
2. Open developer console
3. In console settings (cogwheel in console's top right corner) check "Preserve log" checkbox (to make sure that the log is not overwritten on navigation)
4. Navigate to a React-enabled website, e.g. https://reactjs.org
5. Navigate to a plain-text page, such as https://reactjs.org/robots.txt

The current behavior

Error is printed in console:

backend.js:32 Uncaught TypeError: Cannot read property 'sub' of undefined
    at g (backend.js:32)
    at e (backend.js:8)
g @ backend.js:32
e @ backend.js:8
postMessage (async)
a @ contentScript.js:1
117 @ contentScript.js:1
n @ contentScript.js:1
(anonymous) @ contentScript.js:1
(anonymous) @ contentScript.js:1

where backend.js is a link to chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js

fmkadmapgofadopljbjfkapdkoienihi is an ID of React Developer Tools: I verified by opening chrome://extensions/ and performing page search for this ID.

The expected behavior

No errors

Notes

It's a convoluted usecase, but I thought it may help to catch bugs for more important ones.

I am not sure whether it's plain-text-ness of the page that is important, but that's how you can reproduce it.

The hypothesis is that dev tools do not expect HTML tree to disappear on navigation, or either extension enters a state where it cannot digest the plain text pages (and it probably shouldn't try).

^{P.S. Thanks for the refreshed extension, it makes dev experience so wonderful! ❤️}

[bvaughn]

Thanks for the detailed bug report!

I think this may have been an unintentional side effect of #17739 😓

[hardikmodha]

@bvaughn I would like to give it a try.

[bvaughn]

@hardikmodha This issue is all yours! 😄

I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

[wfnuser]

@bvaughn Hi. I am new to react and also would like to have a try. And actually I thought I have just finished the code and started to creating a PR... So may I take this? I have been struggling for it all night since I'm from the Eastern Hemisphere.

[bvaughn]

@wfnuser If you have already done work on this, sure. No harm in also sharing what you've done. @hardikmodha and you and collaborate. (Feel free to tag me on a PR too.)