[DevTools Bug]: App not recognized in Firefox, but works in Chrome #26860

Azeirah · 2023-05-26T12:03:19Z

Website or app

Repro steps

On both Firefox 103 and 104 the react devtools extension says: "This page doesn't appear to be using React".

On the most recent version of Chrome it's working just fine.

I cannot share the project since it's a private project unfortunately, but I suspect this is a regression introduced with the recent #26765

Especially since the devtools were working perfectly fine until maybe one or two weeks ago.

It does work in incognito mode in Firefox.

How often does this bug happen?

Every time

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

github-actions · 2023-05-26T12:03:33Z

@Azeirah: We're sorry you've seen this error. ❤️

It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

hoxyq · 2023-05-26T12:10:20Z

Hey @Azeirah, thanks for reporting this.

Can you please specify the version of the extension you are using in Firefox?

Azeirah · 2023-05-26T12:13:49Z

It's version 4.27.8

hoxyq · 2023-05-26T17:14:01Z

It's version 4.27.8

I cannot reproduce it with Firefox both v113.0.2 and v104.0, so its probably something wrong on your end. If you can share more about your setup, I can try to help you with fixing that.

Azeirah · 2023-05-30T07:32:35Z

I'm running a React webapp served by apache2.

Without sharing sensitive code, this is how the app is initialized

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <LiveInterface />
    <App
      themeMode={"light"}
      theme={{
        typography: { fontSize: 32 },
      }}
    >
      <SessionState />
      <ErrorBoundary>
        <Restart />
        <Router />
      </ErrorBoundary>
    </App>
  </Provider>
  // </React.StrictMode>
);

Package.json

    ...
    "react": "^18.2.0",
    ...

I followed the troubleshooting steps

I'm not on a file:// url, I'm using a local http server.
The web application is running React
I'm not on Codepen
The app is not in an iFrame, not in a Chrome extension, is not a react native application and is not otherwise unusual (it's just a webapp)
I'm not on Chrome v101 or earlier (I'm on Firefox)

I find it odd that the global __REACT_DEVTOOLS_GLOBAL_HOOK__ is also not being set. If I understand it correctly it should even get set on sites that don't use react, right? Because it's how react initializes communication and communicates with the devtools. If I go to stackoverflow.com for example, the global is set. After removing various plugins, the devtools do inject the global. The devtools still don't recognize the application however.

Another odd thing I noticed is that one page of the same application does work (different react application on the same http server).

So

http://mydevserver.test/app/APP_ID // doesn't work
http://mydevserver.test/admin // react-based backoffice, does work. Uses react ^17.0.2

I followed the trace in the firefox debugger:

It looks like hook.checkDCE is false? I am using create react app with hot reloading, the backoffice/admin page does not use hot reloading. Could that be the issue?

I would like to note again that it does work in incognito mode. This is on a different computer, same setup and same app.

hoxyq · 2023-06-01T10:35:02Z

I'm running a React webapp served by apache2.

Without sharing sensitive code, this is how the app is initialized
const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <LiveInterface />
    <App
      themeMode={"light"}
      theme={{
        typography: { fontSize: 32 },
      }}
    >
      <SessionState />
      <ErrorBoundary>
        <Restart />
        <Router />
      </ErrorBoundary>
    </App>
  </Provider>
  // </React.StrictMode>
);
Package.json
    ...
    "react": "^18.2.0",
    ...
I followed the troubleshooting steps

I'm not on a file:// url, I'm using a local http server.

The web application is running React

I'm not on Codepen

The app is not in an iFrame, not in a Chrome extension, is not a react native application and is not otherwise unusual (it's just a webapp)

I'm not on Chrome v101 or earlier (I'm on Firefox)

I find it odd that the global __REACT_DEVTOOLS_GLOBAL_HOOK__ is also not being set. If I understand it correctly it should even get set on sites that don't use react, right? Because it's how react initializes communication and communicates with the devtools. If I go to stackoverflow.com for example, the global is set. After removing various plugins, the devtools do inject the global. The devtools still don't recognize the application however.

Another odd thing I noticed is that one page of the same application does work (different react application on the same http server).

So
http://mydevserver.test/app/APP_ID // doesn't work
http://mydevserver.test/admin // react-based backoffice, does work. Uses react ^17.0.2
I followed the trace in the firefox debugger:

It looks like hook.checkDCE is false? I am using create react app with hot reloading, the backoffice/admin page does not use hot reloading. Could that be the issue?

I would like to note again that it does work in incognito mode. This is on a different computer, same setup and same app.

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

Azeirah · 2023-06-01T20:08:18Z

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

I thought so, but it's not the case. The plugin gives the notification that it can find react on the page, but the actual devtools don't load.

This is in Firefox incognito mode.

I'm also noticing that the devtools not loading seems almost random, on some page reloads they do load and on others they don't.

This gives me the feeling that there might be a race condition due to script loading order? If the plugin loads before React on the page, it works, if not, it won't.

hoxyq · 2023-06-02T10:51:20Z

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

I thought so, but it's not the case. The plugin gives the notification that it can find react on the page, but the actual devtools don't load.

This is in Firefox incognito mode.

I'm also noticing that the devtools not loading seems almost random, on some page reloads they do load and on others they don't.

This gives me the feeling that there might be a race condition due to script loading order? If the plugin loads before React on the page, it works, if not, it won't.

Too many factors that might influence it, this will be hard to debug without reproducible sample.
Can you try to run this application (which doesn't work with DevTools) locally (not on apache) and check if it works?

If problem is still present, I think you can create a repro from this point.

We still have different script injection logic for Firefox and not yet migrated to manifests v3 for Firefox, so this might be the reason why it works on Chrome and not on Firefox.

Azeirah · 2023-06-02T11:20:55Z

Can you try to run this application (which doesn't work with DevTools) locally (not on apache) and check if it works?

What do you mean by running it locally? I need a webserver to serve the application. With file:// it won't work according to the troubleshooting guide either, or am I misunderstanding you?

The application is running on a local webserver, jamezzv2.test is just a hostfile alias for localhost:somePort

hoxyq · 2023-06-02T11:42:05Z

Can you try to run this application (which doesn't work with DevTools) locally (not on apache) and check if it works?

What do you mean by running it locally? I need a webserver to serve the application. With file:// it won't work according to the troubleshooting guide either, or am I misunderstanding you?

The application is running on a local webserver, jamezzv2.test is just a hostfile alias for localhost:somePort

It should work with file://, troubleshooting guide specifies to toggle the required switch for Chrome.

Sorry I wasn't clear initially, just trying to check if there is a way to create a reproducible setup.

Azeirah · 2023-06-02T11:56:41Z

I recreated the app with file:// with a simple index.html importing the built application.

The devtools recognized the application 10 out of the 10 times that I reloaded it.

jrjake · 2023-06-12T02:05:18Z

Do you have Content-Security-Policy enabled? That will prevent extensions from running on your application in Firefox.

Azeirah · 2023-06-26T09:50:19Z

Do you have Content-Security-Policy enabled? That will prevent extensions from running on your application in Firefox.

This is not it ;( it's not enabled

Azeirah · 2023-07-25T07:49:01Z

I found the cause. The application I'm working is meant for different devices, and it turns out it's the simulated user-agent that causes the dev tools not to recognize the application.

I've been able to reproduce this in my development profile using Firefox dev edition as well as on Firefox stable edition on a clean profile.

Open page
Press ctrl+shift+m (mobile simulation, if on mac use dev tools to open mobile sim)
Add custom user agent, for example this one fails: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-G973U) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/14.2 Chrome/87.0.4280.141 Mobile Safari/537.36
Press enter to confirm
Dev tools do not recognize the page anymore after refresh

Without the custom user agent it consistently loads as expected.

hoxyq · 2023-07-25T14:53:32Z

I found the cause. The application I'm working is meant for different devices, and it turns out it's the simulated user-agent that causes the dev tools not to recognize the application.

I've been able to reproduce this in my development profile using Firefox dev edition as well as on Firefox stable edition on a clean profile.

Open page

Press ctrl+shift+m (mobile simulation, if on mac use dev tools to open mobile sim)

Add custom user agent, for example this one fails: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-G973U) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/14.2 Chrome/87.0.4280.141 Mobile Safari/537.36

Press enter to confirm

Dev tools do not recognize the page anymore after refresh

Without the custom user agent it consistently loads as expected.

Yeah, it is because of how we parse user agent.

This one fails because we look for Firefox here. This user agent doesn't state that it is Firefox-compatible, only Mozilla-compatible.

Can we close this issue? Seems like an expected behaviour.

Azeirah · 2023-07-25T17:01:04Z

If it's expected behavior, can this be added to the troubleshooting list at the very least? It took me weeks to figure out.

The one that's linked in this popup:

I understand that from a maintainer's perspective it's expected (user-agent != firefox), but from a developer's perspective it's not. From my perspective I'm just working on an application in mobile mode and suddenly the dev tools stop working. Why? No clue.

There's nothing documenting other than the code itself that the devtools are looking at your user-agent.

hoxyq · 2023-07-25T17:23:20Z

From my perspective I'm just working on an application in mobile mode and suddenly the dev tools stop working.

As you stated before, there were 2 different applications, and one of them patches user agent. I don't think this is a common case that should be listed somewhere in troubleshooting list.

I agree that we should display different popup with more readable explanation of whats going wrong. In your case, extension was trying to start, assuming that it was a Chromium-based browser and failed at some point. I don't know if you tried this before, but there is a way to debug extension in Firefox, and I think you will see errrors in this window's console.

I think the right way to handle this would be:

Remove this assumption. If we have some weird unexpected user agent, where each flag is false, we should display new popup.
Migrate to using navigator.userAgentData with a fallback to UA string parsing for Firefox.

Anyone interested in picking this up?

Azeirah · 2023-07-25T18:43:02Z

As you stated before, there were 2 different applications, and one of them patches user agent. I don't think this is a common case that should be listed somewhere in troubleshooting list.

This user agent is a default preset in Firefox mobile dev mode. This is not something I configured myself. That's why I expect it to happen to other people as well. IE, if you just press ctrl+shift+m and choose a device preset like the iPhone SE Firefox sets a user agent like the one I shared before.

This is the same as in Chrome, switching to the mobile emulator changes the user agent.

The logs are before turning on mobile sim and after.

hoxyq · 2023-07-25T20:23:06Z

As you stated before, there were 2 different applications, and one of them patches user agent. I don't think this is a common case that should be listed somewhere in troubleshooting list.

This user agent is a default preset in Firefox mobile dev mode. This is not something I configured myself. That's why I expect it to happen to other people as well. IE, if you just press ctrl+shift+m and choose a device preset like the iPhone SE Firefox sets a user agent like the one I shared before.

This is the same as in Chrome, switching to the mobile emulator changes the user agent.

The logs are before turning on mobile sim and after.

Oh, thanks for clarifying! We should definitely change this logic, and probably not depend on user agent string, when it comes to extension.

hoxyq · 2023-08-02T14:36:16Z

Hey @Azeirah, I've opened a PR with changes that should fix it - #27179.

Can you please try downloading and installing a custom build from here to check if it fixes the problem for you?

devtools.tgz should contain firefox-extension.zip archive, which then can be manually installed in Firefox. Please also consider removing original React DevTools extension from Firefox before that.

Azeirah · 2023-08-02T15:02:42Z

Hey @Azeirah, I've opened a PR with changes that should fix it - #27179.

Can you please try downloading and installing a custom build from here to check if it fixes the problem for you?

devtools.tgz should contain firefox-extension.zip archive, which then can be manually installed in Firefox. Please also consider removing original React DevTools extension from Firefox before that.

I will get back to you tomorrow when I'm at work. Thanks a lot for looking into it :)

Azeirah · 2023-08-03T06:10:09Z

It's working :)

hoxyq · 2023-08-03T14:34:10Z

It's working :)

Awesome, thanks for helping!

…n user agent (#27179) Fixes #26911, #26860. Currently, we are parsing user agent string to determine which browser is running the extension. This doesn't work well with custom user agents, and sometimes when user turns on mobile dev mode in Firefox, we stop resolving that this is a Firefox browser, extension starts to use Chrome API's and fails to inject. Changes: Since we are building different extensions for all supported browsers (Chrome, Firefox, Edge), we predefine env variables for browser resolution, which are populated in a build step.

…n user agent (facebook#27179) Fixes facebook#26911, facebook#26860. Currently, we are parsing user agent string to determine which browser is running the extension. This doesn't work well with custom user agents, and sometimes when user turns on mobile dev mode in Firefox, we stop resolving that this is a Firefox browser, extension starts to use Chrome API's and fails to inject. Changes: Since we are building different extensions for all supported browsers (Chrome, Firefox, Edge), we predefine env variables for browser resolution, which are populated in a build step.

Azeirah added Component: Developer Tools Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Bug labels May 26, 2023

github-actions bot added the Resolution: Needs More Information label May 26, 2023

github-actions bot assigned Azeirah May 26, 2023

github-actions bot closed this as completed May 26, 2023

hoxyq reopened this May 26, 2023

hoxyq mentioned this issue Aug 2, 2023

refactor: resolve browser via env variables based on build rather than user agent #27179

Merged

hoxyq self-assigned this Aug 2, 2023

Azeirah closed this as completed Aug 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools Bug]: App not recognized in Firefox, but works in Chrome #26860

[DevTools Bug]: App not recognized in Firefox, but works in Chrome #26860

Azeirah commented May 26, 2023 •

edited

Loading

github-actions bot commented May 26, 2023

hoxyq commented May 26, 2023

Azeirah commented May 26, 2023

hoxyq commented May 26, 2023 •

edited

Loading

Azeirah commented May 30, 2023 •

edited

Loading

hoxyq commented Jun 1, 2023 •

edited

Loading

Azeirah commented Jun 1, 2023

hoxyq commented Jun 2, 2023

Azeirah commented Jun 2, 2023 •

edited

Loading

hoxyq commented Jun 2, 2023

Azeirah commented Jun 2, 2023

jrjake commented Jun 12, 2023

Azeirah commented Jun 26, 2023

Azeirah commented Jul 25, 2023

hoxyq commented Jul 25, 2023 •

edited

Loading

Azeirah commented Jul 25, 2023 •

edited

Loading

hoxyq commented Jul 25, 2023

Azeirah commented Jul 25, 2023 •

edited

Loading

hoxyq commented Jul 25, 2023

hoxyq commented Aug 2, 2023

Azeirah commented Aug 2, 2023

Azeirah commented Aug 3, 2023

hoxyq commented Aug 3, 2023

[DevTools Bug]: App not recognized in Firefox, but works in Chrome #26860

[DevTools Bug]: App not recognized in Firefox, but works in Chrome #26860

Comments

Azeirah commented May 26, 2023 • edited Loading

Website or app

Repro steps

How often does this bug happen?

DevTools package (automated)

DevTools version (automated)

Error message (automated)

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

github-actions bot commented May 26, 2023

hoxyq commented May 26, 2023

Azeirah commented May 26, 2023

hoxyq commented May 26, 2023 • edited Loading

Azeirah commented May 30, 2023 • edited Loading

hoxyq commented Jun 1, 2023 • edited Loading

Azeirah commented Jun 1, 2023

hoxyq commented Jun 2, 2023

Azeirah commented Jun 2, 2023 • edited Loading

hoxyq commented Jun 2, 2023

Azeirah commented Jun 2, 2023

jrjake commented Jun 12, 2023

Azeirah commented Jun 26, 2023

Azeirah commented Jul 25, 2023

hoxyq commented Jul 25, 2023 • edited Loading

Azeirah commented Jul 25, 2023 • edited Loading

hoxyq commented Jul 25, 2023

Azeirah commented Jul 25, 2023 • edited Loading

hoxyq commented Jul 25, 2023

hoxyq commented Aug 2, 2023

Azeirah commented Aug 2, 2023

Azeirah commented Aug 3, 2023

hoxyq commented Aug 3, 2023

Azeirah commented May 26, 2023 •

edited

Loading

hoxyq commented May 26, 2023 •

edited

Loading

Azeirah commented May 30, 2023 •

edited

Loading

hoxyq commented Jun 1, 2023 •

edited

Loading

Azeirah commented Jun 2, 2023 •

edited

Loading

hoxyq commented Jul 25, 2023 •

edited

Loading

Azeirah commented Jul 25, 2023 •

edited

Loading

Azeirah commented Jul 25, 2023 •

edited

Loading