diff --git a/desktop/flipper-common/src/index.tsx b/desktop/flipper-common/src/index.tsx index 3d33a2d98..ef20b09a5 100644 --- a/desktop/flipper-common/src/index.tsx +++ b/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'; diff --git a/desktop/flipper-common/src/utils/LoggerTailer.tsx b/desktop/flipper-common/src/utils/LoggerTailer.tsx index 3d1fe3f53..98d50816b 100644 --- a/desktop/flipper-common/src/utils/LoggerTailer.tsx +++ b/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) => { - 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; +} diff --git a/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx b/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx index 65766907c..ee7911ca7 100644 --- a/desktop/flipper-ui-core/src/chrome/ConsoleLogs.tsx +++ b/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; diff --git a/desktop/flipper-ui-core/src/consoleLogTailer.tsx b/desktop/flipper-ui-core/src/consoleLogTailer.tsx deleted file mode 100644 index cbaa32f71..000000000 --- a/desktop/flipper-ui-core/src/consoleLogTailer.tsx +++ /dev/null @@ -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) => 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) => { - 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; -} diff --git a/desktop/flipper-ui-core/src/startFlipperDesktop.tsx b/desktop/flipper-ui-core/src/startFlipperDesktop.tsx index b19f9b5fa..c8c95a78e 100644 --- a/desktop/flipper-ui-core/src/startFlipperDesktop.tsx +++ b/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';