diff --git a/desktop/flipper-server-core/src/fb-stubs/constants.tsx b/desktop/flipper-server-core/src/fb-stubs/constants.tsx index b79f09fe9..5c9967f66 100644 --- a/desktop/flipper-server-core/src/fb-stubs/constants.tsx +++ b/desktop/flipper-server-core/src/fb-stubs/constants.tsx @@ -8,3 +8,4 @@ */ export const isFBBuild: boolean = false; +export const GRAPH_SECRET = ''; diff --git a/desktop/flipper-server-core/src/server/startServer.tsx b/desktop/flipper-server-core/src/server/startServer.tsx index b0770e02f..4531de67a 100644 --- a/desktop/flipper-server-core/src/server/startServer.tsx +++ b/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); }); }); diff --git a/desktop/flipper-ui-browser/src/fb-stubs/Logger.tsx b/desktop/flipper-ui-browser/src/fb-stubs/Logger.tsx new file mode 100644 index 000000000..085174fe0 --- /dev/null +++ b/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; + } +} diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx index 5726c1831..849b40a32 100644 --- a/desktop/flipper-ui-browser/src/global.tsx +++ b/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; diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx index 26ee55d70..2833d01cf 100644 --- a/desktop/flipper-ui-browser/src/index.tsx +++ b/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); - }, - }; -} diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html index 6114d95aa..90aa871b8 100644 --- a/desktop/static/index.web.dev.html +++ b/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) { diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html index 08b9b2b5c..d21b6b231 100644 --- a/desktop/static/index.web.html +++ b/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') {