Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor splash screen error handling

Browse Source 
- Improve styling
- Add all error text dynamically to avoid showing on search results
- Reduce number of elements
- Show configuration errors
This commit is contained in:
James Lyne 2021-05-18 17:19:20 +01:00
parent 5716cb1e48
commit 8f0b1a5476
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -218,18 +218,18 @@
#splash__error-message { #splash__error-message {
font-family: monospace; font-family: monospace;
background-color: var(--background-error);
padding: 1rem 1.5rem;
border-radius: var(--border-radius);
margin-bottom: 1rem;
} }
#splash__error[aria-hidden=true] { #splash__error[aria-hidden=true] {
opacity: 0; opacity: 0;
} }
#splash__error-attempt:not(:empty):before { #app {
content:' ('; height: 100%;
}
#splash__error-attempt:not(:empty):after {
content:')';
} }
</style> </style>
</head> </head>
@ -264,9 +264,8 @@
</svg> </svg>
<div id="splash__error" role="alert" aria-hidden="true"> <div id="splash__error" role="alert" aria-hidden="true">
<span>Failed to load server configuration.</span>
<span id="splash__error-message"></span> <span id="splash__error-message"></span>
<span id="splash__error-retry">Retrying<span id="splash__error-attempt"></span>...</span> <span id="splash__error-retry"></span>
</div> </div>
</div> </div>

2
src/App.vue
View File

@ -57,7 +57,7 @@ export default defineComponent({
requestAnimationFrame(() => window.hideSplash()); requestAnimationFrame(() => window.hideSplash());
}).catch(e => { }).catch(e => {
console.error('Failed to load server configuration: ', e); console.error('Failed to load server configuration: ', e);
window.showSplashError(e, false, ++configAttempts.value); window.showSplashError('Failed to load server configuration\n' + e, false, ++configAttempts.value);
setTimeout(() => loadConfiguration(), 1000); setTimeout(() => loadConfiguration(), 1000);
}); });
}, },

12
src/main.ts
View File

@ -29,7 +29,6 @@ const splash = document.getElementById('splash'),
splashError = document.getElementById('splash__error'), splashError = document.getElementById('splash__error'),
splashErrorMessage = document.getElementById('splash__error-message'), splashErrorMessage = document.getElementById('splash__error-message'),
splashRetry = document.getElementById('splash__error-retry'), splashRetry = document.getElementById('splash__error-retry'),
splashAttempt = document.getElementById('splash__error-attempt'),
svgs = import.meta.globEager('/assets/icons/*.svg'); svgs = import.meta.globEager('/assets/icons/*.svg');
window.showSplash = function() { window.showSplash = function() {
@ -74,12 +73,12 @@ window.showSplashError = function(message: string, fatal: boolean, attempts: num
splashSpinner.style.visibility = 'hidden'; splashSpinner.style.visibility = 'hidden';
} }
if(splashAttempt && splashRetry) { if(splashRetry) {
if(fatal) { if(fatal) {
splashAttempt.hidden = splashRetry.hidden = true; splashRetry.hidden = true;
} else if(attempts) { } else if(attempts) {
splashAttempt.hidden = splashRetry.hidden = false; splashRetry.hidden = false;
splashAttempt.textContent = attempts.toString(); splashRetry.textContent = `Retrying... (${attempts.toString()})`;
} }
} }
}; };
@ -107,4 +106,7 @@ API.validateConfiguration().then((config) => {
// app.config.performance = true; // app.config.performance = true;
app.mount('#app'); app.mount('#app');
}).catch(e => {
console.error('LiveAtlas configuration is invalid: ', e);
window.showSplashError('LiveAtlas configuration is invalid\n' + e, true);
}); });