fix(ui): use portable crypto API and async bootstrap pattern

- Replace node:crypto import with globalThis.crypto.randomUUID() in
  ui-common UUID utility for browser compatibility
- Rewrite ui-web main.ts with async bootstrap() pattern instead of
  top-level await, following Vue.js community best practices
- Remove unused ToastPlugin registration (all code uses useToast()
  composable directly)
- Add granular error handling for fetch, parse, and init phases

diff --git a/ui/common/src/utils/UUID.ts b/ui/common/src/utils/UUID.ts
index d6236474bb5fa7f30fe71e0be8ef295974e1ce05..9bb7dc6e500e6dc3397b05de8171fad632d4fdeb 100644 (file)
--- a/ui/common/src/utils/UUID.ts
+++ b/ui/common/src/utils/UUID.ts
@@ -1,11 +1,9 @@
-import { randomUUID as cryptoRandomUUID } from 'node:crypto'
-
 import type { UUIDv4 } from '../types/UUID.js'
 
 const UUID_V4_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
 
 export const randomUUID = (): UUIDv4 => {
-  return cryptoRandomUUID() as UUIDv4
+  return globalThis.crypto.randomUUID() as UUIDv4
 }
 
 export const validateUUID = (uuid: unknown): uuid is UUIDv4 => {

diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 351a2778333fde08994215e767065393003fbee9..48eda6b855964ceafa35db8d25d9d282c51a3917 100644 (file)
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -5,7 +5,6 @@ import type {
 } from 'ui-common'
 
 import { type App as AppType, type Component, createApp, ref } from 'vue'
-import ToastPlugin from 'vue-toast-notification'
 
 import App from '@/App.vue'
 import {
@@ -35,8 +34,6 @@ const loadTheme = async (theme: string): Promise<void> => {
   }
 }
 
-const app = createApp(App as Component)
-
 const initializeApp = async (app: AppType, config: ConfigurationData): Promise<void> => {
   await loadTheme(config.theme ?? DEFAULT_THEME)
   app.config.errorHandler = (error, instance, info) => {
@@ -67,24 +64,34 @@ const initializeApp = async (app: AppType, config: ConfigurationData): Promise<v
   app.provide(chargingStationsKey, chargingStations)
   app.provide(templatesKey, templates)
   app.provide(uiClientKey, uiClient)
-  app.use(router).use(ToastPlugin).mount('#app')
+  app.use(router).mount('#app')
 }
 
-try {
-  const response = await fetch('/config.json')
+const bootstrap = async (): Promise<void> => {
+  const app = createApp(App as Component)
+  let response: Response
+  try {
+    response = await fetch('/config.json')
+  } catch (error: unknown) {
+    console.error('Error at fetching app configuration:', error)
+    return
+  }
   if (!response.ok) {
-    // TODO: add code for UI notifications or other error handling logic
     console.error('Failed to fetch app configuration')
-  } else {
-    try {
-      const config = (await response.json()) as ConfigurationData
-      await initializeApp(app, config)
-    } catch (error: unknown) {
-      // TODO: add code for UI notifications or other error handling logic
-      console.error('Error at deserializing JSON app configuration:', error)
-    }
+    return
+  }
+  let config: ConfigurationData
+  try {
+    config = (await response.json()) as ConfigurationData
+  } catch (error: unknown) {
+    console.error('Error at deserializing JSON app configuration:', error)
+    return
+  }
+  try {
+    await initializeApp(app, config)
+  } catch (error: unknown) {
+    console.error('Error at initializing app:', error)
   }
-} catch (error: unknown) {
-  // TODO: add code for UI notifications or other error handling logic
-  console.error('Error at fetching app configuration:', error)
 }
+
+bootstrap().catch(console.error)