feat: better error message display

.changeset/orange-hands-smile.md

@@ -0,0 +1,5 @@
+---
+"@spotlightjs/spotlight": patch
+---
+
+Updated the way of showing the error message div

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>
 

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;
   }

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} 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>
+      <p className="text-white text-xl">Press Cmd/Ctrl + R to reload the app</p>
+    </div>
   );
 }

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>
+    </>
   );
 }