Files
react-native/packages/dev-middleware/src/__tests__/InspectorDeviceUtils.js
T
Rob Hogan 69400be4fc dev-middleware: Only rewrite hostnames if they match device connection hosts (#47685)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47685

Currently, we assume any URL with a hostname of `10.0.2.2` or `10.0.3.2` (device-relative) is eligible for rewriting to `localhost` (frontend-relative), because we assume the device is an Android emulator. We rewrite these URLs between device and dev machine so that the rewritten URLs are reachable from the dev machine.

This diff narrows this logic so that we'll only rewrite URLs where the hostname matches the pre-existing list *and* this matches the host the device is actually connected on, according to its headers from the original connection.

The main motivation for this change is to unblock removing assumptions about device-reachable vs server-reachable hosts. Later in the stack we'll drop the hardcoded listing of `10.0.2.2` etc in favour of identifying URLs that target the dev server, from whatever network.

There's also an edge case fix here that `10.0.2.2` etc might actually refer to a remote LAN server, and not be an Android emulator's alias for for an emulator host.

Changelog:
[General][Fixed] RN DevTools: Don't assume 10.0.2.2 is an alias for localhost unless it's used to establish a connection to the server

Reviewed By: huntie

Differential Revision: D66058704

fbshipit-source-id: bad28717b0c9b1ca43e2ea3391cef13f87892e6c
2024-11-20 06:56:21 -08:00

176 lines
4.2 KiB
JavaScript

/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
* @oncall react_native
*/
import type {
ConnectRequest,
DisconnectRequest,
GetPagesRequest,
GetPagesResponse,
JSONSerializable,
MessageFromDevice,
MessageToDevice,
WrappedEvent,
} from '../inspector-proxy/types';
import nullthrows from 'nullthrows';
import WebSocket from 'ws';
export class DeviceAgent {
#ws: ?WebSocket;
#readyPromise: Promise<void>;
constructor(url: string, signal?: AbortSignal, host?: ?string) {
const ws = new WebSocket(url, {
// The mock server uses a self-signed certificate.
rejectUnauthorized: false,
...(host != null
? {
headers: {
Host: host,
},
}
: {}),
});
this.#ws = ws;
ws.on('message', data => {
this.__handle(JSON.parse(data.toString()));
});
if (signal != null) {
signal.addEventListener('abort', () => {
this.close();
});
}
this.#readyPromise = new Promise<void>((resolve, reject) => {
ws.once('open', () => {
resolve();
});
ws.once('error', error => {
reject(error);
});
});
}
__handle(message: MessageToDevice): void {}
send(message: MessageFromDevice) {
if (!this.#ws) {
return;
}
this.#ws.send(JSON.stringify(message));
}
ready(): Promise<void> {
return this.#readyPromise;
}
close() {
if (!this.#ws) {
return;
}
try {
this.#ws.terminate();
} catch {}
this.#ws = null;
}
sendWrappedEvent(pageId: string, event: JSONSerializable) {
this.send({
event: 'wrappedEvent',
payload: {
pageId,
wrappedEvent: JSON.stringify(event),
},
});
}
// $FlowIgnore[unsafe-getters-setters]
get socket(): WebSocket {
return nullthrows(this.#ws);
}
}
export class DeviceMock extends DeviceAgent {
// Empty handlers
+connect: JestMockFn<[message: ConnectRequest], void> = jest.fn();
+disconnect: JestMockFn<[message: DisconnectRequest], void> = jest.fn();
+getPages: JestMockFn<
[message: GetPagesRequest],
| GetPagesResponse['payload']
| Promise<GetPagesResponse['payload'] | void>
| void,
> = jest.fn();
+wrappedEvent: JestMockFn<[message: WrappedEvent], void> = jest.fn();
+wrappedEventParsed: JestMockFn<
[payload: {...WrappedEvent['payload'], wrappedEvent: JSONSerializable}],
void,
> = jest.fn();
__handle(message: MessageToDevice): void {
switch (message.event) {
case 'connect':
this.connect(message);
break;
case 'disconnect':
this.disconnect(message);
break;
case 'getPages':
const result = this.getPages(message);
this.#sendPayloadIfNonNull('getPages', result);
break;
case 'wrappedEvent':
this.wrappedEvent(message);
this.wrappedEventParsed({
...message.payload,
wrappedEvent: JSON.parse(message.payload.wrappedEvent),
});
break;
default:
(message: empty);
throw new Error(`Unhandled event ${message.event}`);
}
}
#sendPayloadIfNonNull<Event: MessageFromDevice['event']>(
event: Event,
maybePayload:
| MessageFromDevice['payload']
| Promise<MessageFromDevice['payload'] | void>
| void,
) {
if (maybePayload == null) {
return;
}
if (maybePayload instanceof Promise) {
// eslint-disable-next-line no-void
void maybePayload.then(payload => {
if (!payload) {
return;
}
// $FlowFixMe[incompatible-call] TODO(moti) Figure out the right way to type maybePayload generically
this.send({event, payload});
});
return;
}
// $FlowFixMe[incompatible-call] TODO(moti) Figure out the right way to type maybePayload generically
this.send({event, payload: maybePayload});
}
}
export async function createDeviceMock(
url: string,
signal: AbortSignal,
host?: ?string,
): Promise<DeviceMock> {
const device = new DeviceMock(url, signal, host);
await device.ready();
return device;
}