jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a more complex logger to Flipper UI Browser

Browse Source 
Reviewed By: passy, lblasa

Differential Revision: D50223987

fbshipit-source-id: 108e1753b555c7d7b32d3fc2408c2f8efcbadb4d
This commit is contained in:
Andrey Goncharov
2023-10-16 09:27:50 -07:00
committed by Facebook GitHub Bot
parent 8a11043f37
commit ee7736caee
7 changed files with 95 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

7
desktop/flipper-server-core/src/server/startServer.tsx
View File

@@ -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);
});
});

41
desktop/flipper-ui-browser/src/fb-stubs/Logger.tsx Normal file
View File

@@ -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;
}
}

2
desktop/flipper-ui-browser/src/global.tsx
View File

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

112
desktop/flipper-ui-browser/src/index.tsx
View File

@@ -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);
},
};
}

3
desktop/static/index.web.dev.html
View File

@@ -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) {

5
desktop/static/index.web.html
View File

@@ -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') {