update error handling and add error boundary component

src/pages/SettingsPage.tsx

@@ -34,6 +34,7 @@ import { useServers } from '../context/ServersContext'
 import { buildLibraryCacheKey, getLibraryCacheStats, pruneLibraryCache } from '../libraryCache'
 import { syncLibraryCache } from '../librarySync'
 import { APP_THEME_PRESETS, type AppThemeId } from '../themes'
+import { formatBytes } from '../utils/formatBytes'
 type ServerForm = Omit<Server, 'id' | 'lastTest' | 'host' | 'port'> & {
   endpoint: string
 }
@@ -181,20 +182,6 @@ export default function SettingsPage({ onClose, devOverlayEnabled, onDevOverlayE
 
   const preferencesDirty = draftAppTheme !== appTheme || draftLibraryDisplayMode !== libraryDisplayMode || draftLibraryPrimaryAction !== libraryPrimaryAction || draftDevOverlayEnabled !== devOverlayEnabled
 
-  const formatBytes = (value: number) => {
-    if (!value || value <= 0) return '0 B'
-    const units = ['B', 'KB', 'MB', 'GB']
-    let size = value
-    let unitIndex = 0
-
-    while (size >= 1024 && unitIndex < units.length - 1) {
-      size /= 1024
-      unitIndex += 1
-    }
-
-    return `${size >= 10 || unitIndex === 0 ? size.toFixed(0) : size.toFixed(1)} ${units[unitIndex]}`
-  }
-
   const refreshCacheStats = async (cacheKey: string) => {
     if (!cacheKey) {
       setCacheStorageText('0 B')
@@ -207,7 +194,7 @@ export default function SettingsPage({ onClose, devOverlayEnabled, onDevOverlayE
 
     await pruneLibraryCache(cacheKey)
     const stats = await getLibraryCacheStats(cacheKey)
-    setCacheStorageText(formatBytes(stats.activeBytes))
+    setCacheStorageText(formatBytes(stats.activeBytes) || '0 B')
     setCacheTrackCount(stats.trackCount)
     setCacheSearchCount(stats.searchEntryCount)
     setCacheSnapshotCount(stats.snapshotCount)