Add a more complex logger to Flipper UI Browser

Reviewed By: passy, lblasa

Differential Revision: D50223987

fbshipit-source-id: 108e1753b555c7d7b32d3fc2408c2f8efcbadb4d

desktop/flipper-server-core/src/fb-stubs/constants.tsx

@@ -8,3 +8,4 @@
  */
 
 export const isFBBuild: boolean = false;
+export const GRAPH_SECRET = '';

desktop/flipper-server-core/src/server/startServer.tsx

@@ -21,6 +21,7 @@ import {FlipperServerCompanionEnv} from 'flipper-server-companion';
 import {validateAuthToken} from '../app-connectivity/certificate-exchange/certificate-utils';
 import {tracker} from '../tracker';
 import {EnvironmentInfo, isProduction} from 'flipper-common';
+import {GRAPH_SECRET} from '../fb-stubs/constants';
 
 type Config = {
   port: number;
@@ -147,7 +148,11 @@ async function startHTTPServer(
       ? path.join(config.staticPath, config.entry)
       : path.join(config.staticPath, 'loading.html');
     fs.readFile(resource, (_err, content) => {
-      res.end(content);
+      const processedContent = content
+        .toString()
+        .replace('GRAPH_SECRET_REPLACE_ME', GRAPH_SECRET)
+        .replace('FLIPPER_APP_VERSION_REPLACE_ME', environmentInfo.appVersion);
+      res.end(processedContent);
     });
   });
 

desktop/flipper-ui-browser/src/fb-stubs/Logger.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 {Logger, LoggerArgs, NoopLogger} from 'flipper-common';
+
+const naiveLogger: Logger = {
+  track(...args: [any, any, any?, any?]) {
+    console.warn('(skipper track)', args);
+  },
+  trackTimeSince(...args: [any, any, any?]) {
+    console.warn('(skipped trackTimeSince)', args);
+  },
+  debug(...args: any[]) {
+    console.debug(...args);
+  },
+  error(...args: any[]) {
+    console.error(...args);
+    console.warn('(skipped error reporting)');
+  },
+  warn(...args: any[]) {
+    console.warn(...args);
+    console.warn('(skipped error reporting)');
+  },
+  info(...args: any[]) {
+    console.info(...args);
+  },
+};
+
+export function init(args?: LoggerArgs): Logger {
+  if (args && args.isTest) {
+    return new NoopLogger();
+  } else {
+    return naiveLogger;
+  }
+}

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

@@ -16,6 +16,8 @@ declare global {
       entryPoint: string;
       debug: boolean;
     };
+    GRAPH_SECRET: string;
+    FLIPPER_APP_VERSION: string;
 
     flipperShowMessage?(message: string): void;
     flipperHideMessage?(): void;

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

@@ -7,7 +7,12 @@
  * @format
  */
 
-import {getLogger, Logger, setLoggerInstance} from 'flipper-common';
+import {
+  getLogger,
+  getStringFromErrorLike,
+  setLoggerInstance,
+} from 'flipper-common';
+import {init as initLogger} from './fb-stubs/Logger';
 import {initializeRenderHost} from './initializeRenderHost';
 import {createFlipperServer, FlipperServerState} from 'flipper-server-client';
 
@@ -19,6 +24,8 @@ if (loadingContainer) {
 let cachedFile: {name: string; data: string} | undefined;
 let cachedDeepLinkURL: string | undefined;
 
+const logger = initLogger();
+
 async function start() {
   // @ts-ignore
   electronRequire = function (path: string) {
@@ -30,7 +37,6 @@ async function start() {
     };
   };
 
-  const logger = createDelegatedLogger();
   setLoggerInstance(logger);
 
   const params = new URL(location.href).searchParams;
@@ -54,7 +60,7 @@ async function start() {
       }
     }
 
-    console.info(
+    getLogger().info(
       '[flipper-client][ui-browser] Token is available: ',
       token?.length != 0,
     );
@@ -79,7 +85,8 @@ async function start() {
     cachedDeepLinkURL = deeplinkURL.toString();
   }
 
-  console.info('[flipper-client][ui-browser] Create WS client');
+  getLogger().info('[flipper-client][ui-browser] Create WS client');
+
   const flipperServer = await createFlipperServer(
     location.hostname,
     parseInt(location.port, 10),
@@ -87,39 +94,43 @@ async function start() {
     (state: FlipperServerState) => {
       switch (state) {
         case FlipperServerState.CONNECTING:
-          console.info('[flipper-client] Connecting to server');
+          getLogger().info('[flipper-client] Connecting to server');
           window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
-          console.info('[flipper-client] Connection established with server');
+          getLogger().info(
+            '[flipper-client] Connection established with server',
+          );
           window.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:
-          console.info('[flipper-client] Disconnected from server');
+          getLogger().info('[flipper-client] Disconnected from server');
           window.flipperShowMessage?.('Waiting for server...');
           break;
       }
     },
   );
 
-  console.info('[flipper-client][ui-browser] WS client connected');
+  getLogger().info('[flipper-client][ui-browser] WS client connected');
 
   flipperServer.on('server-log', (logEntry) => {
-    console[logEntry.type](
+    getLogger()[logEntry.type](
       `[${logEntry.namespace}] (${new Date(
         logEntry.time,
       ).toLocaleTimeString()}): ${logEntry.msg}`,
     );
   });
 
-  console.info('[flipper-client][ui-browser] Waiting for server connection');
+  getLogger().info(
+    '[flipper-client][ui-browser] Waiting for server connection',
+  );
   await flipperServer.connect();
-  console.info(
+  getLogger().info(
     '[flipper-client][ui-browser] Connected to server, get configuration',
   );
   const flipperServerConfig = await flipperServer.exec('get-config');
 
-  console.info(
+  getLogger().info(
     '[flipper-client][ui-browser] Configuration obtained, initialise render host',
   );
 
@@ -131,16 +142,21 @@ async function start() {
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
   window.flipperHideMessage?.();
 
-  console.info('[flipper-client][ui-browser] UI initialised');
+  getLogger().info('[flipper-client][ui-browser] UI initialised');
+  logger.track('success-rate', 'flipper-ui-browser-started', {value: 1});
 }
 
 start().catch((e) => {
-  console.error('Failed to start flipper-ui-browser', e);
+  getLogger().error('Failed to start flipper-ui-browser', e);
+  logger.track('success-rate', 'flipper-ui-browser-started', {
+    value: 0,
+    error: getStringFromErrorLike(e),
+  });
   window.flipperShowMessage?.('Failed to start UI with error: ' + e);
 });
 
 async function initializePWA() {
-  console.log('[PWA] Initialization');
+  getLogger().info('[PWA] Initialization');
 
   let rehydrated = false;
   const openFileIfAny = () => {
@@ -171,22 +187,22 @@ async function initializePWA() {
     navigator.serviceWorker
       .register('/service-worker.js')
       .then(() => {
-        console.log('[PWA] Service Worker has been registered');
+        getLogger().info('[PWA] Service Worker has been registered');
       })
       .catch((e) => {
-        console.error('[PWA] failed to register Service Worker', e);
+        getLogger().error('[PWA] failed to register Service Worker', e);
       });
   }
 
   if ('launchQueue' in window) {
-    console.log('[PWA] File Handling API is supported');
+    getLogger().debug('[PWA] File Handling API is supported');
 
     // @ts-ignore
     window.launchQueue.setConsumer(async (launchParams) => {
       if (!launchParams || !launchParams.files) {
         return;
       }
-      console.log('[PWA] Attempt to to open a file');
+      getLogger().debug('[PWA] Attempt to to open a file');
       for (const file of launchParams.files) {
         const blob = await file.getFile();
         blob.handle = file;
@@ -203,72 +219,20 @@ async function initializePWA() {
     console.warn('[PWA] File Handling API is not supported');
   }
 
-  console.log('[PWA] Add before install prompt listener');
+  getLogger().debug('[PWA] Add before install prompt listener');
   window.addEventListener('beforeinstallprompt', (e) => {
     // Prevent Chrome 67 and earlier from automatically showing the prompt.
     e.preventDefault();
     // Stash the event so it can be triggered later.
     // @ts-ignore
     global.PWAppInstallationEvent = e;
-    console.log('[PWA] Installation event has been captured');
+    getLogger().info('[PWA] Installation event has been captured');
   });
 
   window.addEventListener('storeRehydrated', () => {
-    console.info('[PWA] Store is rehydrated');
+    getLogger().info('[PWA] Store is rehydrated');
     rehydrated = true;
     openFileIfAny();
     openURLIfAny();
   });
 }
-
-// getLogger() is not  yet created when the electron app starts.
-// we can't create it here yet, as the real logger is wired up to
-// the redux store and the rest of the world. So we create a delegating logger
-// that uses a simple implementation until the real one comes available.
-function createDelegatedLogger(): Logger {
-  const naiveLogger: Logger = {
-    track(...args: [any, any, any?, any?]) {
-      console.warn('(skipper track)', args);
-    },
-    trackTimeSince(...args: [any, any, any?]) {
-      console.warn('(skipped trackTimeSince)', args);
-    },
-    debug(...args: any[]) {
-      console.debug(...args);
-    },
-    error(...args: any[]) {
-      console.error(...args);
-      console.warn('(skipped error reporting)');
-    },
-    warn(...args: any[]) {
-      console.warn(...args);
-      console.warn('(skipped error reporting)');
-    },
-    info(...args: any[]) {
-      console.info(...args);
-    },
-  };
-  // will be overwrittingen later
-  setLoggerInstance(naiveLogger);
-
-  return {
-    track() {
-      // noop
-    },
-    trackTimeSince() {
-      // noop
-    },
-    debug(...args: any[]) {
-      getLogger().debug(...args);
-    },
-    error(...args: any[]) {
-      getLogger().error(...args);
-    },
-    warn(...args: any[]) {
-      getLogger().warn(...args);
-    },
-    info(...args: any[]) {
-      getLogger().info(...args);
-    },
-  };
-}

desktop/static/index.web.dev.html

@@ -137,6 +137,9 @@
         window.flipperShowMessage = showMessage;
         window.flipperHideMessage = hideMessage;
 
+        window.GRAPH_SECRET = 'GRAPH_SECRET_REPLACE_ME';
+        window.FLIPPER_APP_VERSION = 'FLIPPER_APP_VERSION_REPLACE_ME';
+
         const params = new URL(location.href).searchParams;
         let token = params.get('token');
         if (!token) {

desktop/static/index.web.html

@@ -70,7 +70,7 @@
 
         const root = document.getElementById('root');
         const troubleshootBox = document.getElementById('troubleshoot');
-        
+
         function showMessage(text) {
           troubleshootBox.innerText = text;
 
@@ -86,6 +86,9 @@
         window.flipperShowMessage = showMessage;
         window.flipperHideMessage = hideMessage;
 
+        window.GRAPH_SECRET = 'GRAPH_SECRET_REPLACE_ME';
+        window.FLIPPER_APP_VERSION = 'FLIPPER_APP_VERSION_REPLACE_ME';
+
         // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
         try {
           if (window.flipperConfig.theme === 'dark') {