Flipper: Hermes Debugger - not discoverable

[usrbowe]

🐛 Bug Report

When I try to connect my fresh RN app 0.62 with latest Flipper 0.36, it will fail to discover my hermes on android emulator. Is there any extra setup needed?

I noticed that metro will start throwing this error every few seconds (I guess that's flipper hermes plugin pooling to discover)

Error: Unauthorized request from http://localhost:3000. This may happen because of a conflicting browser extension. Please try to disable it and try again.
    at getSecurityHeadersMiddleware (/Users/anonymous/Git/RN062/node_modules/@react-native-community/cli/build/commands/server/middleware/getSecurityHeadersMiddleware.js:19:10)
    at call (/Users/anonymous/Git/RN062/node_modules/connect/index.js:239:7)
    at next (/Users/anonymous/Git/RN062/node_modules/connect/index.js:183:5)
    at Function.handle (/Users/anonymous/Git/RN062/node_modules/connect/index.js:186:3)
    at handle (/Users/anonymous /Git/RN062/node_modules/connect/index.js:91:14)
    at call (/Users/anonymous/Git/RN062/node_modules/connect/index.js:239:7)
    at next (/Users/anonymous/Git/RN062/node_modules/connect/index.js:183:5)
    at Function.handle (/Users/anonymous/Git/RN062/node_modules/connect/index.js:186:3)
    at Server.app (/Users/anonymous/Git/RN062/node_modules/connect/index.js:51:37)
    at Server.emit (events.js:210:5)

I can see that Chrome itself is able to find hermes for debugging via /json request

To Reproduce

1. Install fresh React Native app
2. Enable Hermes and install to Android emulator
3. Open flipper and try the Hermes debug plugin

Environment

Flipper: 0.36.0
React Native: 0.62

---

One screenshot to describe the situation 😄

[15matias15]

Same here.

[cekkaewnumchai]

cc. @mweststrate, @nikoant

[mweststrate]

Could you check the locally installed version of @react-native-community/cli? It should be 4.5.1 at least (see this PR).

[15matias15]

At least that works I had "@react-native-community/cli": "version": "4.5.0", and now with 4.6.0 works, but I'm having this

even when I had hermes enable

project.ext.react = [
        enableHermes         : true,
]

[usrbowe]

Oh yes, problem solved. Once upgraded CLI this will show first:

And later once app is connected:

[usrbowe]

@15matias15 can try verify if running on Hermes, by logging this value: global.HermesInternal ?

[mweststrate]

You might need to trigger your RN to go into debug mode, by shaking or
opening the dev menu (using the button in the Flipper toolbar for example)

On Tue, Apr 7, 2020 at 1:06 PM Lukas Kurucz [e-mail]
wrote:

@15matias15 https://github.com/15matias15 can try verify if running on
Hermes, by logging this value: global.HermesInternal ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/flipper/issues/987#issuecomment-610347727,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBG2NY4NKYJZXZ5FA5LRLMJLVANCNFSM4MCXN6WA
.

[15matias15]

@usrbowe it's enable

  console.log(global.HermesInternal !== null);
  [Tue Apr 07 2020 14:56:56.979]  LOG      true

[usrbowe]

@15matias15 can you see your device listed here: http://localhost:8081/json ?

[15matias15]

@usrbowe thanks for your reply, This is wat i got on 8081

[
  {
    "id": "0-1",
    "description": "online.goldenticker.app",
    "title": "Hermes React Native",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=%5B%3A%3A%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D1",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::]:8081/inspector/debug?device=0&page=1",
    "vm": "Hermes"
  },
  {
    "id": "0--1",
    "description": "don't use",
    "title": "React Native Experimental (Improved Chrome Reloads)",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=%5B%3A%3A%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D-1",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::]:8081/inspector/debug?device=0&page=-1",
    "vm": "don't use"
  }
]

and now these is how looks hermes plugin on flipper

[Grohden]

My http://localhost:8081/json returns []
On Android it's working, the device connects to the flipper tab and it shows a console.
On IOS, enabling debug opens up a new browser tab for debug, and flipper doesn't show a console for debugging at hermes tab. HermesInternal is true btw, and since I use npx my RN cli is updated... Is there anything that I should be trying to be able to use flipper for debugging on IOS?

[usrbowe]

@Grohden For iOS, this is not the correct plugin to use. Hermes is currently only supported on Android. The Debug option is for "remote debugging" and is not currently supported within Flipper.

[Grohden]

@usrbowe oh well, that makes sense, I thought that hermes could be running on IOS cuz the global flag returned true..
Oh, it might have returned true because of the !== null, sorry bout that

[mweststrate]

Closing this issue to avoid too many different symptoms and cases to be discussed in the same issue :). If you run into this, please open a new issue