display error and stack

index.html

@@ -101,6 +101,27 @@
        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) {
        #throbber {
          animation: none !important;
@@ -135,6 +156,8 @@
           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
         </div>
+        <code id="statusError"></code>
+        <pre id="statusStack"></pre>
       </div>
     </div>
     <div id="app" class="hidden"></div>

src/main.js

@@ -68,6 +68,10 @@ const persistedStateOptions = {
     throbber.classList.add('dead')
     document.querySelector('#status').textContent = i18n.global.t('splash.error')
     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)