From 452859fb0f9abcda7093f2c19039985350a69278 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 12 Dec 2024 15:58:18 +0200
Subject: [PATCH] display error and stack

---
 index.html  | 23 +++++++++++++++++++++++
 src/main.js |  4 ++++
 2 files changed, 27 insertions(+)

diff --git a/index.html b/index.html
index d505db85..66eec077 100644
--- a/index.html
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 772bc8db..f63deb49 100644
--- a/src/main.js
+++ b/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)