refactor: add spotlight for local sentry

package.json

@@ -19,6 +19,7 @@
     "e2e:h:m": "npx playwright test --headed --project=chromium.mobile",
     "e2e:h:t": "npx playwright test --headed --project=chromium.tablet",
     "storybook": "storybook dev -p 6006",
+    "spotlight": "pnpx @spotlightjs/spotlight",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -27,6 +28,7 @@
     "@sentry/nextjs": "^8",
     "@splinetool/react-spline": "^4.0.0",
     "@splinetool/runtime": "^1.9.12",
+    "@spotlightjs/spotlight": "^2.3.1",
     "@tanstack/react-query": "^5.36.0",
     "@tanstack/react-virtual": "^3.5.0",
     "clsx": "^2.1.1",
@@ -89,4 +91,4 @@
       "public"
     ]
   }
-}
+}

sentry.client.config.ts

@@ -2,10 +2,11 @@
 // The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
+import * as Spotlight from '@spotlightjs/spotlight';
 
 Sentry.init({
-  dsn: "https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808",
+  dsn: 'https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
@@ -27,3 +28,7 @@ Sentry.init({
     }),
   ],
 });
+
+if (process.env.NODE_ENV === 'development') {
+  Spotlight.init();
+}

sentry.edge.config.ts

@@ -3,14 +3,16 @@
 // Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808",
+  dsn: 'https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
+
+  spotlight: process.env.NODE_ENV === 'development',
 });

sentry.server.config.ts

@@ -2,10 +2,10 @@
 // The config you add here will be used whenever the server handles a request.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808",
+  dsn: 'https://0d295254822c41989ea49baec3c31a6d@o4504495959703552.ingest.us.sentry.io/4504526099447808',
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
@@ -14,6 +14,5 @@ Sentry.init({
   debug: false,
 
   // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
-  // spotlight: process.env.NODE_ENV === 'development',
-
+  spotlight: process.env.NODE_ENV === 'development',
 });