@react-native/dev-middleware 0.73.0 → 0.73.3

package/dist/inspector-proxy/Device.js.flow

@@ -0,0 +1,97 @@
+/**
+ * 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 {
+  DebuggerRequest,
+  GetScriptSourceRequest,
+  MessageFromDevice,
+  MessageToDevice,
+  Page,
+  SetBreakpointByUrlRequest,
+} from "./types";
+
+import DeviceEventReporter from "./DeviceEventReporter";
+import WS from "ws";
+import type { EventReporter } from "../types/EventReporter";
+
+type DebuggerInfo = {
+  // Debugger web socket connection
+  socket: WS,
+  // If we replaced address (like '10.0.2.2') to localhost we need to store original
+  // address because Chrome uses URL or urlRegex params (instead of scriptId) to set breakpoints.
+  originalSourceURLAddress?: string,
+  prependedFilePrefix: boolean,
+  pageId: string,
+  userAgent: string | null,
+};
+
+/**
+ * Device class represents single device connection to Inspector Proxy. Each device
+ * can have multiple inspectable pages.
+ */
+declare export default class Device {
+  _id: string;
+  _name: string;
+  _app: string;
+  _deviceSocket: WS;
+  _pages: Array<Page>;
+  _debuggerConnection: ?DebuggerInfo;
+  _lastConnectedReactNativePage: ?Page;
+  _isReloading: boolean;
+  _lastGetPagesMessage: string;
+  _scriptIdToSourcePathMapping: Map<string, string>;
+  _projectRoot: string;
+  _deviceEventReporter: ?DeviceEventReporter;
+  constructor(
+    id: string,
+    name: string,
+    app: string,
+    socket: WS,
+    projectRoot: string,
+    eventReporter: ?EventReporter
+  ): void;
+  getName(): string;
+  getApp(): string;
+  getPagesList(): Array<Page>;
+  handleDebuggerConnection(
+    socket: WS,
+    pageId: string,
+    metadata: $ReadOnly<{
+      userAgent: string | null,
+    }>
+  ): void;
+  handleDuplicateDeviceConnection(newDevice: Device): void;
+  _handleMessageFromDevice(message: MessageFromDevice): void;
+  _sendMessageToDevice(message: MessageToDevice): void;
+  _setPagesPolling(): void;
+  _newReactNativePage(page: Page): void;
+  _processMessageFromDevice(
+    payload: { method: string, params: { sourceMapURL: string, url: string } },
+    debuggerInfo: DebuggerInfo
+  ): void;
+  _interceptMessageFromDebugger(
+    req: DebuggerRequest,
+    debuggerInfo: DebuggerInfo,
+    socket: WS
+  ): boolean;
+  _processDebuggerSetBreakpointByUrl(
+    req: SetBreakpointByUrlRequest,
+    debuggerInfo: DebuggerInfo
+  ): void;
+  _processDebuggerGetScriptSource(
+    req: GetScriptSourceRequest,
+    socket: WS
+  ): void;
+  _mapToDevicePageId(pageId: string): string;
+  _tryParseHTTPURL(url: string): ?URL;
+  _fetchText(url: URL): Promise<string>;
+  _sendErrorToDebugger(message: string): void;
+}

package/dist/inspector-proxy/DeviceEventReporter.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ *
+ * @format
+ */
+
+import type { EventReporter } from "../types/EventReporter";
+import TTLCache from "@isaacs/ttlcache";
+type PendingCommand = {
+  method: string;
+  requestOrigin: "proxy" | "debugger";
+  requestTime: number;
+  metadata: RequestMetadata;
+};
+type DeviceMetadata = Readonly<{
+  appId: string;
+  deviceId: string;
+  deviceName: string;
+}>;
+type RequestMetadata = Readonly<{
+  pageId: string | null;
+  frontendUserAgent: string | null;
+}>;
+declare class DeviceEventReporter {
+  _eventReporter: EventReporter;
+  _pendingCommands: TTLCache<number, PendingCommand>;
+  _metadata: DeviceMetadata;
+  constructor(eventReporter: EventReporter, metadata: DeviceMetadata);
+  logRequest(
+    req: Readonly<{ id: number; method: string }>,
+    origin: "debugger" | "proxy",
+    metadata: RequestMetadata
+  ): void;
+  logResponse(
+    res: Readonly<{ id: number; error?: { message: string; data?: unknown } }>,
+    origin: "device" | "proxy",
+    metadata: Readonly<{
+      pageId: string | null;
+      frontendUserAgent: string | null;
+    }>
+  ): void;
+  logConnection(
+    connectedEntity: "debugger",
+    metadata: Readonly<{ pageId: string; frontendUserAgent: string | null }>
+  ): void;
+  logDisconnection(disconnectedEntity: "device" | "debugger"): void;
+  _logExpiredCommand(pendingCommand: PendingCommand): void;
+}
+export default DeviceEventReporter;

package/dist/inspector-proxy/DeviceEventReporter.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+var _ttlcache = _interopRequireDefault(require("@isaacs/ttlcache"));
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+/**
+ * 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.
+ *
+ *
+ * @format
+ */
+
+class DeviceEventReporter {
+  _pendingCommands = new _ttlcache.default({
+    ttl: 10000,
+    dispose: (command, id, reason) => {
+      if (reason === "delete" || reason === "set") {
+        // TODO: Report clobbering ('set') using a dedicated error code
+        return;
+      }
+      this._logExpiredCommand(command);
+    },
+  });
+  constructor(eventReporter, metadata) {
+    this._eventReporter = eventReporter;
+    this._metadata = metadata;
+  }
+  logRequest(req, origin, metadata) {
+    this._pendingCommands.set(req.id, {
+      method: req.method,
+      requestOrigin: origin,
+      requestTime: Date.now(),
+      metadata,
+    });
+  }
+  logResponse(res, origin, metadata) {
+    const pendingCommand = this._pendingCommands.get(res.id);
+    if (!pendingCommand) {
+      this._eventReporter.logEvent({
+        type: "debugger_command",
+        protocol: "CDP",
+        requestOrigin: null,
+        method: null,
+        status: "coded_error",
+        errorCode: "UNMATCHED_REQUEST_ID",
+        responseOrigin: "proxy",
+        timeSinceStart: null,
+        appId: this._metadata.appId,
+        deviceId: this._metadata.deviceId,
+        deviceName: this._metadata.deviceName,
+        pageId: metadata.pageId,
+        frontendUserAgent: metadata.frontendUserAgent,
+      });
+      return;
+    }
+    const timeSinceStart = Date.now() - pendingCommand.requestTime;
+    this._pendingCommands.delete(res.id);
+    if (res.error) {
+      let { message } = res.error;
+      if ("data" in res.error) {
+        message += ` (${String(res.error.data)})`;
+      }
+      this._eventReporter.logEvent({
+        type: "debugger_command",
+        requestOrigin: pendingCommand.requestOrigin,
+        method: pendingCommand.method,
+        protocol: "CDP",
+        status: "coded_error",
+        errorCode: "PROTOCOL_ERROR",
+        errorDetails: message,
+        responseOrigin: origin,
+        timeSinceStart,
+        appId: this._metadata.appId,
+        deviceId: this._metadata.deviceId,
+        deviceName: this._metadata.deviceName,
+        pageId: pendingCommand.metadata.pageId,
+        frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+      });
+      return;
+    }
+    this._eventReporter.logEvent({
+      type: "debugger_command",
+      protocol: "CDP",
+      requestOrigin: pendingCommand.requestOrigin,
+      method: pendingCommand.method,
+      status: "success",
+      responseOrigin: origin,
+      timeSinceStart,
+      appId: this._metadata.appId,
+      deviceId: this._metadata.deviceId,
+      deviceName: this._metadata.deviceName,
+      pageId: pendingCommand.metadata.pageId,
+      frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+    });
+  }
+  logConnection(connectedEntity, metadata) {
+    this._eventReporter.logEvent({
+      type: "connect_debugger_frontend",
+      status: "success",
+      appId: this._metadata.appId,
+      deviceName: this._metadata.deviceName,
+      deviceId: this._metadata.deviceId,
+      pageId: metadata.pageId,
+      frontendUserAgent: metadata.frontendUserAgent,
+    });
+  }
+  logDisconnection(disconnectedEntity) {
+    const eventReporter = this._eventReporter;
+    if (!eventReporter) {
+      return;
+    }
+    const errorCode =
+      disconnectedEntity === "device"
+        ? "DEVICE_DISCONNECTED"
+        : "DEBUGGER_DISCONNECTED";
+    for (const pendingCommand of this._pendingCommands.values()) {
+      this._eventReporter.logEvent({
+        type: "debugger_command",
+        protocol: "CDP",
+        requestOrigin: pendingCommand.requestOrigin,
+        method: pendingCommand.method,
+        status: "coded_error",
+        errorCode,
+        responseOrigin: "proxy",
+        timeSinceStart: Date.now() - pendingCommand.requestTime,
+        appId: this._metadata.appId,
+        deviceId: this._metadata.deviceId,
+        deviceName: this._metadata.deviceName,
+        pageId: pendingCommand.metadata.pageId,
+        frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+      });
+    }
+    this._pendingCommands.clear();
+  }
+  _logExpiredCommand(pendingCommand) {
+    this._eventReporter.logEvent({
+      type: "debugger_command",
+      protocol: "CDP",
+      requestOrigin: pendingCommand.requestOrigin,
+      method: pendingCommand.method,
+      status: "coded_error",
+      errorCode: "TIMED_OUT",
+      responseOrigin: "proxy",
+      timeSinceStart: Date.now() - pendingCommand.requestTime,
+      appId: this._metadata.appId,
+      deviceId: this._metadata.deviceId,
+      deviceName: this._metadata.deviceName,
+      pageId: pendingCommand.metadata.pageId,
+      frontendUserAgent: pendingCommand.metadata.frontendUserAgent,
+    });
+  }
+}
+var _default = DeviceEventReporter;
+exports.default = _default;

package/dist/inspector-proxy/DeviceEventReporter.js.flow

@@ -0,0 +1,65 @@
+/**
+ * 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
+ */
+
+import type { EventReporter } from "../types/EventReporter";
+import TTLCache from "@isaacs/ttlcache";
+
+type PendingCommand = {
+  method: string,
+  requestOrigin: "proxy" | "debugger",
+  requestTime: number,
+  metadata: RequestMetadata,
+};
+
+type DeviceMetadata = $ReadOnly<{
+  appId: string,
+  deviceId: string,
+  deviceName: string,
+}>;
+
+type RequestMetadata = $ReadOnly<{
+  pageId: string | null,
+  frontendUserAgent: string | null,
+}>;
+
+declare class DeviceEventReporter {
+  _eventReporter: EventReporter;
+  _pendingCommands: TTLCache<number, PendingCommand>;
+  _metadata: DeviceMetadata;
+  constructor(eventReporter: EventReporter, metadata: DeviceMetadata): void;
+  logRequest(
+    req: $ReadOnly<{ id: number, method: string, ... }>,
+    origin: "debugger" | "proxy",
+    metadata: RequestMetadata
+  ): void;
+  logResponse(
+    res: $ReadOnly<{
+      id: number,
+      error?: { message: string, data?: mixed },
+      ...
+    }>,
+    origin: "device" | "proxy",
+    metadata: $ReadOnly<{
+      pageId: string | null,
+      frontendUserAgent: string | null,
+    }>
+  ): void;
+  logConnection(
+    connectedEntity: "debugger",
+    metadata: $ReadOnly<{
+      pageId: string,
+      frontendUserAgent: string | null,
+    }>
+  ): void;
+  logDisconnection(disconnectedEntity: "device" | "debugger"): void;
+  _logExpiredCommand(pendingCommand: PendingCommand): void;
+}
+
+declare export default DeviceEventReporter;

package/dist/inspector-proxy/InspectorProxy.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ *
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import type {
+  JsonPagesListResponse,
+  JsonVersionResponse,
+  Page,
+  PageDescription,
+} from "./types";
+import type { EventReporter } from "../types/EventReporter";
+import type { Experiments } from "../types/Experiments";
+import type { IncomingMessage, ServerResponse } from "http";
+import WS from "ws";
+import Device from "./Device";
+export interface InspectorProxyQueries {
+  getPageDescriptions(): Array<PageDescription>;
+}
+/**
+ * Main Inspector Proxy class that connects JavaScript VM inside Android/iOS apps and JS debugger.
+ */
+declare class InspectorProxy implements InspectorProxyQueries {
+  _projectRoot: string;
+  _serverBaseUrl: string;
+  _devices: Map<string, Device>;
+  _deviceCounter: number;
+  _eventReporter: null | undefined | EventReporter;
+  _experiments: Experiments;
+  constructor(
+    projectRoot: string,
+    serverBaseUrl: string,
+    eventReporter: null | undefined | EventReporter,
+    experiments: Experiments
+  );
+  getPageDescriptions(): Array<PageDescription>;
+  processRequest(
+    request: IncomingMessage,
+    response: ServerResponse,
+    next: ($$PARAM_0$$: null | undefined | Error) => unknown
+  ): void;
+  createWebSocketListeners(): { [path: string]: WS.Server };
+  _buildPageDescription(
+    deviceId: string,
+    device: Device,
+    page: Page
+  ): PageDescription;
+  _sendJsonResponse(
+    response: ServerResponse,
+    object: JsonPagesListResponse | JsonVersionResponse
+  ): void;
+  _createDeviceConnectionWSServer(): ws$WebSocketServer;
+  _createDebuggerConnectionWSServer(): ws$WebSocketServer;
+}
+export default InspectorProxy;

package/dist/inspector-proxy/InspectorProxy.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+exports.default = void 0;
+var _url = _interopRequireDefault(require("url"));
+var _ws = _interopRequireDefault(require("ws"));
+var _Device = _interopRequireDefault(require("./Device"));
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+/**
+ * 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.
+ *
+ *
+ * @format
+ * @oncall react_native
+ */
+
+const debug = require("debug")("Metro:InspectorProxy");
+const WS_DEVICE_URL = "/inspector/device";
+const WS_DEBUGGER_URL = "/inspector/debug";
+const PAGES_LIST_JSON_URL = "/json";
+const PAGES_LIST_JSON_URL_2 = "/json/list";
+const PAGES_LIST_JSON_VERSION_URL = "/json/version";
+const INTERNAL_ERROR_CODE = 1011;
+/**
+ * Main Inspector Proxy class that connects JavaScript VM inside Android/iOS apps and JS debugger.
+ */
+class InspectorProxy {
+  // Root of the project used for relative to absolute source path conversion.
+
+  /** The base URL to the dev server from the developer machine. */
+
+  // Maps device ID to Device instance.
+
+  // Internal counter for device IDs -- just gets incremented for each new device.
+  _deviceCounter = 0;
+  constructor(projectRoot, serverBaseUrl, eventReporter, experiments) {
+    this._projectRoot = projectRoot;
+    this._serverBaseUrl = serverBaseUrl;
+    this._devices = new Map();
+    this._eventReporter = eventReporter;
+    this._experiments = experiments;
+  }
+  getPageDescriptions() {
+    // Build list of pages from all devices.
+    let result = [];
+    Array.from(this._devices.entries()).forEach(([deviceId, device]) => {
+      result = result.concat(
+        device
+          .getPagesList()
+          .map((page) => this._buildPageDescription(deviceId, device, page))
+      );
+    });
+    return result;
+  }
+
+  // Process HTTP request sent to server. We only respond to 2 HTTP requests:
+  // 1. /json/version returns Chrome debugger protocol version that we use
+  // 2. /json and /json/list returns list of page descriptions (list of inspectable apps).
+  // This list is combined from all the connected devices.
+  processRequest(request, response, next) {
+    if (
+      request.url === PAGES_LIST_JSON_URL ||
+      request.url === PAGES_LIST_JSON_URL_2
+    ) {
+      this._sendJsonResponse(response, this.getPageDescriptions());
+    } else if (request.url === PAGES_LIST_JSON_VERSION_URL) {
+      this._sendJsonResponse(response, {
+        Browser: "Mobile JavaScript",
+        "Protocol-Version": "1.1",
+      });
+    } else {
+      next();
+    }
+  }
+  createWebSocketListeners() {
+    return {
+      [WS_DEVICE_URL]: this._createDeviceConnectionWSServer(),
+      [WS_DEBUGGER_URL]: this._createDebuggerConnectionWSServer(),
+    };
+  }
+
+  // Converts page information received from device into PageDescription object
+  // that is sent to debugger.
+  _buildPageDescription(deviceId, device, page) {
+    const { host, protocol } = new URL(this._serverBaseUrl);
+    const webSocketScheme = protocol === "https:" ? "wss" : "ws";
+    const webSocketUrlWithoutProtocol = `${host}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
+    // For now, `/json/list` returns the legacy built-in `devtools://` URL, to
+    // preserve existing handling by Flipper. This may return a placeholder in
+    // future -- please use the `/open-debugger` endpoint.
+    const devtoolsFrontendUrl =
+      `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&${webSocketScheme}=` +
+      encodeURIComponent(webSocketUrlWithoutProtocol);
+    return {
+      id: `${deviceId}-${page.id}`,
+      description: page.app,
+      title: page.title,
+      faviconUrl: "https://reactjs.org/favicon.ico",
+      devtoolsFrontendUrl,
+      type: "node",
+      webSocketDebuggerUrl: `${webSocketScheme}://${webSocketUrlWithoutProtocol}`,
+      vm: page.vm,
+      deviceName: device.getName(),
+    };
+  }
+
+  // Sends object as response to HTTP request.
+  // Just serializes object using JSON and sets required headers.
+  _sendJsonResponse(response, object) {
+    const data = JSON.stringify(object, null, 2);
+    response.writeHead(200, {
+      "Content-Type": "application/json; charset=UTF-8",
+      "Cache-Control": "no-cache",
+      "Content-Length": data.length.toString(),
+      Connection: "close",
+    });
+    response.end(data);
+  }
+
+  // Adds websocket handler for device connections.
+  // Device connects to /inspector/device and passes device and app names as
+  // HTTP GET params.
+  // For each new websocket connection we parse device and app names and create
+  // new instance of Device class.
+  _createDeviceConnectionWSServer() {
+    const wss = new _ws.default.Server({
+      noServer: true,
+      perMessageDeflate: true,
+    });
+    // $FlowFixMe[value-as-type]
+    wss.on("connection", async (socket, req) => {
+      try {
+        const fallbackDeviceId = String(this._deviceCounter++);
+        const query = _url.default.parse(req.url || "", true).query || {};
+        const deviceId = query.device || fallbackDeviceId;
+        const deviceName = query.name || "Unknown";
+        const appName = query.app || "Unknown";
+        const oldDevice = this._devices.get(deviceId);
+        const newDevice = new _Device.default(
+          deviceId,
+          deviceName,
+          appName,
+          socket,
+          this._projectRoot,
+          this._eventReporter
+        );
+        if (oldDevice) {
+          oldDevice.handleDuplicateDeviceConnection(newDevice);
+        }
+        this._devices.set(deviceId, newDevice);
+        debug(
+          `Got new connection: name=${deviceName}, app=${appName}, device=${deviceId}`
+        );
+        socket.on("close", () => {
+          this._devices.delete(deviceId);
+          debug(`Device ${deviceName} disconnected.`);
+        });
+      } catch (e) {
+        console.error("error", e);
+        socket.close(INTERNAL_ERROR_CODE, e?.toString() ?? "Unknown error");
+      }
+    });
+    return wss;
+  }
+
+  // Returns websocket handler for debugger connections.
+  // Debugger connects to webSocketDebuggerUrl that we return as part of page description
+  // in /json response.
+  // When debugger connects we try to parse device and page IDs from the query and pass
+  // websocket object to corresponding Device instance.
+  _createDebuggerConnectionWSServer() {
+    const wss = new _ws.default.Server({
+      noServer: true,
+      perMessageDeflate: false,
+    });
+    // $FlowFixMe[value-as-type]
+    wss.on("connection", async (socket, req) => {
+      try {
+        const query = _url.default.parse(req.url || "", true).query || {};
+        const deviceId = query.device;
+        const pageId = query.page;
+        if (deviceId == null || pageId == null) {
+          throw new Error("Incorrect URL - must provide device and page IDs");
+        }
+        const device = this._devices.get(deviceId);
+        if (device == null) {
+          throw new Error("Unknown device with ID " + deviceId);
+        }
+        device.handleDebuggerConnection(socket, pageId, {
+          userAgent: req.headers["user-agent"] ?? null,
+        });
+      } catch (e) {
+        console.error(e);
+        socket.close(INTERNAL_ERROR_CODE, e?.toString() ?? "Unknown error");
+        this._eventReporter?.logEvent({
+          type: "connect_debugger_frontend",
+          status: "error",
+          error: e,
+        });
+      }
+    });
+    return wss;
+  }
+}
+exports.default = InspectorProxy;