Hermes debugging websocket URL generates as IPv6, causes confusion/incompatibility in some environments

[bradjones1]

Summary

Using the Hermes debugger with Flipper is... tough. A number of issues in the Expo, React Native and Flipper projects demonstrate users have difficulty connecting to the Hermes debugger through Metro. (E.g. #15436 (comment), facebook/flipper#2615)

After a bit of sleuthing, it appears to me this could be, in part, due to Expo CLI calling Metro.runServer() without explicitly setting the host option. This results in the HttpServer starting in IPv6-capable environments listening on ::, which is then used by the inspector proxy to generate a Websocket URL on ws://[::1]. If you're running Expo/Metro inside of a Dockerized environment, for instance, and don't forward ports on IPv6, this can lead to a very WTF condition when trying to connect the Hermes debugger.

What platform(s) does this occur on?

Android, iOS

SDK Version

45

Environment

    System:
      OS: Linux 5.17 Debian GNU/Linux 10 (buster) 10 (buster)
      Shell: 5.0.3 - /bin/bash
    Binaries:
      Node: 16.13.1 - /tmp/yarn--1655147751222-0.8076740935194806/node
      Yarn: 1.22.15 - /tmp/yarn--1655147751222-0.8076740935194806/yarn
      npm: 8.1.2 - /usr/local/bin/npm
    npmPackages:
      expo: ^45.0.0 => 45.0.5 
      react: 17.0.2 => 17.0.2 
      react-dom: 17.0.2 => 17.0.2 
      react-native: 0.68.2 => 0.68.2 
      react-native-web: 0.17.7 => 0.17.7 
    Expo Workflow: bare

Reproducible demo

Start a Hermes Expo project. Navigate to http://localhost:8081 and observe webSocketDebuggerUrl is IPv6:

[
  {
    "id": "0-3",
    "description": "dating.kinksters.meet",
    "title": "Hermes React Native",
    "faviconUrl": "https://reactjs.org/favicon.ico",
    "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=%5B%3A%3A1%5D%3A8081%2Finspector%2Fdebug%3Fdevice%3D0%26page%3D3",
    "type": "node",
    "webSocketDebuggerUrl": "ws://[::1]:8081/inspector/debug?device=0&page=3",
    "vm": "Hermes"
  },
  ...
]

This requires Metro be accessible over IPv6.

if the IP is set explicitly to IPv4 when constructing the metro server, the URL is then ws://localhost:8081/....

[bradjones1]

I believe we could fix this by passing through the host at

expo/packages/@expo/cli/src/start/server/metro/instantiateMetro.ts

Lines 65 to 69 in 8a782c0

	const server = await Metro.runServer(metroConfig, {
	// @ts-expect-error: TODO: Update the types.
	hmrEnabled: true,
	websocketEndpoints,
	});

See related

https://github.com/facebook/metro/blob/ec47d592e7a6cf427cb0f04963d07f6001e47d95/packages/metro/src/index.flow.js#L56-L58

and

https://github.com/facebook/metro/blob/ec47d592e7a6cf427cb0f04963d07f6001e47d95/packages/metro/src/index.flow.js#L56-L58

[bradjones1]

Related-ish on Webstorm: https://youtrack.jetbrains.com/issue/WEB-56246

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.