display error and stack

This commit is contained in:
Henry Jameson 2024-12-12 15:58:18 +02:00
parent 8c25620c6b
commit 452859fb0f
2 changed files with 27 additions and 0 deletions

View file

@ -101,6 +101,27 @@
text-align: center; text-align: center;
} }
#statusError {
display: none;
margin-top: 1em;
font-size: calc(1vw + 1vh + 1vmin);
line-height: 2;
width: 100%;
text-align: center;
}
#statusStack {
display: none;
margin-top: 1em;
font-size: calc((1vw + 1vh + 1vmin) / 2.5);
width: calc(100vw - 5em);
padding: 1em;
text-overflow: ellipsis;
overflow-x: hidden;
text-align: left;
line-height: 2;
}
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
#throbber { #throbber {
animation: none !important; animation: none !important;
@ -135,6 +156,8 @@
<!-- it's a pseudographic, don't want screenreader read out nonsense --> <!-- it's a pseudographic, don't want screenreader read out nonsense -->
<span aria-hidden="true" class="initial-text">(。&gt;&lt;)</span> <span aria-hidden="true" class="initial-text">(。&gt;&lt;)</span>
</div> </div>
<code id="statusError"></code>
<pre id="statusStack"></pre>
</div> </div>
</div> </div>
<div id="app" class="hidden"></div> <div id="app" class="hidden"></div>

View file

@ -68,6 +68,10 @@ const persistedStateOptions = {
throbber.classList.add('dead') throbber.classList.add('dead')
document.querySelector('#status').textContent = i18n.global.t('splash.error') document.querySelector('#status').textContent = i18n.global.t('splash.error')
console.error('PleromaFE failed to initialize: ', e) console.error('PleromaFE failed to initialize: ', e)
document.querySelector('#statusError').textContent = e
document.querySelector('#statusStack').textContent = e.stack
document.querySelector('#statusError').style = 'display: block'
document.querySelector('#statusStack').style = 'display: block'
} }
window.splashError = e => splashError(i18n, e) window.splashError = e => splashError(i18n, e)