🐛(frontend) return real 404s for missing hashed assets

Nginx was rewriting missing `/assets/*` files to `index.html`, so
requests for stale chunks got a 200 with the SPA shell served as a
JS module. That is what turned a plain 404 into the confusing:

  "TypeError: error loading dynamically imported module"

whenever a client loaded before a deployment requested an old chunk.

Stop rewriting missing `/assets/*` to `index.html`: those requests
now return a real 404 with `Cache-Control: no-store`. SPA route
fallback for non-asset paths is unchanged.

CHANGELOG.md

@@ -10,9 +10,7 @@ and this project adheres to
 
 ### Fixed
 
-- 📈(frontend) downgrade unreachable external home URL from error to event
-- 🐛(frontend) handle 401 responses when syncing user preferences
-- 🐛(frontend) harden speaker test against missing sinks and play errors
+- ✨(frontend) recover from stale lazy-loaded chunks after a deploy
 
 ## [1.26.0] - 2026-08-12
 

docker/dinum-frontend/nginx/default.conf

@@ -74,6 +74,13 @@ server {
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;
       add_header Cache-Control "public, max-age=2592000";
+      try_files $uri =404;
+      error_page 404 = @asset_missing;
+  }
+
+  location @asset_missing {
+      add_header Cache-Control "no-store" always;
+      return 404;
   }
 
   # Serve static files

src/frontend/default.conf

@@ -14,6 +14,13 @@ server {
   location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
       expires 30d;
       add_header Cache-Control "public, max-age=2592000";
+      try_files $uri =404;
+      error_page 404 = @asset_missing;
+  }
+
+  location @asset_missing {
+      add_header Cache-Control "no-store" always;
+      return 404;
   }
 
   # Serve static files

src/frontend/src/components/SoundTester.tsx

@@ -3,30 +3,27 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useMediaDeviceSelect } from '@livekit/components-react'
 import { reportError } from '@/features/analytics/telemetry'
-import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
 
 export const SoundTester = () => {
   const { t } = useTranslation('settings')
   const [isPlaying, setIsPlaying] = useState(false)
   const audioRef = useRef<HTMLAudioElement>(null)
 
-  const { devices, activeDeviceId } = useMediaDeviceSelect({
-    kind: 'audiooutput',
-  })
+  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
 
   useEffect(() => {
-    if (!canTestAudioOutput() || !activeDeviceId) return
-    if (!devices.some((device) => device.deviceId === activeDeviceId)) return
-    audioRef.current?.setSinkId(activeDeviceId).catch((error) => {
-      if (error instanceof DOMException && error.name === 'NotFoundError') {
-        return
+    const updateActiveId = async (deviceId: string) => {
+      try {
+        await audioRef?.current?.setSinkId(deviceId)
+      } catch (error) {
+        reportError(
+          'device_switch_failure',
+          new Error(`Error setting sinkId: ${error}`)
+        )
       }
-      reportError(
-        'device_switch_failure',
-        new Error(`Error setting sinkId: ${error}`)
-      )
-    })
-  }, [devices, activeDeviceId])
+    }
+    updateActiveId(activeDeviceId)
+  }, [activeDeviceId])
 
   // prevent pausing the sound
   navigator.mediaSession.setActionHandler('pause', function () {})
@@ -35,13 +32,9 @@ export const SoundTester = () => {
     <>
       <Button
         variant="secondaryText"
-        onPress={async () => {
-          try {
-            await audioRef?.current?.play()
-            setIsPlaying(true)
-          } catch {
-            setIsPlaying(false)
-          }
+        onPress={() => {
+          audioRef?.current?.play()
+          setIsPlaying(true)
         }}
         size="sm"
         isDisabled={isPlaying}
@@ -55,7 +48,7 @@ export const SoundTester = () => {
       {/* eslint-disable jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="/sounds/uprise.mp3"
+        src="sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </>

src/frontend/src/features/auth/api/useSyncUserPreferencesWithBackend.tsx

@@ -6,8 +6,6 @@ import { queryClient } from '@/api/queryClient'
 import { updateUserPreferences } from './updateUserPreferences'
 import { convertToBackendLanguage } from '@/utils/languages'
 import { useUser } from './useUser'
-import { ApiError } from '@/api/ApiError.ts'
-import { reportError } from '@/features/analytics/telemetry'
 
 /**
  * Hook that synchronizes user browser preferences (language, timezone) with backend user settings.
@@ -44,11 +42,6 @@ export const useSyncUserPreferencesWithBackend = () => {
       }
     }
 
-    syncBrowserPreferencesToBackend().catch((error) => {
-      if (error instanceof ApiError && error.statusCode === 401) return
-      reportError('generic_failure', error, {
-        context: '[useSyncUserPreferencesWithBackend] Failed to sync:',
-      })
-    })
+    syncBrowserPreferencesToBackend()
   }, [i18n.language, isLoggedIn, user, mutateAsync])
 }

src/frontend/src/features/home/routes/Home.tsx

@@ -15,7 +15,7 @@ import { css } from '@/styled-system/css'
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { LoadingScreen } from '@/components/LoadingScreen'
-import { captureEvent } from '@/features/analytics/telemetry'
+import { reportError } from '@/features/analytics/telemetry'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -161,10 +161,8 @@ const Home = () => {
           window.location.replace(data.external_home_url)
         } catch (error) {
           setRedirectFailed(true)
-          captureEvent('external-home-unreachable', {
-            error_name: error instanceof Error ? error.name : 'Unknown',
-            error_message:
-              error instanceof Error ? error.message : String(error),
+          reportError('generic_failure', error, {
+            context: 'Site is not reachable:',
           })
         }
       }

src/frontend/src/features/notifications/hooks/useSoundNotification.tsx

@@ -6,7 +6,7 @@ import type { NotificationType } from '@/features/notifications/NotificationType
 // fixme - handle dynamic audio output changes
 export const useNotificationSound = () => {
   const notificationsSnap = useSnapshot(notificationsStore)
-  const [play] = useSound('/sounds/notifications.mp3', {
+  const [play] = useSound('./sounds/notifications.mp3', {
     sprite: {
       participantJoined: [0, 1150],
       handRaised: [1400, 180],

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -126,7 +126,7 @@ export const OutputSoundTester = ({
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio
         ref={audioRef}
-        src="/sounds/uprise.mp3"
+        src="sounds/uprise.mp3"
         onEnded={() => setIsPlaying(false)}
       />
     </StyledContainer>

src/frontend/src/main.tsx

@@ -2,6 +2,26 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 
+const CHUNK_RELOAD_KEY = 'vite-preload-error-reload-at'
+const RELOAD_COOLDOWN_MS = 30_000
+
+window.addEventListener('vite:preloadError', (event) => {
+  try {
+    const lastReloadAt = Number(sessionStorage.getItem(CHUNK_RELOAD_KEY)) || 0
+    if (Date.now() - lastReloadAt <= RELOAD_COOLDOWN_MS) {
+      // Recent reload didn't help: not a stale deploy, surface the error.
+      return
+    }
+    sessionStorage.setItem(CHUNK_RELOAD_KEY, String(Date.now()))
+  } catch {
+    // Without sessionStorage we cannot guard against a reload loop:
+    // don't auto-reload, let the error propagate.
+    return
+  }
+  event.preventDefault()
+  window.location.reload()
+})
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />