[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.)

[wfnuser]

This will my first time trying pull request to React. I hope it will work correctly. 😄😄
However I met some problem during developing with chrome. After I run the following code in Terminal.
yarn run test:chrome # Test Chrome extension

Chrome alerts

Failed to load extension from: .Manifest file is missing or unreadable.

I'm wondering how to solve it correctly. And finally I only debugged and tested my code in Firefox, but I think it will work in Chrome too.

[wfnuser]

[bvaughn]

Did you run yarn build (or yarn build:chrome) before running yarn test:chrome?

If you only ran yarn build:firefox then this would not have built the Chrome extension.

Otherwise, I don't know 😄

[hardikmodha]

@wfnuser It's all yours. 😃

[wfnuser]

@wfnuser It's all yours. 😃

Thanks. 😄

[wfnuser]

Did you run yarn build (or yarn build:chrome) before running yarn test:chrome?

If you only ran yarn build:firefox then this would not have built the Chrome extension.

Otherwise, I don't know 😄

Yep, I ran yarn build: chrome first. I'll try to figure the real problem there later.

[bvaughn]

Just to clarify, the command is yarn build:chrome (no space after the ":"). If you ran yarn build: chrome it would have failed (which could be the cause of the problem you're reporting).