Stream server logs to browser

Summary: Makes Flipper Logs tab functional for Flipper Browser

Reviewed By: lblasa

Differential Revision: D37459924

fbshipit-source-id: 4ebf3d47fbbf90bb367e01986b12dec782b03c34

desktop/flipper-common/src/server-types.tsx

@@ -24,6 +24,7 @@ import {
   ProcessConfig,
   Settings,
 } from './settings';
+import {LoggerInfo} from './utils/Logger';
 
 // In the future, this file would deserve it's own package, as it doesn't really relate to plugins.
 // Since flipper-plugin however is currently shared among server, client and defines a lot of base types, leaving it here for now.
@@ -135,6 +136,7 @@ export type FlipperServerEvents = {
   };
   'plugins-server-add-on-message': ExecuteMessage;
   'download-file-update': DownloadFileUpdate;
+  'server-log': LoggerInfo;
 };
 
 export type IOSDeviceParams = {

desktop/flipper-server/src/index.tsx

@@ -72,7 +72,7 @@ const rootDir = argv.bundler
 const staticDir = path.join(rootDir, 'static');
 
 async function start() {
-  initializeLogger(staticDir);
+  const enhanceLogger = initializeLogger(staticDir);
 
   let keytar: any = undefined;
   try {
@@ -107,6 +107,11 @@ async function start() {
     keytar,
     'external',
   );
+
+  enhanceLogger((logEntry) => {
+    flipperServer.emit('server-log', logEntry);
+  });
+
   const companionEnv = await initCompanionEnv(flipperServer);
   if (argv.failFast) {
     flipperServer.on('server-state', ({state}) => {

desktop/flipper-server/src/logger.tsx

@@ -88,8 +88,15 @@ export function initializeLogger(staticDir: string) {
   const logger = createLogger();
   setLoggerInstance(logger);
 
+  let onConsoleEntry: ((entry: LoggerInfo) => void) | undefined;
+
   const file = fs.createWriteStream(path.join(staticDir, loggerOutputFile));
   consoleProxy((entry: LoggerInfo) => {
     file.write(`${JSON.stringify(entry)}\n`);
+    onConsoleEntry?.(entry);
   });
+
+  return (newOnConsoleEntry: (entry: LoggerInfo) => void) => {
+    onConsoleEntry = newOnConsoleEntry;
+  };
 }

desktop/flipper-ui-browser/src/index.tsx

@@ -45,6 +45,14 @@ async function start() {
     },
   );
 
+  flipperServer.on('server-log', (logEntry) => {
+    console[logEntry.type](
+      `[${logEntry.namespace}] (${new Date(
+        logEntry.time,
+      ).toLocaleTimeString()}): ${logEntry.msg}`,
+    );
+  });
+
   await flipperServer.connect();
   const flipperServerConfig = await flipperServer.exec('get-config');