Fix: page load errors not always shown in alert

sillsdev · Apr 9, 2024 · e3c9eec · e3c9eec
1 parent d851510
commit e3c9eec
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/frontend/src/lib/error/UnexpectedError.svelte b/frontend/src/lib/error/UnexpectedError.svelte
@@ -5,8 +5,9 @@
   import t from '$lib/i18n';
   import { derived } from 'svelte/store';
   import { onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
 
-  let alertMessageElem: HTMLElement | undefined;
+  let alertMessageElem: HTMLElement;
   let traceIdElem: HTMLElement;
 
   const error = derived(useError(), (error) => {
@@ -33,7 +34,9 @@
     // subscribe() is more durable than reactive syntax
     error.subscribe((e) => {
       if (e) {
+        alertMessageElem = alertMessageElem ?? (browser ? document.querySelector('.error-message') : undefined) ?? undefined;
         if (alertMessageElem) alertMessageElem.textContent = e.message;
+        traceIdElem = traceIdElem ?? (browser ? document.querySelector('.trace-id') : undefined) ?? undefined;
         if (traceIdElem) traceIdElem.textContent = e.traceId;
       }
     })
@@ -68,7 +71,7 @@
     <span class="text-2xl">{$t('errors.apology')}</span>
   </div>
 
-  <div class="max-w-full whitespace-pre-wrap" style="overflow-wrap: break-word" bind:this={alertMessageElem}>
+  <div class="max-w-full whitespace-pre-wrap error-message" style="overflow-wrap: break-word" bind:this={alertMessageElem}>
     {$error?.message}
   </div>
 
@@ -81,6 +84,6 @@
   <div>
     <span>{$t('errors.error_code')}:</span>
     <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
-    <span on:click={onTraceIdClick} bind:this={traceIdElem}>{$error?.traceId}</span>
+    <span on:click={onTraceIdClick} class="trace-id" bind:this={traceIdElem}>{$error?.traceId}</span>
   </div>
 </div>
diff --git a/frontend/src/lib/error/UnexpectedErrorAlert.svelte b/frontend/src/lib/error/UnexpectedErrorAlert.svelte
@@ -4,6 +4,7 @@
   import t from '$lib/i18n';
   import UnexpectedError from './UnexpectedError.svelte';
   import { onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
 
   let dialog: HTMLDialogElement;
   const error = useError();
@@ -13,6 +14,7 @@
   onDestroy(
     // subscribe() is more durable than reactive syntax
     error.subscribe((e) => {
+      dialog = dialog ?? (browser ? document.querySelector('.error-alert') : undefined) ?? undefined;
       if (!dialog) return;
       e ? open() : close();
     })
@@ -34,7 +36,7 @@
   }
 </script>
 
-<dialog bind:this={dialog} class="modal">
+<dialog bind:this={dialog} class="modal error-alert">
   <div class="modal-box bg-error text-error-content max-w-[95vw] w-[unset]">
     <UnexpectedError />
     <div class="flex justify-end gap-4 modal-action">

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -41,6 +41,11 @@
   });
 </script>
 
+<!-- We don't want the alert as well if we're heading to +error.svelte -->
+{#if !$page.error}
+  <UnexpectedErrorAlert />
+{/if}
+
 <div use:overlayContainer class="bg-base-200 shadow rounded-box z-[2] absolute" />
 
 <svelte:head>
@@ -64,9 +69,4 @@
   <Footer />
 </div>
 
-<!-- We don't want the alert as well if we're heading to +error.svelte -->
-{#if !$page.error}
-  <UnexpectedErrorAlert />
-{/if}
-
 <Notify />