diff --git a/client/components.d.ts b/client/components.d.ts
index c0728ab9..8369ee5b 100644
--- a/client/components.d.ts
+++ b/client/components.d.ts
@@ -14,11 +14,15 @@ declare module 'vue' {
     AuthOrchestrator: typeof import('./src/components/auth/AuthOrchestrator.vue')['default']
     DropField: typeof import('./src/components/DropField.vue')['default']
     EditableText: typeof import('./src/components/EditableText.vue')['default']
+    ErrorIndicator: typeof import('./src/components/ErrorIndicator.vue')['default']
     IBiArrowDownCircleFill: typeof import('~icons/bi/arrow-down-circle-fill')['default']
     IBiArrowLeft: typeof import('~icons/bi/arrow-left')['default']
     IBiArrowRightCircle: typeof import('~icons/bi/arrow-right-circle')['default']
+    IBiCheck2: typeof import('~icons/bi/check2')['default']
     IBiChevronRight: typeof import('~icons/bi/chevron-right')['default']
+    IBiClipboard: typeof import('~icons/bi/clipboard')['default']
     IBiCompassFill: typeof import('~icons/bi/compass-fill')['default']
+    IBiExclamationTriangleFill: typeof import('~icons/bi/exclamation-triangle-fill')['default']
     IBiPencilFill: typeof import('~icons/bi/pencil-fill')['default']
     IBiTrash: typeof import('~icons/bi/trash')['default']
     LoginFailureModal: typeof import('./src/components/auth/LoginFailureModal.vue')['default']
diff --git a/client/src/components/DropField.vue b/client/src/components/DropField.vue
index cb7d843a..649b7a35 100644
--- a/client/src/components/DropField.vue
+++ b/client/src/components/DropField.vue
@@ -6,10 +6,11 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
+import { reportError } from '@/stores/errorstore'
 const emit = defineEmits(['files-dropped'])
 
 function onDrop(e: DragEvent) {
-  if (e.dataTransfer === null) { throw new Error("e.dataTransfer is null") }
+  if (e.dataTransfer === null) { reportError("e.dataTransfer is null"); return }
   const fileList = []
   for (let i = 0; i < e.dataTransfer.files.length; i++) {
     fileList.push(e.dataTransfer.files.item(i))
diff --git a/client/src/components/ErrorIndicator.vue b/client/src/components/ErrorIndicator.vue
new file mode 100644
index 00000000..cf87bb36
--- /dev/null
+++ b/client/src/components/ErrorIndicator.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { BModal, BButton } from 'bootstrap-vue-next'
+import { useErrorStore } from '@/stores/errorstore'
+import type { ErrorEntry } from '@/stores/errorstore'
+
+const errorStore = useErrorStore()
+
+const overlayVisible = ref(false)
+const confirmDismissVisible = ref(false)
+const copiedId = ref<number | null>(null)
+const copiedAll = ref(false)
+
+const displayCount = computed(() =>
+  errorStore.errorCount > 99 ? '99+' : String(errorStore.errorCount)
+)
+
+function formatEntry(e: ErrorEntry): string {
+  return `[${e.timestamp.toISOString()}] ${e.message}` +
+    (e.detail ? `\n${e.detail}` : '')
+}
+
+async function copyOne(e: ErrorEntry) {
+  await navigator.clipboard.writeText(formatEntry(e))
+  copiedId.value = e.id
+  setTimeout(() => { copiedId.value = null }, 1500)
+}
+
+async function copyAll() {
+  await navigator.clipboard.writeText(
+    errorStore.errors.map(formatEntry).join('\n\n---\n\n')
+  )
+  copiedAll.value = true
+  setTimeout(() => { copiedAll.value = false }, 1500)
+}
+
+function confirmedDismissAll() {
+  errorStore.dismissAll()
+  confirmDismissVisible.value = false
+  overlayVisible.value = false
+}
+</script>
+
+<template>
+  <button v-if="errorStore.hasErrors" v-show="!overlayVisible" class="error-fab btn btn-danger shadow-lg"
+    :aria-label="`${errorStore.errorCount} errors — click to view`" @click="overlayVisible = true">
+    <i-bi-exclamation-triangle-fill />
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark">
+      {{ displayCount }}
+    </span>
+  </button>
+
+  <BModal v-model="overlayVisible" title="Error Log" size="lg" scrollable>
+    <div v-for="entry in errorStore.errors" :key="entry.id"
+      class="d-flex align-items-start gap-2 mb-2 p-2 border rounded">
+      <div class="flex-grow-1 font-monospace small text-break">
+        <div>{{ entry.message }}</div>
+        <div v-if="entry.detail" class="text-muted small mt-1" style="max-height: 3em; overflow: hidden">
+          {{ entry.detail }}
+        </div>
+        <div class="text-muted" style="font-size: 0.7em">
+          {{ entry.timestamp.toLocaleTimeString() }}
+        </div>
+      </div>
+      <button class="btn btn-sm btn-outline-secondary flex-shrink-0"
+        :title="copiedId === entry.id ? 'Copied!' : 'Copy message'" @click="copyOne(entry)">
+        <i-bi-check2 v-if="copiedId === entry.id" />
+        <i-bi-clipboard v-else />
+      </button>
+      <button class="btn-close flex-shrink-0 mt-1" aria-label="Dismiss" @click="errorStore.dismissError(entry.id)" />
+    </div>
+    <template #footer>
+      <BButton variant="outline-secondary" class="me-auto" @click="copyAll">
+        <i-bi-check2 v-if="copiedAll" />
+        <i-bi-clipboard v-else />
+        Copy All
+      </BButton>
+      <BButton variant="outline-danger" @click="confirmDismissVisible = true">
+        <i-bi-trash />
+        Clear All
+      </BButton>
+      <BButton variant="secondary" @click="overlayVisible = false">
+        Close
+      </BButton>
+    </template>
+  </BModal>
+
+  <BModal v-model="confirmDismissVisible" title="Clear all errors?" size="sm">
+    <p>Dismiss all {{ errorStore.errorCount }} error message(s)?</p>
+    <template #footer>
+      <BButton variant="danger" @click="confirmedDismissAll">Clear All</BButton>
+      <BButton variant="secondary" @click="confirmDismissVisible = false">Cancel</BButton>
+    </template>
+  </BModal>
+</template>
+
+<style scoped>
+.error-fab {
+  position: fixed;
+  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
+  left: calc(1.5rem + env(safe-area-inset-left, 0px));
+  z-index: 1060;
+  width: 3.5rem;
+  height: 3.5rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Keep button inside Bootstrap container at each breakpoint */
+@media (min-width: 576px) {
+  .error-fab {
+    left: calc((100vw - 540px) / 2 + 1.5rem);
+  }
+}
+
+@media (min-width: 768px) {
+  .error-fab {
+    left: calc((100vw - 720px) / 2 + 1.5rem);
+  }
+}
+
+@media (min-width: 992px) {
+  .error-fab {
+    left: calc((100vw - 960px) / 2 + 1.5rem);
+  }
+}
+
+@media (min-width: 1200px) {
+  .error-fab {
+    left: calc((100vw - 1140px) / 2 + 1.5rem);
+  }
+}
+
+@media (min-width: 1400px) {
+  .error-fab {
+    left: calc((100vw - 1320px) / 2 + 1.5rem);
+  }
+}
+
+</style>
diff --git a/client/src/components/MapComponent.vue b/client/src/components/MapComponent.vue
index 1153ab76..dde1bd49 100644
--- a/client/src/components/MapComponent.vue
+++ b/client/src/components/MapComponent.vue
@@ -34,6 +34,7 @@ import { useMapStateStore } from '@/stores/mapstate'
 import { StyleFactoryFixedColors, THREE_BROWN_COLORSTYLE, FIVE_COLORFUL_COLORSTYLE } from '@/lib/mapStyles';
 import { queue, type QueueObject } from 'async'
 import { createTrackLoadingAsyncWorker, type IdList, type Task } from '@/lib/trackLoadAsyncWorker'
+import { reportError } from '@/stores/errorstore'
 
 const NUMWORKERS = 4
 const BATCHSIZE = 5
@@ -86,7 +87,7 @@ configStore.loadConfig(props.sid)
       throw Error(`Unknown TRACKSTYLE config value ${TRACKSTYLE}`)
     }
   })
-  .catch((e) => console.error("Could not load config", e))
+  .catch((e) => reportError("Could not load config", e))
 
 // Initialize loading worker and queue
 const addLayerFunc = (featureWithTrack: MultiLineStringWithTrack) => mmap.addTrackLayer(featureWithTrack)
@@ -124,7 +125,7 @@ onMounted(() => {
       () => { popoverData.value = null }
     )
   }).catch((err) => {
-    console.error("Error in nextTick", err)
+    reportError("Error in nextTick", err)
   })
 })
 
@@ -180,13 +181,13 @@ function makeVisible(ids: IdList, mmap: ManagedMap, queue: QueueObject<Task>, zo
           if (zoomOut) { mmap.setExtentAndZoomOut() }
         }
       )
-      .catch((e) => console.error("what??", e))
+      .catch((e) => reportError("Error draining load queue", e))
 
     loading.value = true // should be true already
     queue.push<Task>(listOfTasks, (err, retVal) => {
       if (err) {
         if (err.name === 'AbortError') console.log("Aborted worker")
-        else console.error("Error in worker", err)
+        else reportError("Error in worker", err)
       }
       if (retVal) console.log("Return value from worker", retVal)
     })
diff --git a/client/src/components/TrackManagerNavBar.vue b/client/src/components/TrackManagerNavBar.vue
index bc5146c2..5262852e 100644
--- a/client/src/components/TrackManagerNavBar.vue
+++ b/client/src/components/TrackManagerNavBar.vue
@@ -2,7 +2,7 @@
 <template>
   <b-container id="root" class="d-flex flex-column vh-100 gx-0 border">
     <auth-orchestrator />
-    <div class="bg-light d-flex flex-column vh-100">
+    <div class="bg-light d-flex flex-column vh-100 position-relative">
       <nav class="navbar navbar-expand bg-success-subtle border-bottom py-1">
         <div class="container-fluid">
           <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
@@ -54,6 +54,7 @@
         </div>
       </nav>
       <slot></slot>
+      <ErrorIndicator />
     </div>
   </b-container>
 </template>
diff --git a/client/src/lib/auth/registration.ts b/client/src/lib/auth/registration.ts
index 92fc24c3..13fc2bae 100644
--- a/client/src/lib/auth/registration.ts
+++ b/client/src/lib/auth/registration.ts
@@ -1,5 +1,6 @@
 
 import { getWithCORS, sendJSONToServer, getErrorMessage } from '@/lib/httpHelpers';
+import { reportError } from '@/stores/errorstore';
 import { startRegistration } from '@simplewebauthn/browser';
 import type { RegistrationResponseJSON, PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/browser'
 
@@ -48,13 +49,13 @@ export async function registerPasskey(registrationKey: string): Promise<Registra
         returnStatus.success = false
         return returnStatus
       } else {
-        console.error(getErrorMessage(error))
+        reportError(getErrorMessage(error))
         returnStatus.message = "Failed on client side";
         returnStatus.success = false
         return returnStatus
       }
     } else {
-      console.error(getErrorMessage(error))
+      reportError(getErrorMessage(error))
       returnStatus.message = "Failed on client side (2)"
       returnStatus.success = false
       return returnStatus
diff --git a/client/src/lib/getconfig.ts b/client/src/lib/getconfig.ts
index 3e8e85bf..b4412c06 100644
--- a/client/src/lib/getconfig.ts
+++ b/client/src/lib/getconfig.ts
@@ -26,6 +26,10 @@ interface KeyValuePair {
 }
 
 
+/**
+ * Throws on invalid conftype/confkey, HTTP errors, or unexpected response shapes.
+ * Callers must handle rejection (e.g. `.catch()` with `reportError`).
+ */
 async function getConfig(sid: string, conftype: string, confkey: string): Promise<string> {
 
   if (!conftypes.includes(conftype)) {
@@ -61,6 +65,10 @@ async function getConfig(sid: string, conftype: string, confkey: string): Promis
   throw Error("Got wrong type from r.json()", { cause: rJson })
 }
 
+/**
+ * Throws on HTTP errors, unexpected response shapes, or schema validation failures.
+ * Callers must handle rejection (e.g. `.catch()` with `reportError`).
+ */
 async function getSchemaConfig(sid: string): Promise<Record<string, string>> {
 
   const conftype = 'SCHEMA'
diff --git a/client/src/lib/trackLoadAsyncWorker.ts b/client/src/lib/trackLoadAsyncWorker.ts
index eeb32d2c..9a13aff0 100644
--- a/client/src/lib/trackLoadAsyncWorker.ts
+++ b/client/src/lib/trackLoadAsyncWorker.ts
@@ -5,6 +5,7 @@ import type { MultiLineStringWithTrack } from '@/lib/zodSchemas'
 import type { MultiLineStringWithTrackId } from 'trackmanager-shared/zodSchemas'
 import type { AsyncWorker } from 'async'
 import { getTrackMetaDataByIdList, getMultiLineStringWithIdList } from './trackServices';
+import { reportError } from '@/stores/errorstore';
 
 type IdList = number[]
 interface Task { idList: IdList, signal: AbortSignal }
@@ -27,7 +28,8 @@ function createTrackLoadingAsyncWorker(
     // ----
     const trackMetadataList = await getTrackMetaDataByIdList(idList, sid, signal)
     if (trackMetadataList === null) {
-      throw Error("Track metadata list could not be loaded")
+      reportError("Track metadata list could not be loaded")
+      return
     }
     const trackMetadataMap = new Map<number, Track>()
     trackMetadataList.forEach((track) => trackMetadataMap.set(track.id, track))
@@ -42,10 +44,10 @@ function createTrackLoadingAsyncWorker(
     if (signal.aborted) return
     idList.forEach((id) => {
       const track = trackMetadataMap.get(id)
-      if (track === undefined) throw Error(`Track for id ${id} is undefined`)
+      if (track === undefined) { reportError(`Track for id ${id} is undefined`); return }
 
       const geoJsonWithId = geoJsonMap.get(id)
-      if (geoJsonWithId === undefined) throw Error(`GeoJson for id ${id} is undefined`)
+      if (geoJsonWithId === undefined) { reportError(`GeoJson for id ${id} is undefined`); return }
 
       const geoJsonWithTrack: MultiLineStringWithTrack = {
         track,
diff --git a/client/src/lib/trackServices.ts b/client/src/lib/trackServices.ts
index 3f6ceec3..29e44962 100644
--- a/client/src/lib/trackServices.ts
+++ b/client/src/lib/trackServices.ts
@@ -3,6 +3,7 @@ import { Track } from '@/lib/Track'
 import type { TrackPropertiesOptional } from '@/lib/Track'
 import _ from 'lodash'
 import { useUserLoginStore } from '@/stores/userlogin'
+import { reportError } from '@/stores/errorstore'
 
 import type { Extent } from 'ol/extent'
 import * as z from 'zod'
@@ -46,11 +47,11 @@ async function getTrackYears(sid: string): Promise<number[]> {
   try {
     response = await fetch(url)
   } catch (error) {
-    console.error('Error when fetching years of tracks', error)
+    reportError('Error when fetching years of tracks', error)
     return []
   }
   if (!response.ok) {
-    console.error('Response not ok when fetching tracks by year', response)
+    reportError('Response not ok when fetching tracks by year', response)
     return []
   }
 
@@ -61,7 +62,7 @@ async function getTrackYears(sid: string): Promise<number[]> {
     return years
 
   } catch (error) {
-    console.error('Error when processing result from http call', error)
+    reportError('Error when processing result from http call', error)
     return []
   }
 }
@@ -76,11 +77,11 @@ async function getTrackIdsByYear(year: number, sid: string) {
   try {
     response = await fetch(url)
   } catch (error) {
-    console.error('Error when fetching tracks by year', error)
+    reportError('Error when fetching tracks by year', error)
     return []
   }
   if (!response.ok) {
-    console.error('Response not ok when fetching tracks by year', response)
+    reportError('Response not ok when fetching tracks by year', response)
     return []
   }
 
@@ -92,7 +93,7 @@ async function getTrackIdsByYear(year: number, sid: string) {
 
   } catch (error) {
 
-    console.error('Error when processing result from http call', error)
+    reportError('Error when processing result from http call', error)
     return []
 
   }
@@ -111,11 +112,11 @@ async function getTracksByExtent(extent: Extent, sid: string) {
       headers: { 'Content-Type': 'application/json' }
     })
   } catch (error) {
-    console.error('Error when fetching tracks by extent', error)
+    reportError('Error when fetching tracks by extent', error)
     return []
   }
   if (!response.ok) {
-    console.error('Response not ok when fetching tracks by extent', response)
+    reportError('Response not ok when fetching tracks by extent', response)
     return []
   }
 
@@ -126,7 +127,7 @@ async function getTracksByExtent(extent: Extent, sid: string) {
     const trackArray = trackDataArray.map(t => new Track(t))
     return trackArray
   } catch (error) {
-    console.error('Error when processing result from http call', error)
+    reportError('Error when processing result from http call', error)
     return []
   }
 }
@@ -137,12 +138,12 @@ async function getTrackById(id: number, sid: string): Promise<Track | null> {
   try {
     response = await fetch(url)
   } catch (error) {
-    console.error('Error when fetching tracks by year', error)
+    reportError('Error when fetching tracks by year', error)
     return null
   }
   if (!response.ok) {
     const errText = await response.text()
-    console.error(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
+    reportError(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
     return null
   }
 
@@ -153,7 +154,7 @@ async function getTrackById(id: number, sid: string): Promise<Track | null> {
     const track = new Track(trackData)
     return track
   } catch (error) {
-    console.error('Error when processing result from http call', error)
+    reportError('Error when processing result from http call', error)
     return null
   }
 }
@@ -174,12 +175,12 @@ async function getTrackMetaDataByIdList(idList: number[], sid: string, signal: A
     )
   } catch (error) {
     if (error instanceof Error && error.name === 'AbortError') { return [] }
-    console.error('Error when fetching tracks by year', error)
+    reportError('Error when fetching tracks by year', error)
     return []
   }
   if (!response.ok) {
     const errText = await response.text()
-    console.error(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
+    reportError(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
     return []
   }
 
@@ -193,7 +194,7 @@ async function getTrackMetaDataByIdList(idList: number[], sid: string, signal: A
   } catch (error) {
 
     if (error instanceof Error && error.name === 'AbortError') { return [] }
-    console.error('Error when processing result from http call', error)
+    reportError('Error when processing result from http call', error)
     return []
   }
 }
@@ -228,7 +229,7 @@ async function getMultiLineStringWithIdList(idList: number[], sid: string, signa
       return respJson
     } else {
       const errText = await response.text()
-      console.error(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
+      reportError(`Response code ${response.status} after fetching to ${url}, error: ${errText}`)
       return []
     }
 
@@ -236,10 +237,10 @@ async function getMultiLineStringWithIdList(idList: number[], sid: string, signa
 
     if (e instanceof Error && e.name === 'AbortError') { return [] }
     else if (e instanceof SyntaxError) {
-      console.error('Failed to convert response to json', e)
+      reportError('Failed to convert response to json', e)
       const errText = await response.text()
-      console.error("Response was not json, but: " + errText)
-    } else console.error("Unknown error after trying to read json response", e)
+      reportError("Response was not json, but: " + errText)
+    } else reportError("Unknown error after trying to read json response", e)
     return []
   }
 }
@@ -279,13 +280,13 @@ async function updateTrackById(trackId: number, keyValuePairs: TrackPropertiesOp
       if (response.status === 401 || response.status === 403) {
         useUserLoginStore().handleUnauthorized()
       }
-      console.error(`Unable to update track ${id}`)
-      console.error(response)
-      console.error(await response.text())
+      reportError(`Unable to update track ${id}`)
+      reportError(response)
+      reportError(await response.text())
       return false
     }
   } catch (err) {
-    console.error(err)
+    reportError(err)
     return false
   }
 }
@@ -308,13 +309,13 @@ async function updateNameFromSource(id: number, sid: string): Promise<boolean> {
       if (response.status === 401 || response.status === 403) {
         useUserLoginStore().handleUnauthorized()
       }
-      console.error(`Unable to convert src to name for track ${id}. Response status ${response.status}`)
+      reportError(`Unable to convert src to name for track ${id}. Response status ${response.status}`)
       const body = await response.text()
-      console.error(`Body: ${body}`)
+      reportError(`Body: ${body}`)
       return false
     }
   } catch (err) {
-    console.error(err)
+    reportError(err)
     return false
   }
 }
@@ -336,13 +337,13 @@ async function deleteTrack(id: number, sid: string) {
       if (response.status === 401 || response.status === 403) {
         useUserLoginStore().handleUnauthorized()
       }
-      console.error(`Unable to delete track ${id}`)
-      console.error(response)
-      console.error(await response.text())
+      reportError(`Unable to delete track ${id}`)
+      reportError(response)
+      reportError(await response.text())
       return false
     }
   } catch (err) {
-    console.error(err)
+    reportError(err)
     return false
   }
 }
diff --git a/client/src/stores/errorstore.ts b/client/src/stores/errorstore.ts
new file mode 100644
index 00000000..f9156c58
--- /dev/null
+++ b/client/src/stores/errorstore.ts
@@ -0,0 +1,83 @@
+/**
+ * Error reporting store + utility
+ *
+ * HOW TO REPORT AN ERROR (preferred)
+ * ------------------------------------
+ * Import and call `reportError()` anywhere in the app:
+ *
+ *   import { reportError } from '@/stores/errorstore'
+ *
+ *   reportError('Failed to load track')            // plain string
+ *   reportError('Request failed:', new Error(...)) // string + Error object
+ *   reportError(err)                               // bare Error object
+ *
+ * `reportError` forwards its arguments to `console.error` as well,
+ * so existing debugging workflows are unaffected.
+ *
+ * HOW TO ADD AN ERROR WITHOUT console.error (low-level)
+ * -------------------------------------------------------
+ * Use the store directly when you want to surface a UI message without
+ * a console entry, or when you already have a pre-formatted string:
+ *
+ *   import { useErrorStore } from '@/stores/errorstore'
+ *
+ *   const errorStore = useErrorStore()
+ *   errorStore.addError('Session expired')
+ *   errorStore.addError('Upload failed', stack) // optional stack/detail string
+ *
+ * UI COMPONENT
+ * ------------
+ * `<ErrorIndicator />` is mounted once in App.vue. It watches the store
+ * reactively and shows a floating badge whenever errors are present.
+ * No further wiring is needed — just call reportError() or addError().
+ */
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface ErrorEntry {
+  id: number
+  message: string
+  timestamp: Date
+  detail?: string
+}
+
+const MAX_ERRORS = 200 // oldest entry is evicted when the cap is reached
+let _nextId = 1        // module-level counter; survives store resets
+
+const useErrorStore = defineStore('errorstore', () => {
+  const errors = ref<ErrorEntry[]>([])
+
+  function addError(message: string, detail?: string) {
+    if (errors.value.length >= MAX_ERRORS) errors.value.shift()
+    errors.value.push({ id: _nextId++, message, timestamp: new Date(), detail })
+  }
+
+  function dismissError(id: number) {
+    const idx = errors.value.findIndex(e => e.id === id)
+    if (idx !== -1) errors.value.splice(idx, 1)
+  }
+
+  function dismissAll() {
+    errors.value = []
+  }
+
+  const errorCount = computed(() => errors.value.length)
+  const hasErrors = computed(() => errors.value.length > 0)
+
+  return { errors, errorCount, hasErrors, addError, dismissError, dismissAll }
+})
+
+/** Drop-in replacement for console.error() that also surfaces the error to the UI.
+ *  Call this for errors that are meaningful to the end user. */
+function reportError(...args: unknown[]): void {
+  console.error(...args)
+  const message = args.map(a =>
+    typeof a === 'string' ? a
+      : a instanceof Error ? `${a.name}: ${a.message}`
+        : (() => { try { return JSON.stringify(a) } catch { return String(a) } })()
+  ).join(' ')
+  const detail = (args.find((a): a is Error => a instanceof Error))?.stack
+  useErrorStore().addError(message, detail)
+}
+
+export { useErrorStore, reportError }
diff --git a/client/src/stores/userlogin.ts b/client/src/stores/userlogin.ts
index 7cf30944..76746e1f 100644
--- a/client/src/stores/userlogin.ts
+++ b/client/src/stores/userlogin.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
+import { reportError } from '@/stores/errorstore'
 
 const SESSION_HEARTBEAT_INTERVAL_MS = 30000
 
@@ -87,10 +88,10 @@ export const useUserLoginStore = defineStore('userlogin', () => {
 
       if (!resp.ok) {
         const t = await resp.text()
-        console.error(`Logout was not successful. Response status:${resp.status}, Body:${t}`)
+        reportError(`Logout was not successful. Response status:${resp.status}, Body:${t}`)
       }
     } catch (e) {
-      console.error("Error in logout procedure:", e)
+      reportError("Error in logout procedure:", e)
     } finally {
       canWriteToSchema.value = false
       _sessionHasBeenActive.value = false
diff --git a/client/src/views/TrackDetailPage.vue b/client/src/views/TrackDetailPage.vue
index 60ae6a15..886c5fa7 100644
--- a/client/src/views/TrackDetailPage.vue
+++ b/client/src/views/TrackDetailPage.vue
@@ -36,6 +36,7 @@ import { nextTick, ref } from 'vue';
 import { getTrackById } from '@/lib/trackServices';
 import { useRouter } from 'vue-router'
 import { updateTrackById } from '@/lib/trackServices'
+import { reportError } from '@/stores/errorstore'
 
 import { useUserLoginStore } from '@/stores/userlogin'
 const userLoginStore = useUserLoginStore()
@@ -91,7 +92,7 @@ getTrackById(props.id, props.sid)
     }
   })
   .catch((e) => {
-    console.error(`Error while loading track ${props.id}`, e)
+    reportError(`Error while loading track ${props.id}`, e)
   })
 
 nextTick(() => {
@@ -102,7 +103,7 @@ nextTick(() => {
     zoomOut: true
   }
 
-}).catch((e) => { console.error(e) })
+}).catch((e) => { reportError(e) })
 
 const router = useRouter()
 
@@ -127,7 +128,7 @@ async function processHeadlineUpdate(value: string): Promise<boolean> {
   console.log("Updating " + value)
   try {
     const success = await updateTrackById(props.id, { name: value }, props.sid) ?? false
-    if (!success) console.error(`Updating track id ${props.id} was not successful`)
+    if (!success) reportError(`Updating track id ${props.id} was not successful`)
     return success
   } catch (e) {
     console.log(e)
diff --git a/client/src/views/TrackMapPage.vue b/client/src/views/TrackMapPage.vue
index 622164f6..5253cfa6 100644
--- a/client/src/views/TrackMapPage.vue
+++ b/client/src/views/TrackMapPage.vue
@@ -28,6 +28,7 @@ import MapComponent from '@/components/MapComponent.vue'
 import { getTrackYears } from '@/lib/trackServices'
 import { useMapStateStore } from '@/stores/mapstate'
 import { useConfigStore } from '@/stores/configstore'
+import { reportError } from '@/stores/errorstore'
 
 import { ref } from 'vue'
 
@@ -80,13 +81,14 @@ configStore.loadConfig(props.sid)
         const mostRecentYear = years.value[0]
         if (mostRecentYear !== undefined) {
           loadTracksOfYear(mostRecentYear, true)
+          reportError("Initial load: most recent year is " + mostRecentYear)
         } else {
-          console.log("mostRecentYear is undefined")
+          reportError("mostRecentYear is undefined")
         }
       }
     }
   })
-  .catch((e) => console.error("Error on initial load", e))
+  .catch((e) => reportError("Error on initial load", e))
 
 /**
  * Fetch available years for tracks and initialize button states
diff --git a/client/src/views/TrackMultiEditPage.vue b/client/src/views/TrackMultiEditPage.vue
index a3dc5339..adf42261 100644
--- a/client/src/views/TrackMultiEditPage.vue
+++ b/client/src/views/TrackMultiEditPage.vue
@@ -49,6 +49,7 @@ import { Track } from '@/lib/Track'
 import TrackManagerNavBar from '@/components/TrackManagerNavBar.vue'
 import EditableText from '@/components/EditableText.vue'
 import { ref } from 'vue'
+import { reportError } from '@/stores/errorstore'
 
 function isString(value: unknown): value is string {
   return typeof value === 'string';
@@ -116,7 +117,7 @@ const tracksByTrackId = ref<Record<number, Track>>({})
 const loading = ref(false)
 
 
-loadTracks().catch((e) => { console.error(e) })
+loadTracks().catch((e) => { reportError(e) })
 
 
 async function loadTracks() {
@@ -149,7 +150,7 @@ async function loadTracks() {
 }
 async function nameFromSrc(item: TableItem): Promise<boolean> {
 
-  if (!isNumber(item.id)) throw Error("item.id not number")
+  if (!isNumber(item.id)) { reportError("nameFromSrc: item.id not number"); return false }
   const id = item.id
   item.loading = true
 
@@ -164,11 +165,11 @@ async function nameFromSrc(item: TableItem): Promise<boolean> {
       updatedName = updatedTrack.name
       console.log(`Updated name ${updatedName}`)
     } else {
-      console.error(`Could not read updated track with id ${id}`)
+      reportError(`Could not read updated track with id ${id}`)
       return false
     }
   } else {
-    console.error(`Updating name from source for track ${id} failed`)
+    reportError(`Updating name from source for track ${id} failed`)
     return false
   }
 
@@ -185,18 +186,22 @@ async function nameFromSrc(item: TableItem): Promise<boolean> {
 //   })
 // }
 async function deleteTrackFromTable(item: TableItem) {
-  if (!isNumber(item.id)) throw Error("item.id not number")
-  const success = await deleteTrack(item.id, props.sid)
-  if (success) {
-    delete tracksByTrackId.value[item.id]
-    // delete element
-    const idx = tableItems.value.findIndex((e) => e.id === item.id)
-    tableItems.value.splice(idx, 1)
+  if (!isNumber(item.id)) { reportError("deleteTrackFromTable: item.id not number"); return }
+  try {
+    const success = await deleteTrack(item.id, props.sid)
+    if (success) {
+      delete tracksByTrackId.value[item.id]
+      // delete element
+      const idx = tableItems.value.findIndex((e) => e.id === item.id)
+      tableItems.value.splice(idx, 1)
+    }
+  } catch (error) {
+    reportError("deleteTrackFromTable failed", error)
   }
 }
 
 async function processNameUpdate(item: TableItem, updatedValue: string): Promise<boolean> {
-  if (!isNumber(item.id)) throw Error("item.id not number")
+  if (!isNumber(item.id)) { reportError("processNameUpdate: item.id not number"); return false }
   console.log('in upper component:', item.id, updatedValue)
   try {
     const success = await updateTrackById(item.id, { name: updatedValue }, props.sid)
@@ -209,7 +214,7 @@ async function processNameUpdate(item: TableItem, updatedValue: string): Promise
       return false
     }
   } catch (error) {
-    console.error(error)
+    reportError(error)
     return false
   }
 }
diff --git a/client/src/views/UploadPage.vue b/client/src/views/UploadPage.vue
index 1b4642f6..09b9c750 100644
--- a/client/src/views/UploadPage.vue
+++ b/client/src/views/UploadPage.vue
@@ -42,6 +42,7 @@ import { FileUploadQueue, makeFileIdObject } from '@/lib/FileUploadQueue'
 import type { QueueStatus, QueuedFile } from '@/lib/uploadFile'
 import { UploadError } from '@/lib/uploadFile'
 import type { AsyncResultCallback } from 'async'
+import { reportError } from '@/stores/errorstore'
 type CallbackArguments = Parameters<AsyncResultCallback<number, UploadError>>;
 
 const props = defineProps({
@@ -62,26 +63,28 @@ const visibleUploadItems = computed(() => {
   return visibleList
 })
 
-function getUploadItemByKey(key: number) {
+function getUploadItemByKey(key: number): QueuedFile | undefined {
   const item = uploadList.value.find(element => element.key === key)
-  if (item === undefined) { throw new UploadError(`Could not find Upload item with id ${key}`, "") }
+  if (item === undefined) { reportError(`Could not find Upload item with id ${key}`) }
   return item
 }
 
 function setItemProcessingStatus(key: number, status: QueueStatus) {
   const item = getUploadItemByKey(key)
+  if (!item) return
   item.status = status
 }
 
 function setItemVisibility(key: number, visibility: boolean) {
   const item = getUploadItemByKey(key)
+  if (!item) return
   item.visible = visibility
 }
 
 function onChange(event: Event) {
-  if (event.target === null) { console.error("Event target is null"); return }
+  if (event.target === null) { reportError("Event target is null"); return }
   const target = (event.target as HTMLInputElement)
-  if (target.files === null) { console.error("target.files is null"); return }
+  if (target.files === null) { reportError("target.files is null"); return }
   processDragDrop(target.files)
 }
 
@@ -114,10 +117,10 @@ function addItemToQueue(fileIdObject: QueuedFile) {
 
 function completedCallBack(err: CallbackArguments[0], key: CallbackArguments[1]): void {
   //console.log(`Finished processing ${key}`)
-  if (key === null || key === undefined) throw Error("key is null")
+  if (key === null || key === undefined) { reportError("completedCallBack: key is null"); return }
   if (err) {
-    console.error('Error occured during queue processing: ', err.message)
-    console.error('Error cause: ', err)
+    reportError('Error occured during queue processing: ', err.message)
+    reportError('Error cause: ', err)
     setItemProcessingStatus(key, 'Failed')
   } else {
     setItemProcessingStatus(key, 'Completed' as QueueStatus)
diff --git a/client/tests/unit/components/ErrorIndicator.spec.ts b/client/tests/unit/components/ErrorIndicator.spec.ts
new file mode 100644
index 00000000..5193a520
--- /dev/null
+++ b/client/tests/unit/components/ErrorIndicator.spec.ts
@@ -0,0 +1,380 @@
+import { render, fireEvent, waitFor } from '@testing-library/vue'
+import { within } from '@testing-library/dom'
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { nextTick } from 'vue'
+import ErrorIndicator from '@/components/ErrorIndicator.vue'
+import { useErrorStore } from '@/stores/errorstore'
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+vi.mock('bootstrap-vue-next', () => ({
+  BModal: {
+    name: 'BModal',
+    props: {
+      modelValue: { type: Boolean, default: false },
+      title: { type: String, default: '' },
+    },
+    emits: ['update:modelValue'],
+    template: `
+      <div v-if="modelValue" :data-modal-title="title">
+        <slot />
+        <slot name="footer" />
+      </div>
+    `,
+  },
+  BButton: {
+    name: 'BButton',
+    props: { variant: String },
+    emits: ['click'],
+    template: `<button @click="$emit('click')"><slot /></button>`,
+  },
+}))
+
+// ---------------------------------------------------------------------------
+// Clipboard stub
+// ---------------------------------------------------------------------------
+
+const mockWriteText = vi.fn<(text: string) => Promise<void>>().mockResolvedValue(undefined)
+
+beforeEach(() => {
+  mockWriteText.mockClear()
+  Object.defineProperty(navigator, 'clipboard', {
+    value: { writeText: mockWriteText },
+    configurable: true,
+    writable: true,
+  })
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+// ---------------------------------------------------------------------------
+// Render helper
+// Errors are pre-populated BEFORE render so the component mounts with the
+// correct state already in the store (avoids nextTick() gaps in most tests).
+// ---------------------------------------------------------------------------
+
+function renderIndicator(initialErrors: { message: string; detail?: string }[] = []) {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const store = useErrorStore()
+  for (const { message, detail } of initialErrors) store.addError(message, detail)
+  const result = render(ErrorIndicator, { global: { plugins: [pinia] } })
+  return { ...result, store }
+}
+
+// Helper: open the error overlay by clicking the FAB.
+async function openOverlay(getByRole: ReturnType<typeof render>['getByRole']) {
+  await fireEvent.click(getByRole('button', { name: /error/i }))
+}
+
+// ---------------------------------------------------------------------------
+// FAB (floating action button)
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – FAB', () => {
+  test('no button is rendered when the store is empty', () => {
+    const { queryByRole } = renderIndicator()
+    expect(queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  test('button is rendered when the store has at least one error', () => {
+    const { getByRole } = renderIndicator([{ message: 'network error' }])
+    expect(getByRole('button', { name: /error/i })).toBeInTheDocument()
+  })
+
+  test('button appears reactively after an error is added post-render', async () => {
+    const { queryByRole, store } = renderIndicator()
+    expect(queryByRole('button')).not.toBeInTheDocument()
+
+    store.addError('late arrival')
+    await nextTick()
+
+    expect(queryByRole('button', { name: /error/i })).toBeInTheDocument()
+  })
+
+  test('aria-label includes the error count', () => {
+    const { getByRole } = renderIndicator([
+      { message: 'e1' },
+      { message: 'e2' },
+      { message: 'e3' },
+    ])
+    expect(getByRole('button', { name: /3 error/i })).toBeInTheDocument()
+  })
+
+  test('badge shows the numeric count for a small number of errors', () => {
+    const { getByText } = renderIndicator([
+      { message: 'a' },
+      { message: 'b' },
+      { message: 'c' },
+    ])
+    expect(getByText('3')).toBeInTheDocument()
+  })
+
+  test('badge shows "99+" when there are exactly 100 errors', () => {
+    const errors = Array.from({ length: 100 }, (_, i) => ({ message: `msg-${i}` }))
+    const { getByText } = renderIndicator(errors)
+    expect(getByText('99+')).toBeInTheDocument()
+  })
+
+  test('badge shows "99+" when there are more than 100 errors', () => {
+    const errors = Array.from({ length: 150 }, (_, i) => ({ message: `msg-${i}` }))
+    const { getByText } = renderIndicator(errors)
+    expect(getByText('99+')).toBeInTheDocument()
+  })
+
+  test('clicking the button opens the error overlay', async () => {
+    const { getByRole, getByText } = renderIndicator([{ message: 'visible error' }])
+    await openOverlay(getByRole)
+    expect(getByText('visible error')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Error overlay (main modal)
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – error overlay', () => {
+  test('error messages are NOT visible before the FAB is clicked', () => {
+    const { queryByText } = renderIndicator([{ message: 'hidden message' }])
+    expect(queryByText('hidden message')).not.toBeInTheDocument()
+  })
+
+  test('all error messages are listed after opening', async () => {
+    const { getByRole, getByText } = renderIndicator([
+      { message: 'first error' },
+      { message: 'second error' },
+    ])
+    await openOverlay(getByRole)
+    expect(getByText('first error')).toBeInTheDocument()
+    expect(getByText('second error')).toBeInTheDocument()
+  })
+
+  test('the timestamp of each error is visible', async () => {
+    const { getByRole, store } = renderIndicator([{ message: 'ts message' }])
+    const expectedTime = store.errors[0]!.timestamp.toLocaleTimeString()
+
+    await openOverlay(getByRole)
+
+    expect(document.body.textContent).toContain(expectedTime)
+  })
+
+  test('detail text is shown when the entry has a detail field', async () => {
+    const { getByRole, getByText } = renderIndicator([
+      { message: 'main msg', detail: 'stack line 1\nstack line 2' },
+    ])
+    await openOverlay(getByRole)
+    expect(getByText(/stack line 1/)).toBeInTheDocument()
+  })
+
+  test('detail is not rendered as "undefined" when the entry has no detail', async () => {
+    const { getByRole, queryByText } = renderIndicator([{ message: 'no detail' }])
+    await openOverlay(getByRole)
+    expect(queryByText('undefined')).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Dismiss individual error
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – dismiss individual', () => {
+  test('clicking the dismiss button removes that entry from the list', async () => {
+    const { getByRole, queryByText, getByText } = renderIndicator([
+      { message: 'gone soon' },
+      { message: 'stays here' },
+    ])
+    await openOverlay(getByRole)
+    expect(getByText('gone soon')).toBeInTheDocument()
+
+    const dismissBtns = document.querySelectorAll('button[aria-label="Dismiss"]')
+    await fireEvent.click(dismissBtns[0]!) // first entry = 'gone soon'
+
+    expect(queryByText('gone soon')).not.toBeInTheDocument()
+    expect(getByText('stays here')).toBeInTheDocument()
+  })
+
+  test('remaining error count is correct after dismissing one', async () => {
+    const { getByRole, store } = renderIndicator([
+      { message: 'a' },
+      { message: 'b' },
+      { message: 'c' },
+    ])
+    await openOverlay(getByRole)
+
+    const dismissBtns = document.querySelectorAll('button[aria-label="Dismiss"]')
+    await fireEvent.click(dismissBtns[0]!) // remove 'a'
+
+    expect(store.errorCount).toBe(2)
+    expect(store.errors.map(e => e.message)).toEqual(['b', 'c'])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Clear All flow
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – clear all', () => {
+  test('clicking "Clear All" in the overlay opens a confirmation dialog', async () => {
+    const { getByRole, getByText } = renderIndicator([{ message: 'some error' }])
+    await openOverlay(getByRole)
+    await fireEvent.click(getByRole('button', { name: 'Clear All' }))
+
+    expect(getByText(/Dismiss all/)).toBeInTheDocument()
+  })
+
+  test('confirmation dialog shows the current error count', async () => {
+    const { getByRole, getByText } = renderIndicator([
+      { message: 'err-1' },
+      { message: 'err-2' },
+    ])
+    await openOverlay(getByRole)
+    await fireEvent.click(getByRole('button', { name: 'Clear All' }))
+
+    expect(getByText(/Dismiss all 2/)).toBeInTheDocument()
+  })
+
+  test('clicking "Cancel" in the confirmation keeps all errors', async () => {
+    const { getByRole, store } = renderIndicator([{ message: 'survives' }])
+    await openOverlay(getByRole)
+    await fireEvent.click(getByRole('button', { name: 'Clear All' }))
+    await fireEvent.click(getByRole('button', { name: 'Cancel' }))
+
+    expect(store.errorCount).toBe(1)
+    expect(store.errors[0]!.message).toBe('survives')
+  })
+
+  test('confirming "Clear All" empties the error store', async () => {
+    const { getByRole, container, store } = renderIndicator([
+      { message: 'gone-1' },
+      { message: 'gone-2' },
+    ])
+    await openOverlay(getByRole)
+    await fireEvent.click(getByRole('button', { name: 'Clear All' }))
+
+    // Two "Clear All" buttons are in the DOM at this point: one from the main
+    // modal footer, one from the confirm dialog. Scope to the confirm dialog.
+    const confirmModal = container.querySelector<HTMLElement>('[data-modal-title="Clear all errors?"]')!
+    await fireEvent.click(within(confirmModal).getByRole('button', { name: 'Clear All' }))
+
+    expect(store.errorCount).toBe(0)
+    expect(store.hasErrors).toBe(false)
+  })
+
+  test('confirming "Clear All" hides both the overlay and the confirmation dialog', async () => {
+    const { getByRole, queryByText, container } = renderIndicator([
+      { message: 'will-disappear' },
+    ])
+    await openOverlay(getByRole)
+    await fireEvent.click(getByRole('button', { name: 'Clear All' }))
+
+    const confirmModal = container.querySelector<HTMLElement>('[data-modal-title="Clear all errors?"]')!
+    await fireEvent.click(within(confirmModal).getByRole('button', { name: 'Clear All' }))
+
+    expect(queryByText('will-disappear')).not.toBeInTheDocument()
+    expect(queryByText(/Dismiss all/)).not.toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Clipboard – copy single message
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – copy single message', () => {
+  test('clicking the copy button invokes the clipboard API', async () => {
+    const { getByRole, getAllByTitle } = renderIndicator([{ message: 'clipboard-test' }])
+    await openOverlay(getByRole)
+    await fireEvent.click(getAllByTitle('Copy message')[0]!)
+
+    await waitFor(() => expect(mockWriteText).toHaveBeenCalledTimes(1))
+  })
+
+  test('clipboard receives [ISO-timestamp] message format', async () => {
+    const { getByRole, getAllByTitle, store } = renderIndicator([{ message: 'format check' }])
+    const entry = store.errors[0]!
+    await openOverlay(getByRole)
+    await fireEvent.click(getAllByTitle('Copy message')[0]!)
+
+    const expected = `[${entry.timestamp.toISOString()}] ${entry.message}`
+    await waitFor(() => expect(mockWriteText).toHaveBeenCalledWith(expected))
+  })
+
+  test('clipboard text includes the detail on a new line when present', async () => {
+    const { getByRole, getAllByTitle, store } = renderIndicator([
+      { message: 'err with detail', detail: 'Error: inner\n  at foo.ts:10' },
+    ])
+    const entry = store.errors[0]!
+    await openOverlay(getByRole)
+    await fireEvent.click(getAllByTitle('Copy message')[0]!)
+
+    const expected = `[${entry.timestamp.toISOString()}] ${entry.message}\n${entry.detail}`
+    await waitFor(() => expect(mockWriteText).toHaveBeenCalledWith(expected))
+  })
+
+  test('clipboard text does not end with a newline when there is no detail', async () => {
+    const { getByRole, getAllByTitle, store } = renderIndicator([{ message: 'clean' }])
+    const entry = store.errors[0]!
+    await openOverlay(getByRole)
+    await fireEvent.click(getAllByTitle('Copy message')[0]!)
+
+    await waitFor(() => {
+      const arg = mockWriteText.mock.lastCall![0]
+      expect(arg).toBe(`[${entry.timestamp.toISOString()}] ${entry.message}`)
+      expect(arg.endsWith('\n')).toBe(false)
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// Clipboard – copy all messages
+// ---------------------------------------------------------------------------
+
+describe('ErrorIndicator – copy all messages', () => {
+  test('Copy All writes all entries joined by a separator', async () => {
+    const { getByRole, getByText, store } = renderIndicator([
+      { message: 'first' },
+      { message: 'second' },
+    ])
+    const [e1, e2] = store.errors
+    await openOverlay(getByRole)
+    await fireEvent.click(getByText('Copy All'))
+
+    const expected =
+      `[${e1!.timestamp.toISOString()}] ${e1!.message}` +
+      '\n\n---\n\n' +
+      `[${e2!.timestamp.toISOString()}] ${e2!.message}`
+
+    await waitFor(() => expect(mockWriteText).toHaveBeenCalledWith(expected))
+  })
+
+  test('Copy All for a single entry produces no separator', async () => {
+    const { getByRole, getByText, store } = renderIndicator([{ message: 'solo entry' }])
+    const entry = store.errors[0]!
+    await openOverlay(getByRole)
+    await fireEvent.click(getByText('Copy All'))
+
+    await waitFor(() => {
+      const arg = mockWriteText.mock.lastCall![0]
+      expect(arg).toBe(`[${entry.timestamp.toISOString()}] ${entry.message}`)
+      expect(arg).not.toContain('---')
+    })
+  })
+
+  test('Copy All includes detail lines for entries that have them', async () => {
+    const { getByRole, getByText, store } = renderIndicator([
+      { message: 'err', detail: 'Error: boom\n  at bar.ts:5' },
+    ])
+    const entry = store.errors[0]!
+    await openOverlay(getByRole)
+    await fireEvent.click(getByText('Copy All'))
+
+    await waitFor(() => {
+      const arg = mockWriteText.mock.lastCall![0]
+      expect(arg).toContain(entry.detail!)
+    })
+  })
+})
diff --git a/client/tests/unit/lib/auth/registration.spec.ts b/client/tests/unit/lib/auth/registration.spec.ts
index b260e510..7c7404e9 100644
--- a/client/tests/unit/lib/auth/registration.spec.ts
+++ b/client/tests/unit/lib/auth/registration.spec.ts
@@ -7,6 +7,11 @@ import type { PublicKeyCredentialCreationOptionsJSON, RegistrationResponseJSON }
 vi.mock("@/lib/httpHelpers")
 vi.mock("@simplewebauthn/browser")
 
+const mockReportError = vi.hoisted(() => vi.fn())
+vi.mock("@/stores/errorstore", () => ({
+  reportError: mockReportError,
+}))
+
 const mockGetWithCORS = vi.mocked(httpHelpers.getWithCORS)
 const mockSendJSONToServer = vi.mocked(httpHelpers.sendJSONToServer)
 const mockGetErrorMessage = vi.mocked(httpHelpers.getErrorMessage)
diff --git a/client/tests/unit/lib/trackLoadAsyncWorker.spec.ts b/client/tests/unit/lib/trackLoadAsyncWorker.spec.ts
index 41b7119a..e64d81ff 100644
--- a/client/tests/unit/lib/trackLoadAsyncWorker.spec.ts
+++ b/client/tests/unit/lib/trackLoadAsyncWorker.spec.ts
@@ -4,6 +4,11 @@ import * as trackServices from '@/lib/trackServices'
 import { Track } from '@/lib/Track'
 import type { MultiLineStringWithTrack } from '@/lib/zodSchemas'
 
+const mockReportError = vi.hoisted(() => vi.fn())
+vi.mock('@/stores/errorstore', () => ({
+  reportError: mockReportError,
+}))
+
 vi.mock('@/lib/trackServices', () => ({
   getTrackMetaDataByIdList: vi.fn(),
   getMultiLineStringWithIdList: vi.fn(),
@@ -109,38 +114,51 @@ describe('createTrackLoadingAsyncWorker', () => {
     expect(addFn).not.toHaveBeenCalled()
   })
 
-  test('throws when track metadata is missing for an id', async () => {
+  test('reports error and skips when track metadata is missing for an id', async () => {
+    const addFn = vi.fn()
     const task: Task = { idList: [1, 2], signal: new AbortController().signal }
 
     mockedGetTrackMetaData.mockResolvedValue([track1]) // only track1, missing track2
     mockedGetMultiLineString.mockResolvedValue([geoJson1, geoJson2])
 
-    await expect(
-      asAwaitable(createTrackLoadingAsyncWorker(vi.fn(), 'sid'))(task)
-    ).rejects.toThrow('Track for id 2 is undefined')
+    await asAwaitable(createTrackLoadingAsyncWorker(addFn, 'sid'))(task)
+
+    expect(mockReportError).toHaveBeenCalledWith('Track for id 2 is undefined')
+    // track1 should still be processed successfully
+    expect(addFn).toHaveBeenCalledTimes(1)
+    const arg = addFn.mock.calls[0]?.[0] as MultiLineStringWithTrack
+    expect(arg.track.id).toBe(1)
   })
 
-  test('throws when geojson is missing for an id', async () => {
+  test('reports error and skips when geojson is missing for an id', async () => {
+    const addFn = vi.fn()
     const task: Task = { idList: [1, 2], signal: new AbortController().signal }
 
     mockedGetTrackMetaData.mockResolvedValue([track1, track2])
     mockedGetMultiLineString.mockResolvedValue([geoJson1]) // only geoJson1, missing geoJson2
 
-    await expect(
-      asAwaitable(createTrackLoadingAsyncWorker(vi.fn(), 'sid'))(task)
-    ).rejects.toThrow('GeoJson for id 2 is undefined')
+    await asAwaitable(createTrackLoadingAsyncWorker(addFn, 'sid'))(task)
+
+    expect(mockReportError).toHaveBeenCalledWith('GeoJson for id 2 is undefined')
+    // track1 should still be processed successfully
+    expect(addFn).toHaveBeenCalledTimes(1)
+    const arg = addFn.mock.calls[0]?.[0] as MultiLineStringWithTrack
+    expect(arg.track.id).toBe(1)
   })
 
-  test('throws when getTrackMetaDataByIdList returns null', async () => {
+  test('reports error and returns early when getTrackMetaDataByIdList returns null', async () => {
+    const addFn = vi.fn()
     const task: Task = { idList: [1], signal: new AbortController().signal }
 
     // The `=== null` check in the worker is a defensive guard; the function's
     // return type is `Track[]`, so a cast is needed to exercise this dead branch.
     mockedGetTrackMetaData.mockResolvedValue(null as unknown as Track[])
 
-    await expect(
-      asAwaitable(createTrackLoadingAsyncWorker(vi.fn(), 'sid'))(task)
-    ).rejects.toThrow('Track metadata list could not be loaded')
+    await asAwaitable(createTrackLoadingAsyncWorker(addFn, 'sid'))(task)
+
+    expect(mockReportError).toHaveBeenCalledWith('Track metadata list could not be loaded')
+    expect(mockedGetMultiLineString).not.toHaveBeenCalled()
+    expect(addFn).not.toHaveBeenCalled()
   })
 
   test('processes single track correctly', async () => {
diff --git a/client/tests/unit/lib/trackServices.spec.ts b/client/tests/unit/lib/trackServices.spec.ts
index e60f9db4..f86c4bcc 100644
--- a/client/tests/unit/lib/trackServices.spec.ts
+++ b/client/tests/unit/lib/trackServices.spec.ts
@@ -11,6 +11,11 @@ vi.mock('@/stores/userlogin', () => ({
   useUserLoginStore: () => ({ handleUnauthorized: mockHandleUnauthorized }),
 }))
 
+const mockReportError = vi.hoisted(() => vi.fn())
+vi.mock('@/stores/errorstore', () => ({
+  reportError: mockReportError,
+}))
+
 const trackData1 = {
   id: 1,
   name: 'Mountain Summit Trail',
@@ -74,6 +79,7 @@ describe('trackServices', () => {
   beforeEach(() => {
     mockFetch.mockReset()
     mockHandleUnauthorized.mockReset()
+    mockReportError.mockReset()
   })
 
   describe('getIdListByExtentAndTime', () => {
diff --git a/client/tests/unit/stores/errorstore.spec.ts b/client/tests/unit/stores/errorstore.spec.ts
new file mode 100644
index 00000000..206a2965
--- /dev/null
+++ b/client/tests/unit/stores/errorstore.spec.ts
@@ -0,0 +1,317 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useErrorStore, reportError } from '@/stores/errorstore'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Returns a fresh store for each test (pinia is reset in beforeEach). */
+function getStore() {
+  return useErrorStore()
+}
+
+// ---------------------------------------------------------------------------
+// useErrorStore
+// ---------------------------------------------------------------------------
+
+describe('useErrorStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  // -----------------------------------------------------------------------
+  // Initial state
+  // -----------------------------------------------------------------------
+
+  describe('initial state', () => {
+    test('errors list is empty', () => {
+      expect(getStore().errors).toHaveLength(0)
+    })
+
+    test('errorCount is 0', () => {
+      expect(getStore().errorCount).toBe(0)
+    })
+
+    test('hasErrors is false', () => {
+      expect(getStore().hasErrors).toBe(false)
+    })
+  })
+
+  // -----------------------------------------------------------------------
+  // addError
+  // -----------------------------------------------------------------------
+
+  describe('addError', () => {
+    test('appends an entry with the given message', () => {
+      const store = getStore()
+      store.addError('something broke')
+      expect(store.errors[0]!.message).toBe('something broke')
+    })
+
+    test('assigns a timestamp close to the moment it was called', () => {
+      const before = Date.now()
+      const store = getStore()
+      store.addError('ts-test')
+      const after = Date.now()
+      const ts = store.errors[0]!.timestamp.getTime()
+      expect(ts).toBeGreaterThanOrEqual(before)
+      expect(ts).toBeLessThanOrEqual(after)
+    })
+
+    test('stores the detail string when provided', () => {
+      const store = getStore()
+      store.addError('msg', 'detailed stack trace')
+      expect(store.errors[0]!.detail).toBe('detailed stack trace')
+    })
+
+    test('leaves detail undefined when not provided', () => {
+      const store = getStore()
+      store.addError('msg')
+      expect(store.errors[0]!.detail).toBeUndefined()
+    })
+
+    test('each successive call produces a distinct id', () => {
+      const store = getStore()
+      store.addError('first')
+      store.addError('second')
+      expect(store.errors[0]!.id).not.toBe(store.errors[1]!.id)
+    })
+
+    test('increments errorCount', () => {
+      const store = getStore()
+      store.addError('a')
+      expect(store.errorCount).toBe(1)
+      store.addError('b')
+      expect(store.errorCount).toBe(2)
+    })
+
+    test('sets hasErrors to true as soon as one entry exists', () => {
+      const store = getStore()
+      store.addError('x')
+      expect(store.hasErrors).toBe(true)
+    })
+
+    test('multiple errors are appended in order', () => {
+      const store = getStore()
+      store.addError('first')
+      store.addError('second')
+      store.addError('third')
+      expect(store.errors.map(e => e.message)).toEqual(['first', 'second', 'third'])
+    })
+  })
+
+  // -----------------------------------------------------------------------
+  // MAX_ERRORS cap (200)
+  // -----------------------------------------------------------------------
+
+  describe('cap at 200 errors', () => {
+    test('count stays at 200 when 201 errors are added', () => {
+      const store = getStore()
+      for (let i = 1; i <= 201; i++) store.addError(`msg-${i}`)
+      expect(store.errors).toHaveLength(200)
+    })
+
+    test('the first (oldest) entry is evicted, not the newest', () => {
+      const store = getStore()
+      for (let i = 1; i <= 200; i++) store.addError(`msg-${i}`)
+      const oldestMessage = store.errors[0]!.message
+
+      store.addError('msg-201')
+
+      expect(store.errors[0]!.message).not.toBe(oldestMessage)
+      expect(store.errors[store.errors.length - 1]!.message).toBe('msg-201')
+    })
+
+    test('does not evict when adding exactly the 200th entry', () => {
+      const store = getStore()
+      for (let i = 1; i <= 199; i++) store.addError(`msg-${i}`)
+      const firstMessageBefore = store.errors[0]!.message
+
+      store.addError('msg-200')
+
+      expect(store.errors).toHaveLength(200)
+      expect(store.errors[0]!.message).toBe(firstMessageBefore)
+    })
+  })
+
+  // -----------------------------------------------------------------------
+  // dismissError
+  // -----------------------------------------------------------------------
+
+  describe('dismissError', () => {
+    test('removes the entry with the matching id', () => {
+      const store = getStore()
+      store.addError('keep')
+      store.addError('remove')
+      const idToRemove = store.errors[1]!.id
+
+      store.dismissError(idToRemove)
+
+      expect(store.errors).toHaveLength(1)
+      expect(store.errors[0]!.message).toBe('keep')
+    })
+
+    test('leaves all other entries intact when removing from the middle', () => {
+      const store = getStore()
+      store.addError('a')
+      store.addError('b')
+      store.addError('c')
+      const middleId = store.errors[1]!.id
+
+      store.dismissError(middleId)
+
+      expect(store.errors.map(e => e.message)).toEqual(['a', 'c'])
+    })
+
+    test('is a no-op for an id that does not exist', () => {
+      const store = getStore()
+      store.addError('stays')
+      const countBefore = store.errorCount
+
+      store.dismissError(-999)
+
+      expect(store.errorCount).toBe(countBefore)
+      expect(store.errors[0]!.message).toBe('stays')
+    })
+
+    test('removing the last entry resets hasErrors to false', () => {
+      const store = getStore()
+      store.addError('only one')
+      const id = store.errors[0]!.id
+
+      store.dismissError(id)
+
+      expect(store.hasErrors).toBe(false)
+      expect(store.errorCount).toBe(0)
+    })
+  })
+
+  // -----------------------------------------------------------------------
+  // dismissAll
+  // -----------------------------------------------------------------------
+
+  describe('dismissAll', () => {
+    test('empties the error list', () => {
+      const store = getStore()
+      store.addError('a')
+      store.addError('b')
+
+      store.dismissAll()
+
+      expect(store.errors).toHaveLength(0)
+    })
+
+    test('resets errorCount to 0', () => {
+      const store = getStore()
+      store.addError('x')
+
+      store.dismissAll()
+
+      expect(store.errorCount).toBe(0)
+    })
+
+    test('resets hasErrors to false', () => {
+      const store = getStore()
+      store.addError('x')
+
+      store.dismissAll()
+
+      expect(store.hasErrors).toBe(false)
+    })
+
+    test('is a no-op on an already empty store', () => {
+      const store = getStore()
+
+      expect(() => store.dismissAll()).not.toThrow()
+      expect(store.errors).toHaveLength(0)
+    })
+  })
+})
+
+// ---------------------------------------------------------------------------
+// reportError
+// ---------------------------------------------------------------------------
+
+describe('reportError', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  test('forwards all arguments to console.error', () => {
+    reportError('something', 'extra context')
+    expect(vi.mocked(console.error)).toHaveBeenCalledWith('something', 'extra context')
+  })
+
+  test('adds exactly one entry to the store', () => {
+    const store = useErrorStore()
+    reportError('boom')
+    expect(store.errors).toHaveLength(1)
+  })
+
+  test('stores a plain string message verbatim', () => {
+    const store = useErrorStore()
+    reportError('network timeout')
+    expect(store.errors[0]!.message).toBe('network timeout')
+  })
+
+  test('joins multiple string arguments with a space', () => {
+    const store = useErrorStore()
+    reportError('Error in', 'fetchData:', 'timed out')
+    expect(store.errors[0]!.message).toBe('Error in fetchData: timed out')
+  })
+
+  test('formats an Error object as "Name: message"', () => {
+    const store = useErrorStore()
+    reportError(new TypeError('expected string, got number'))
+    expect(store.errors[0]!.message).toBe('TypeError: expected string, got number')
+  })
+
+  test('stores the Error stack as the detail field', () => {
+    const store = useErrorStore()
+    const err = new Error('with stack')
+    reportError(err)
+    expect(store.errors[0]!.detail).toBe(err.stack)
+  })
+
+  test('concatenates a prefix string with a following Error', () => {
+    const store = useErrorStore()
+    reportError('failed to load track:', new RangeError('id out of range'))
+    expect(store.errors[0]!.message).toBe('failed to load track: RangeError: id out of range')
+  })
+
+  test('detail is undefined when no Error is among the arguments', () => {
+    const store = useErrorStore()
+    reportError('plain string only')
+    expect(store.errors[0]!.detail).toBeUndefined()
+  })
+
+  test('serializes a plain object as JSON', () => {
+    const store = useErrorStore()
+    reportError({ status: 503, url: '/api/tracks' })
+    expect(store.errors[0]!.message).toBe('{"status":503,"url":"/api/tracks"}')
+  })
+
+  test('does not throw for a non-JSON-serializable value (circular reference)', () => {
+    const store = useErrorStore()
+    const circular: Record<string, unknown> = {}
+    circular.self = circular
+
+    expect(() => reportError(circular)).not.toThrow()
+    expect(store.errors).toHaveLength(1)
+    expect(typeof store.errors[0]!.message).toBe('string')
+  })
+
+  test('uses the first Error stack even when multiple Errors are passed', () => {
+    const store = useErrorStore()
+    const err1 = new Error('first')
+    const err2 = new Error('second')
+    reportError(err1, err2)
+    expect(store.errors[0]!.detail).toBe(err1.stack)
+  })
+})