Better error message format

Summary:
The existing error message was not in the centre and didn't give any possible remediation steps.

{F1015240268}

Reviewed By: passy

Differential Revision: D46394149

fbshipit-source-id: 09d450bef9df83c5b3af3ba49c7e0fafb81bfdce
This commit is contained in:
Lorenzo Blasa
2023-06-02 09:35:32 -07:00
committed by Facebook GitHub Bot
parent 80c201b10f
commit 353e51e2ea
3 changed files with 62 additions and 31 deletions

View File

@@ -231,8 +231,8 @@ async function start() {
start().catch((e) => {
console.error('Failed to start Flipper desktop', e);
document.getElementById('root')!.textContent =
'Failed to start Flipper desktop: ' + e;
document.getElementById('loading')!.textContent =
'Failed to start Flipper. ' + e;
});
function getStaticPath(appPath: string) {

View File

@@ -47,7 +47,11 @@ export function createFlipperServerWithSocket(
let initialConnectionTimeout: ReturnType<typeof setTimeout> | undefined =
setTimeout(() => {
reject(
new Error('Failed to connect to flipper-server in a timely manner'),
new Error(
`Failed to connect to the server in a timely manner.
It may be unresponsive. Run the following from the terminal
'lsof -nP -iTCP -sTCP:LISTEN | grep 52342' and kill the listed process, if any.`,
),
);
}, CONNECTION_TIMEOUT);

View File

@@ -1,32 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link id="flipper-theme-import" rel="stylesheet">
<link rel="stylesheet" href="graphiql/graphiql.css">
<link rel="stylesheet" href="vis/vis.min.css">
<title>Flipper</title>
</head>
<body>
<div id="root"></div>
<script>
global.electronRequire = window.require;
</script>
<script>
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try {
if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
document.getElementById('flipper-theme-import').href="themes/dark.css";
} else {
document.getElementById('flipper-theme-import').href="themes/light.css";
}
} catch(e) {
console.error("Failed to initialize theme", e);
document.getElementById('flipper-theme-import').href="themes/light.css";
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link id="flipper-theme-import" rel="stylesheet">
<link rel="stylesheet" href="graphiql/graphiql.css">
<link rel="stylesheet" href="vis/vis.min.css">
<title>Flipper</title>
<style>
#loading {
-webkit-app-region: drag;
z-index: 999999;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 50px;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #525252;
text-align: center;
}
</style>
</head>
<body>
<div id="root">
<div id="loading">
Loading...
</div>
</div>
<script>
global.electronRequire = window.require;
</script>
<script>
// load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
try {
if (JSON.parse(window.process.env.CONFIG).darkMode === 'dark') {
document.getElementById('flipper-theme-import').href = "themes/dark.css";
} else {
document.getElementById('flipper-theme-import').href = "themes/light.css";
}
</script>
<script src="bundle.js"></script>
</body>
} catch (e) {
console.error("Failed to initialize theme", e);
document.getElementById('flipper-theme-import').href = "themes/light.css";
}
</script>
<script src="bundle.js"></script>
</body>
</html>