update error handling and add error boundary component

src/pages/DownloadsPage.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { Box, Button, Chip, Divider, LinearProgress, Paper, Typography } from '@mui/material'
 import type { DownloadOverlayItem } from '../components/DownloadsOverlay'
+import { formatBytes } from '../utils/formatBytes'
 
 type DownloadsPageProps = {
   downloads: DownloadOverlayItem[]
@@ -10,20 +11,6 @@ type DownloadsPageProps = {
   onClearFinished: () => void
 }
 
-function formatBytes(value?: number | null) {
-  if (!value || value <= 0) return null
-  const units = ['B', 'KB', 'MB', 'GB', 'TB']
-  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]}`
-}
-
 function getProgressPercent(download: DownloadOverlayItem) {
   if (!download.totalBytes || download.totalBytes <= 0) return null
   return Math.max(0, Math.min(100, (download.receivedBytes / download.totalBytes) * 100))