[0.76] Use Metro terminal reporter for dev-middleware logs (#46646)

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -14,6 +14,7 @@ import type {Reporter} from 'metro/src/lib/reporting';
 import type {TerminalReportableEvent} from 'metro/src/lib/TerminalReporter';
 import typeof TerminalReporter from 'metro/src/lib/TerminalReporter';
 
+import createDevMiddlewareLogger from '../../utils/createDevMiddlewareLogger';
 import isDevServerRunning from '../../utils/isDevServerRunning';
 import loadMetroConfig from '../../utils/loadMetroConfig';
 import {logger} from '../../utils/logger';
@@ -98,6 +99,11 @@ async function runServer(
     );
   }
 
+  let reportEvent: (event: TerminalReportableEvent) => void;
+  const terminal = new Terminal(process.stdout);
+  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+  const terminalReporter = new ReporterImpl(terminal);
+
   const {
     middleware: communityMiddleware,
     websocketEndpoints: communityWebsocketEndpoints,
@@ -111,13 +117,9 @@ async function runServer(
   const {middleware, websocketEndpoints} = createDevMiddleware({
     projectRoot,
     serverBaseUrl: devServerUrl,
-    logger,
+    logger: createDevMiddlewareLogger(terminalReporter),
   });
 
-  let reportEvent: (event: TerminalReportableEvent) => void;
-  const terminal = new Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
   const reporter: Reporter = {
     update(event: TerminalReportableEvent) {
       terminalReporter.update(event);

packages/community-cli-plugin/src/utils/createDevMiddlewareLogger.js

@@ -0,0 +1,44 @@
+/**
+ * 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 TerminalReporter from 'metro/src/lib/TerminalReporter';
+
+type LoggerFn = (...message: $ReadOnlyArray<string>) => void;
+
+/**
+ * Create a dev-middleware logger object that will emit logs via Metro's
+ * terminal reporter.
+ */
+export default function createDevMiddlewareLogger(
+  reporter: TerminalReporter,
+): $ReadOnly<{
+  info: LoggerFn,
+  error: LoggerFn,
+  warn: LoggerFn,
+}> {
+  return {
+    info: makeLogger(reporter, 'info'),
+    warn: makeLogger(reporter, 'warn'),
+    error: makeLogger(reporter, 'error'),
+  };
+}
+
+function makeLogger(
+  reporter: TerminalReporter,
+  level: 'info' | 'warn' | 'error',
+): LoggerFn {
+  return (...data: Array<mixed>) =>
+    reporter.update({
+      type: 'unstable_server_log',
+      level,
+      data,
+    });
+}