From 74f58cff3d4299b1bdfa1e07c703518fc9121cf2 Mon Sep 17 00:00:00 2001
From: mathuraditya724 <mathuraditya724@gmail.com>
Date: Wed, 24 Dec 2025 12:17:12 +0530
Subject: [PATCH 1/4] feat: better error message display

---
 packages/spotlight/index.html                 | 28 ----------------
 packages/spotlight/src/electron/main/index.ts | 32 ------------------
 packages/spotlight/src/ui/App.tsx             | 33 +++++++++++++++----
 .../ui/telemetry/components/TelemetryView.tsx |  4 +--
 4 files changed, 28 insertions(+), 69 deletions(-)

diff --git a/packages/spotlight/index.html b/packages/spotlight/index.html
index 456a10cc1..dd837e34c 100644
--- a/packages/spotlight/index.html
+++ b/packages/spotlight/index.html
@@ -20,34 +20,6 @@
         height: 100%;
         width: 100%;
       }
-
-      .error {
-        color: #fff;
-        text-shadow: 0 0 5px #fff;
-        text-align: center;
-        font-family: system-ui, sans-serif;
-      }
-
-      .header {
-        letter-spacing: 6px;
-        font-weight: 500;
-        font-size: 3rem;
-        line-height: 1.5;
-      }
-
-      .error-page-navbar {
-        display: flex;
-        width: 100%;
-        gap: 5px;
-        align-items: center;
-      }
-
-      .spotlight-title {
-        color: #fff;
-        font-weight: 700;
-        font-size: 1rem;
-        font-family: system-ui, sans-serif;
-      }
     </style>
   </head>
 
diff --git a/packages/spotlight/src/electron/main/index.ts b/packages/spotlight/src/electron/main/index.ts
index c65698f2e..d3c93b235 100644
--- a/packages/spotlight/src/electron/main/index.ts
+++ b/packages/spotlight/src/electron/main/index.ts
@@ -192,22 +192,6 @@ const createWindow = () => {
           document.body.appendChild(dragBar);
         }
         
-        // Create error screen element for showing errors
-        if (!document.getElementById('error-screen')) {
-          const errorScreen = document.createElement('div');
-          errorScreen.id = 'error-screen';
-          errorScreen.style.display = 'none';
-          errorScreen.innerHTML = \`
-            <div class="error-page-navbar">
-              <img alt="spotlight-icon" src="./resources/sized.png" width="50" height="50" />
-              <p class="spotlight-title">Spotlight</p>
-            </div>
-            <h1 class="error header">Oops! An error occurred.</h1>
-            <p class="error description">Press Cmd + R to reload the app.</p>
-          \`;
-          document.body.appendChild(errorScreen);
-        }
-        
         // Re-create elements if body is replaced.
         // This can happen when Spotlight.init() replaces the entire body content
         // during hot module replacement (HMR) in development mode, or when the
@@ -426,21 +410,6 @@ store.onDidChange("sentry-send-envelopes", newValue => {
   }
 });
 
-const showErrorMessage = () => {
-  if (win) {
-    win.webContents.executeJavaScript(`{
-      const sentryRoot = document.getElementById('spotlight-root');
-      const errorScreen = document.getElementById('error-screen');
-      if (sentryRoot) {
-        sentryRoot.style.display = 'none';
-      }
-      if (errorScreen) {
-        errorScreen.style.display = 'block';
-      }
-    }`);
-  }
-};
-
 async function askForPermissionToSendToSentry(event: Sentry.Event, hint: Sentry.EventHint) {
   // Handle updater errors silently - no dialogs or error screens
   if (event.tags?.error_source === "updater") {
@@ -452,7 +421,6 @@ async function askForPermissionToSendToSentry(event: Sentry.Event, hint: Sentry.
     return event;
   }
 
-  showErrorMessage();
   if (store.get("sentry-enabled") === false) {
     return null;
   }
diff --git a/packages/spotlight/src/ui/App.tsx b/packages/spotlight/src/ui/App.tsx
index 58f50a381..b57f65cbb 100644
--- a/packages/spotlight/src/ui/App.tsx
+++ b/packages/spotlight/src/ui/App.tsx
@@ -1,3 +1,5 @@
+import { ErrorBoundary } from "@sentry/react";
+import { ReactComponent as Logo } from "@spotlight/ui/assets/glyph.svg";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { ShikiProvider } from "./ShikiProvider";
 // TODO: we'll lazy load this in case of multiple routes
@@ -9,13 +11,30 @@ type AppProps = {
 
 export default function App({ sidecarUrl }: AppProps) {
   return (
-    <ShikiProvider>
-      <Routes>
-        {/* Default route redirects to telemetry */}
-        <Route path="/" element={<Navigate to="/telemetry" replace />} />
+    <div className="from-primary-900 to-primary-950 flex h-full overflow-hidden bg-gradient-to-br from-0% to-20% font-sans text-white">
+      <ErrorBoundary fallback={<ErrorFallback />}>
+        <ShikiProvider>
+          <Routes>
+            {/* Default route redirects to telemetry */}
+            <Route path="/" element={<Navigate to="/telemetry" replace />} />
 
-        <Route path="/telemetry/*" element={<Telemetry sidecarUrl={sidecarUrl} />} />
-      </Routes>
-    </ShikiProvider>
+            <Route path="/telemetry/*" element={<Telemetry sidecarUrl={sidecarUrl} />} />
+          </Routes>
+        </ShikiProvider>
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+function ErrorFallback() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full w-full">
+      <div className="flex items-center gap-2 mb-4">
+        <Logo height={24} width={24} />
+        <p className="text-white text-2xl font-bold">Spotlight</p>
+      </div>
+      <h1 className="text-white text-4xl font-bold">Oops! An error occurred</h1>
+      <p className="text-white text-xl">Press Cmd + R to reload the app</p>
+    </div>
   );
 }
diff --git a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx
index 2d85a23b5..a1fa78f15 100644
--- a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx
+++ b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx
@@ -41,7 +41,7 @@ export default function TelemetryView({
   const logCount = store.getLogs().length;
 
   return (
-    <div className="from-primary-900 to-primary-950 flex h-full overflow-hidden bg-gradient-to-br from-0% to-20% font-sans text-white">
+    <>
       <TelemetrySidebar errorCount={errorCount} traceCount={traceCount} logCount={logCount} isOnline={isOnline} />
       {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar */}
       <div className={cn("flex-1 overflow-auto", IS_ELECTRON && "pt-10")}>
@@ -54,6 +54,6 @@ export default function TelemetryView({
           <Route path="" element={<TracesTab />} key="default" />
         </Routes>
       </div>
-    </div>
+    </>
   );
 }

From 4c5a5f048fbf384c1e36bbdb053004b1a5e0bef7 Mon Sep 17 00:00:00 2001
From: mathuraditya724 <mathuraditya724@gmail.com>
Date: Wed, 24 Dec 2025 12:18:40 +0530
Subject: [PATCH 2/4] chore: added changeset

---
 .changeset/orange-hands-smile.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/orange-hands-smile.md

diff --git a/.changeset/orange-hands-smile.md b/.changeset/orange-hands-smile.md
new file mode 100644
index 000000000..91fb1d069
--- /dev/null
+++ b/.changeset/orange-hands-smile.md
@@ -0,0 +1,5 @@
+---
+"@spotlightjs/spotlight": patch
+---
+
+Updated the way of showing the error message div

From cce3e8d1d238b57e793d086b45e757f79e3a97b3 Mon Sep 17 00:00:00 2001
From: Aditya Mathur <57684218+MathurAditya724@users.noreply.github.com>
Date: Wed, 24 Dec 2025 15:31:36 +0530
Subject: [PATCH 3/4] Update packages/spotlight/src/ui/App.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/spotlight/src/ui/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/spotlight/src/ui/App.tsx b/packages/spotlight/src/ui/App.tsx
index b57f65cbb..4e70c6c67 100644
--- a/packages/spotlight/src/ui/App.tsx
+++ b/packages/spotlight/src/ui/App.tsx
@@ -34,7 +34,7 @@ function ErrorFallback() {
         <p className="text-white text-2xl font-bold">Spotlight</p>
       </div>
       <h1 className="text-white text-4xl font-bold">Oops! An error occurred</h1>
-      <p className="text-white text-xl">Press Cmd + R to reload the app</p>
+      <p className="text-white text-xl">Press Cmd/Ctrl + R to reload the app</p>
     </div>
   );
 }

From e32039b4fe59ca3cdc498411595f348785cc4a8d Mon Sep 17 00:00:00 2001
From: Aditya Mathur <57684218+MathurAditya724@users.noreply.github.com>
Date: Wed, 24 Dec 2025 15:31:42 +0530
Subject: [PATCH 4/4] Update packages/spotlight/src/ui/App.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/spotlight/src/ui/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/spotlight/src/ui/App.tsx b/packages/spotlight/src/ui/App.tsx
index 4e70c6c67..75b0cc167 100644
--- a/packages/spotlight/src/ui/App.tsx
+++ b/packages/spotlight/src/ui/App.tsx
@@ -30,7 +30,7 @@ function ErrorFallback() {
   return (
     <div className="flex flex-col items-center justify-center h-full w-full">
       <div className="flex items-center gap-2 mb-4">
-        <Logo height={24} width={24} />
+        <Logo height={24} width={24} aria-hidden="true" />
         <p className="text-white text-2xl font-bold">Spotlight</p>
       </div>
       <h1 className="text-white text-4xl font-bold">Oops! An error occurred</h1>