Remove the previous misplaced log tailer

Summary: The log tailer is already defined in flipper-common, use that instead.

Reviewed By: passy

Differential Revision: D48524909

fbshipit-source-id: 1c0674276f08893ea80dc2fc9f8b45679f33e93e

desktop/flipper-common/src/index.tsx

@@ -20,6 +20,7 @@ export {
   setLoggerInstance,
   NoopLogger,
 } from './utils/Logger';
+export * from './utils/LoggerTailer';
 export * from './server-types';
 export * from './companion-types';
 export * from './ServerAddOn';

desktop/flipper-common/src/utils/LoggerTailer.tsx

@@ -7,6 +7,7 @@
  * @format
  */
 
+import {getStringFromErrorLike} from './errors';
 import {LoggerTypes} from './Logger';
 
 export const logLevels: LoggerTypes[] = ['debug', 'info', 'warn', 'error'];
@@ -42,10 +43,13 @@ export function initLogTailer() {
     const originalConsoleLogFunction = originalConsole[level];
     originalConsoleLogFunctions[level] = originalConsoleLogFunction;
     const overrideMethod = (...args: Array<unknown>) => {
-      const newConsoleLogFunction = originalConsoleLogFunctions[level];
+      const message = getStringFromErrorLike(args);
+      const newLevel = transformLogLevel(level, message);
+
+      const newConsoleLogFunction = originalConsoleLogFunctions[newLevel];
       const result = newConsoleLogFunction(...args);
       logTailers.forEach((handler) => {
-        handler(level, ...args);
+        handler(newLevel, ...args);
       });
       return result;
     };
@@ -54,3 +58,19 @@ export function initLogTailer() {
     originalConsole[level] = overrideMethod;
   }
 }
+
+function transformLogLevel(level: LoggerTypes, message: string) {
+  if (level === 'error') {
+    // Error comes from one of our dependencies and is not actionable
+    if (message.includes('ResizeObserver loop limit exceeded')) {
+      return 'warn';
+    }
+    // Axios will create rather unhelpful error messages which
+    // lead to unactionable tasks, e.g. T150636191
+    if (message.endsWith('Network Error')) {
+      return 'warn';
+    }
+  }
+
+  return level;
+}

desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx

@@ -20,7 +20,7 @@ import {Button, Dropdown, Menu, Checkbox} from 'antd';
 import {DownOutlined} from '@ant-design/icons';
 import {DeleteOutlined} from '@ant-design/icons';
 import CBuffer from 'cbuffer';
-import {addLogTailer} from '../consoleLogTailer';
+import {addLogTailer} from 'flipper-common';
 import {v4} from 'uuid';
 
 const MAX_DISPLAY_LOG_ITEMS = 1000;

desktop/flipper-ui-core/src/consoleLogTailer.tsx

@@ -1,68 +0,0 @@
-/**
- * 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 {getStringFromErrorLike, LoggerTypes} from 'flipper-common';
-
-const logLevels: LoggerTypes[] = ['debug', 'info', 'warn', 'error'];
-
-export type LogTailer = (level: LoggerTypes, ...data: Array<any>) => void;
-
-const logTailers: LogTailer[] = [];
-
-export function addLogTailer(handler: LogTailer) {
-  logTailers.push(handler);
-}
-
-export function initLogTailer() {
-  const originalConsole: {[key: string]: any} = console;
-  //store the raw console log functions here
-  const originalConsoleLogFunctions: {[key: string]: (...args: any) => void} =
-    {} as {
-      [key: string]: (...args: any) => void;
-    };
-  // React Devtools also patches the console methods:
-  // https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/console.js#L141
-  // Not using a proxy object here because it isn't compatible with their patching process.
-  // Instead replace the methods on the console itself.
-  // Doesn't matter who patches first, single thread means it will be consistent.
-  for (const level of logLevels) {
-    const originalConsoleLogFunction = originalConsole[level];
-    originalConsoleLogFunctions[level] = originalConsoleLogFunction;
-    const overrideMethod = (...args: Array<unknown>) => {
-      const message = getStringFromErrorLike(args);
-      const newLevel = transformLogLevel(level, message);
-
-      const newConsoleLogFunction = originalConsoleLogFunctions[newLevel];
-      const result = newConsoleLogFunction(...args);
-      logTailers.forEach((handler) => {
-        handler(newLevel, ...args);
-      });
-      return result;
-    };
-
-    overrideMethod.__FLIPPER_ORIGINAL_METHOD__ = originalConsoleLogFunction;
-    originalConsole[level] = overrideMethod;
-  }
-}
-
-function transformLogLevel(level: LoggerTypes, message: string) {
-  if (
-    level === 'error' &&
-    message.includes('ResizeObserver loop limit exceeded')
-  ) {
-    return 'warn';
-  }
-
-  // Axios will create rather unhelpful error messages which lead to unactionable tasks, e.g. T150636191
-  if (level === 'error' && message.endsWith('Network Error')) {
-    return 'warn';
-  }
-
-  return level;
-}

desktop/flipper-ui-core/src/startFlipperDesktop.tsx

@@ -9,7 +9,6 @@
 
 import {Provider} from 'react-redux';
 import {init as initLogger} from './fb-stubs/Logger';
-import {initLogTailer} from './consoleLogTailer';
 import {SandyApp} from './sandy-chrome/SandyApp';
 import {Persistor, persistStore} from 'redux-persist';
 import dispatcher from './dispatcher/index';
@@ -38,7 +37,7 @@ import styled from '@emotion/styled';
 import {CopyOutlined} from '@ant-design/icons';
 import {getVersionString} from './utils/versionString';
 import {PersistGate} from 'redux-persist/integration/react';
-import {setLoggerInstance, FlipperServer} from 'flipper-common';
+import {setLoggerInstance, FlipperServer, initLogTailer} from 'flipper-common';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {startGlobalErrorHandling} from './utils/globalErrorHandling';
 import {loadTheme} from './utils/loadTheme';