From 4ff9279a0b8f70f033adc308b15e1f6c4e04992f Mon Sep 17 00:00:00 2001 From: Lorenzo Blasa Date: Fri, 18 Aug 2023 07:59:51 -0700 Subject: [PATCH] Offline troubleshoot when server disconnects Summary: If there server disconnects, we used to show a red box message on the lower left section of the screen. It didn't say much other than the server had disconnected. If you are aware of what the server is, then you may try to manually restart it. Instead of doing that, a much better experience is to show the no connection troubleshoot with the button to start the server or with instructions on how to achieve this. Reviewed By: antonk52 Differential Revision: D48467308 fbshipit-source-id: 0ffded95789c7548d9f1e1a9127409e02e72ab8c --- desktop/flipper-ui-browser/src/HMRClient.tsx | 2 +- desktop/flipper-ui-browser/src/global.tsx | 5 +- desktop/flipper-ui-browser/src/index.tsx | 12 +- .../src/initializeRenderHost.tsx | 2 +- desktop/static/index.web.dev.html | 130 ++++++++++++++++-- desktop/static/index.web.html | 128 ++++++++++++++++- desktop/static/offline.html | 24 +++- 7 files changed, 275 insertions(+), 28 deletions(-) diff --git a/desktop/flipper-ui-browser/src/HMRClient.tsx b/desktop/flipper-ui-browser/src/HMRClient.tsx index f4de7d9b1..ad76b730e 100644 --- a/desktop/flipper-ui-browser/src/HMRClient.tsx +++ b/desktop/flipper-ui-browser/src/HMRClient.tsx @@ -270,7 +270,7 @@ function showCompileError() { // Symbolicating compile errors is wasted effort // because the stack trace is meaningless: (error as any).preventSymbolication = true; - window.flipperShowError?.(message); + window.flipperShowMessage?.(message); throw error; } diff --git a/desktop/flipper-ui-browser/src/global.tsx b/desktop/flipper-ui-browser/src/global.tsx index f927c0c4b..21158a317 100644 --- a/desktop/flipper-ui-browser/src/global.tsx +++ b/desktop/flipper-ui-browser/src/global.tsx @@ -17,7 +17,8 @@ declare global { debug: boolean; }; - flipperShowError?(error: string): void; - flipperHideError?(): void; + flipperShowMessage?(message: string): void; + flipperHideMessage?(): void; + flipperShowNoConnection?(): void; } } diff --git a/desktop/flipper-ui-browser/src/index.tsx b/desktop/flipper-ui-browser/src/index.tsx index f836700b5..164e1bf39 100644 --- a/desktop/flipper-ui-browser/src/index.tsx +++ b/desktop/flipper-ui-browser/src/index.tsx @@ -47,13 +47,13 @@ async function start() { (state: FlipperServerState) => { switch (state) { case FlipperServerState.CONNECTING: - window.flipperShowError?.('Connecting to server...'); + window.flipperShowMessage?.('Connecting to server...'); break; case FlipperServerState.CONNECTED: - window?.flipperHideError?.(); + window?.flipperHideMessage?.(); break; case FlipperServerState.DISCONNECTED: - window?.flipperShowError?.('Lost connection to server'); + window?.flipperShowNoConnection?.(); break; } }, @@ -78,17 +78,17 @@ async function start() { // This prevent issues where the render host is referred at module initialisation level, // but not set yet, which might happen when using normal imports. // TODO: remove - window.flipperShowError?.('Connected to Flipper Server successfully'); + window.flipperShowMessage?.('Connected to Flipper Server successfully'); // @ts-ignore // eslint-disable-next-line import/no-commonjs require('flipper-ui-core').startFlipperDesktop(flipperServer); - window.flipperHideError?.(); + window.flipperHideMessage?.(); } start().catch((e) => { console.error('Failed to start flipper-ui-browser', e); - window.flipperShowError?.('Failed to start flipper-ui-browser: ' + e); + window.flipperShowMessage?.('Failed to start flipper-ui-browser: ' + e); }); async function initializePWA() { diff --git a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx b/desktop/flipper-ui-browser/src/initializeRenderHost.tsx index 4decaff5f..3e82cc1ce 100644 --- a/desktop/flipper-ui-browser/src/initializeRenderHost.tsx +++ b/desktop/flipper-ui-browser/src/initializeRenderHost.tsx @@ -169,7 +169,7 @@ export function initializeRenderHost( ); }, restartFlipper() { - window.flipperShowError?.( + window.flipperShowMessage?.( 'Flipper settings have changed, please restart flipper server for the changes to take effect', ); }, diff --git a/desktop/static/index.web.dev.html b/desktop/static/index.web.dev.html index 8d27031d5..b90fee0e4 100644 --- a/desktop/static/index.web.dev.html +++ b/desktop/static/index.web.dev.html @@ -21,7 +21,7 @@ } +
+
+ Flipper is not running in the background + +

It can be started by clicking the button below.

+
+ +
+
+

+ Flipper will automatically reload once the connection is re-established. +

+

If is taking a bit longer than it should, you can manually start Flipper.

+

From the terminal, please run:

+ +
+
+

shell

+
+
+

> open -a 'Flipper' --args '--server'

+
+
+
+
+
-
+
Connecting...
@@ -56,6 +136,39 @@ let suppressErrors = false; let connected = false; + // Listen to changes in the network state, reload when online. + // This handles the case when the device is completely offline + // i.e. no network connection. + window.addEventListener('online', () => { + window.location.reload(); + }); + + // Check if the server is responding & reload the page if it is. + // This handles the case when the device is online, but the server + // is offline or misbehaving. + async function checkNetworkAndReload() { + try { + const response = await fetch('.'); + if (response.status >= 200 && response.status < 500) { + window.location.reload(); + return; + } + } catch { + // Unable to connect to the server, ignore. + } + window.setTimeout(checkNetworkAndReload, 2500); + } + + function showNoConnection() { + const root = document.getElementById('root'); + root.remove(); + + const troubleshoot = document.getElementById('troubleshoot'); + troubleshoot.style.display = 'flex'; + + checkNetworkAndReload(); + } + const params = new URL(location.href).searchParams; let token = params.get('token'); if (!token) { @@ -73,7 +186,7 @@ if (typeof message.event === 'string') { switch (message.event) { case 'hasErrors': { - openError(message.payload); + showMessage(message.payload); suppressErrors = true; break; } @@ -90,10 +203,10 @@ socket.addEventListener('error', (e) => { if (!connected) { - openError('Socket failed to connect. Is the server running? Have you provided a valid authentication token?'); + showMessage('Socket failed to connect. Is the server running? Have you provided a valid authentication token?'); } else { - openError('Socket failed with error.'); + showMessage('Socket failed with error.'); } suppressErrors = true; @@ -103,7 +216,7 @@ connected = true; }) - function openError(text) { + function showMessage(text) { if (suppressErrors) { return; } @@ -113,7 +226,8 @@ box.textContent = text; } } - window.flipperShowError = openError; + window.flipperShowMessage = showMessage; + window.flipperShowNoConnection = showNoConnection; // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases) try { @@ -132,7 +246,7 @@ script.src = window.flipperConfig.entryPoint; script.onerror = (e) => { - openError('Failed to load entry point. Check Chrome console for more info.'); + showMessage('Failed to load entry point. Check Chrome console for more info.'); }; document.body.appendChild(script); diff --git a/desktop/static/index.web.html b/desktop/static/index.web.html index 3a1e68d9f..5aa5ed20b 100644 --- a/desktop/static/index.web.html +++ b/desktop/static/index.web.html @@ -21,7 +21,7 @@ }