refactor: replace addError overloaded params with ErrorOptions bag

Replace the overloaded `opts?: Error | string | MessageOptions` parameter
with a typed `ErrorOptions` bag (`{ error?, details?, persist? }`). This
eliminates type-sniffing, fixes bug report generation receiving
`[object Object]` for MessageOptions callers, and makes each call site
explicit about what it's passing.

Also moves `bugReport` from MessageOptions to the Message type since it's
generated output, not caller input. Tightens generateBugReport signature
to `(error?: Error)`. Adds store-based content assertion to the E2E test.

Author: PaulHax

src/components/MessageItem.vue

@@ -30,7 +30,7 @@ export default defineComponent({
     });
 
     const copyBugReport = () => {
-      const report = message.value.options.bugReport;
+      const report = message.value.bugReport;
       if (report) copy(report);
     };
 
@@ -50,7 +50,7 @@ export default defineComponent({
         <span>{{ message.title }}</span>
         <div>
           <v-btn
-            v-if="message.options.bugReport"
+            v-if="message.bugReport"
             :prepend-icon="copied ? 'mdi-check' : 'mdi-content-copy'"
             variant="tonal"
             size="small"

src/components/PatientStudyVolumeBrowser.vue

@@ -118,6 +118,7 @@ export default defineComponent({
             if (err instanceof Error) {
               const messageStore = useMessageStore();
               messageStore.addError('Failed to generate thumbnails', {
+                error: err,
                 details: `${err}. More details can be found in the developer's console.`,
               });
             }

src/components/SampleDataBrowser.vue

@@ -115,7 +115,9 @@ export default defineComponent({
       } catch (error) {
         status.progress[sample.name].state = ProgressState.Error;
         const messageStore = useMessageStore();
-        messageStore.addError('Failed to load sample data', error as Error);
+        messageStore.addError('Failed to load sample data', {
+          error: error as Error,
+        });
       } finally {
         delete status.progress[sample.name];
       }

src/composables/useErrorMessage.ts

@@ -7,6 +7,7 @@ export async function useErrorMessage(message: string, task: Function) {
     if (err instanceof Error) {
       const messageStore = useMessageStore();
       messageStore.addError(message, {
+        error: err,
         details: `${err}. More details can be found in the developer's console.`,
       });
     }

src/composables/useGlobalErrorHook.ts

@@ -7,12 +7,16 @@ export function useGlobalErrorHook() {
 
   const onError = (event: ErrorEvent) => {
     console.error(event);
-    const errorMessage = event.message ?? 'Unknown global error';
+    const error = event.error ?? event.message ?? 'Unknown global error';
 
-    captureException(event.error ?? errorMessage);
+    captureException(error);
 
-    const details = event.error ? event.error : { details: errorMessage };
-    messageStore.addError('Application error (click for details)', details);
+    const errorOptions =
+      error instanceof Error ? { error } : { details: String(error) };
+    messageStore.addError(
+      'Application error (click for details)',
+      errorOptions
+    );
   };
 
   onMounted(() => {

src/composables/useWebGLWatchdog.ts

@@ -33,7 +33,9 @@ function getVolumeMapperContext(view: View) {
 export function useWebGLWatchdog(view: MaybeRef<Maybe<View>>) {
   const reportError = useThrottleFn(() => {
     const messageStore = useMessageStore();
-    messageStore.addError(Messages.WebGLLost.title, Messages.WebGLLost.details);
+    messageStore.addError(Messages.WebGLLost.title, {
+      details: Messages.WebGLLost.details,
+    });
 
     const contexts: Record<string, any> = {};
     const viewVal = unref(view);

src/io/import/processors/restoreStateFile.ts

@@ -52,10 +52,9 @@ function resolveToLeafSources(
         return [{ type: 'file', file, fileType: src.fileType }];
       }
       const missingFile = filePath ?? String(src.fileId);
-      useMessageStore().addError(
-        'State file missing expected file',
-        missingFile
-      );
+      useMessageStore().addError('State file missing expected file', {
+        details: missingFile,
+      });
       return [];
     }
 

src/store/__tests__/messages.spec.ts

@@ -12,7 +12,7 @@ describe('Message store', () => {
 
     const innerError = new Error('inner error');
     const ids = [
-      messageStore.addError('an error', innerError),
+      messageStore.addError('an error', { error: innerError }),
       messageStore.addWarning('warning'),
       messageStore.addInfo('info'),
       messageStore.addInfo('loading', {
@@ -26,7 +26,7 @@ describe('Message store', () => {
         type: MessageType.Error,
         title: 'an error',
         options: {
-          details: String(innerError),
+          details: innerError.stack ?? String(innerError),
           persist: false,
         },
       },
@@ -57,7 +57,7 @@ describe('Message store', () => {
     expect(messageStore.messages).to.have.length(4);
 
     ids.forEach((id, index) => {
-      expect(messageStore.byID[id]).to.deep.equal(expected[index]);
+      expect(messageStore.byID[id]).toMatchObject(expected[index]);
     });
 
     messageStore.clearOne(ids[1]);

src/store/dicom-web/dicom-web-store.ts

@@ -202,7 +202,7 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
       };
     } catch (error) {
       const messageStore = useMessageStore();
-      messageStore.addError('Failed to load DICOM', error as Error);
+      messageStore.addError('Failed to load DICOM', { error: error as Error });
       volumes.value[volumeKey] = {
         ...volumes.value[volumeKey],
         state: 'Error',

src/store/image-cache.ts

@@ -53,7 +53,7 @@ export const useImageCacheStore = defineStore('image-cache', () => {
       imageErrors[id].push(error);
 
       const messageStore = useMessageStore();
-      messageStore.addError('Error loading DICOM data', error);
+      messageStore.addError('Error loading DICOM data', { error });
     };
 
     imageListenerCleanup[id] = () => {