From 61167dae39f28376389df91136a293398c0dd1bb Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Fri, 22 May 2026 19:30:55 -0400
Subject: [PATCH] fix: code splitting, route errors, Sentry CI source maps

- Lazy-import CreateRoomForm/CreateSpaceForm in CreateRoom.tsx and Create.tsx
  so create-room and create-space get their own chunks; eliminates
  INEFFECTIVE_DYNAMIC_IMPORT warnings
- Add RouteError component wired to root route errorElement so crashes show
  a reload button instead of React Router dev screen
- ci.yml: use secrets.SENTRY_AUTH_TOKEN so source maps upload on CI builds

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .gitea/workflows/ci.yml                  |  2 +-
 src/app/pages/RouteError.tsx             | 43 ++++++++++++++++++++++++
 src/app/pages/Router.tsx                 |  3 +-
 src/app/pages/client/create/Create.tsx   |  9 +++--
 src/app/pages/client/home/CreateRoom.tsx |  9 +++--
 5 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/app/pages/RouteError.tsx

diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml
index cabf5e73a..e81079423 100644
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -28,7 +28,7 @@ jobs:
         run: npm run build
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
-          SENTRY_AUTH_TOKEN: ''
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           VITE_APP_VERSION: ${{ github.sha }}
 
       # ── Quality checks (informational — pre-existing issues exist) ───────
diff --git a/src/app/pages/RouteError.tsx b/src/app/pages/RouteError.tsx
new file mode 100644
index 000000000..149711e55
--- /dev/null
+++ b/src/app/pages/RouteError.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
+
+export function RouteError() {
+  const error = useRouteError();
+
+  const message = isRouteErrorResponse(error)
+    ? `${error.status} ${error.statusText}`
+    : error instanceof Error
+      ? error.message
+      : 'An unexpected error occurred.';
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100dvh',
+        gap: '16px',
+        padding: '32px',
+        fontFamily: 'sans-serif',
+      }}
+    >
+      <h2 style={{ margin: 0, fontSize: '1.25rem' }}>Something went wrong</h2>
+      <p style={{ margin: 0, opacity: 0.7, textAlign: 'center' }}>{message}</p>
+      <button
+        type="button"
+        onClick={() => window.location.reload()}
+        style={{
+          padding: '8px 20px',
+          borderRadius: '8px',
+          border: 'none',
+          cursor: 'pointer',
+          fontWeight: 600,
+        }}
+      >
+        Reload
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 66b7340fb..3e2dbef5a 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -63,6 +63,7 @@ import { UserRoomProfileRenderer } from '../components/UserRoomProfileRenderer';
 import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
 import { getFallbackSession } from '../state/sessions';
+import { RouteError } from './RouteError';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
 
@@ -107,7 +108,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
   const mobile = screenSize === ScreenSize.Mobile;
 
   const routes = createRoutesFromElements(
-    <Route HydrateFallback={() => null}>
+    <Route HydrateFallback={() => null} errorElement={<RouteError />}>
       <Route
         index
         loader={() => {
diff --git a/src/app/pages/client/create/Create.tsx b/src/app/pages/client/create/Create.tsx
index 288169b6b..c6258e510 100644
--- a/src/app/pages/client/create/Create.tsx
+++ b/src/app/pages/client/create/Create.tsx
@@ -7,9 +7,12 @@ import {
   PageHero,
   PageHeroSection,
 } from '../../../components/page';
-import { CreateSpaceForm } from '../../../features/create-space';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 
+const CreateSpaceForm = React.lazy(() =>
+  import('../../../features/create-space').then((m) => ({ default: m.CreateSpaceForm })),
+);
+
 export function Create() {
   const { navigateSpace } = useRoomNavigate();
 
@@ -26,7 +29,9 @@ export function Create() {
                     title="Create Space"
                     subTitle="Build a space for your community."
                   />
-                  <CreateSpaceForm onCreate={navigateSpace} />
+                  <React.Suspense fallback={null}>
+                    <CreateSpaceForm onCreate={navigateSpace} />
+                  </React.Suspense>
                 </Box>
               </PageHeroSection>
             </PageContentCenter>
diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx
index bb733d0fb..5b37e3766 100644
--- a/src/app/pages/client/home/CreateRoom.tsx
+++ b/src/app/pages/client/home/CreateRoom.tsx
@@ -10,9 +10,12 @@ import {
 } from '../../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { CreateRoomForm } from '../../../features/create-room';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 
+const CreateRoomForm = React.lazy(() =>
+  import('../../../features/create-room').then((m) => ({ default: m.CreateRoomForm })),
+);
+
 export function HomeCreateRoom() {
   const screenSize = useScreenSizeContext();
 
@@ -44,7 +47,9 @@ export function HomeCreateRoom() {
                     title="Create Room"
                     subTitle="Build a Room for Real-Time Conversations."
                   />
-                  <CreateRoomForm onCreate={navigateRoom} />
+                  <React.Suspense fallback={null}>
+                    <CreateRoomForm onCreate={navigateRoom} />
+                  </React.Suspense>
                 </Box>
               </PageHeroSection>
             </PageContentCenter>