fix(overlay) : routes persistence (#856)

Fixes #811

Author: Shubhdeep12

.changeset/shaggy-rocks-lead.md

@@ -0,0 +1,5 @@
+---
+"@spotlightjs/overlay": patch
+---
+
+- Added route persistence for overlay

packages/overlay/src/App.tsx

@@ -1,14 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import Debugger from "./components/Debugger";
 import Trigger from "./components/Trigger";
 import { SPOTLIGHT_OPEN_CLASS_NAME } from "./constants";
 import type { Integration, IntegrationData } from "./integrations/integration";
+import { getPanelsFromIntegrations } from "./integrations/utils/extractPanelsFromIntegrations";
 import { base64Decode } from "./lib/base64";
 import * as db from "./lib/db";
 import { getSpotlightEventTarget } from "./lib/eventTarget";
 import { log } from "./lib/logger";
 import useKeyPress from "./lib/useKeyPress";
+import { getRouteStorageKey } from "./overlay/utils/routePersistence";
 import { connectToSidecar } from "./sidecar";
 import type { NotificationCount, SpotlightOverlayOptions } from "./types";
 
@@ -164,6 +166,16 @@ export default function App({
   // as our <Route>s are scattered around a bit
   // See https://github.com/remix-run/react-router/issues/7634
   const navigate = useNavigate();
+  const location = useLocation();
+
+  // contextId for namespacing of routes in sessionStorage
+  const contextId = sidecarUrl;
+
+  // helper to get valid panel routes
+  const getValidRoutes = useCallback(() => {
+    return new Set(getPanelsFromIntegrations(integrations, integrationData).map(panel => `/${panel.id}`));
+  }, [integrationData, integrations]);
+
   const clearEvents = useCallback(async () => {
     try {
       const clearEventsUrl: string = new URL("/clear", sidecarUrl).href;
@@ -192,9 +204,24 @@ export default function App({
     ) => {
       log("Open");
       setOpen(true);
-      if (e.detail.path) navigate(e.detail.path);
+      if (e.detail.path) {
+        navigate(e.detail.path);
+      } else {
+        try {
+          const lastRoute = sessionStorage.getItem(getRouteStorageKey(contextId));
+          const validRoutes = getValidRoutes();
+          if (lastRoute && lastRoute !== location.pathname && validRoutes.has(lastRoute)) {
+            navigate(lastRoute);
+          }
+        } catch (error) {
+          log("Failed to retrieve or navigate to the last route from browser storage", {
+            error,
+            currentPath: location.pathname,
+          });
+        }
+      }
     },
-    [navigate],
+    [navigate, location.pathname, contextId, integrationData, integrations],
   );
 
   const onClose = useCallback(() => {
@@ -275,6 +302,7 @@ export default function App({
         setTriggerButtonCount={setTriggerButtonCount}
         fullPage={fullPage}
         showClearEventsButton={showClearEventsButton}
+        contextId={contextId}
       />
     </>
   );

packages/overlay/src/components/Debugger.tsx

@@ -40,6 +40,7 @@ export default function Debugger({
   setTriggerButtonCount: setNotificationCount,
   fullPage,
   showClearEventsButton,
+  contextId,
 }: {
   integrations: Integration[];
   isOpen: boolean;
@@ -49,6 +50,7 @@ export default function Debugger({
   setTriggerButtonCount: (count: NotificationCount) => void;
   fullPage: boolean;
   showClearEventsButton: boolean;
+  contextId: string;
 }) {
   return (
     <FullscreenBlur isOpen={isOpen} setOpen={setOpen} fullPage={fullPage}>
@@ -70,6 +72,7 @@ export default function Debugger({
           setOpen={setOpen}
           isOnline={isOnline}
           showClearEventsButton={showClearEventsButton}
+          contextId={contextId}
         />
       </div>
     </FullscreenBlur>

packages/overlay/src/components/Overview.tsx

@@ -1,7 +1,10 @@
 import { createElement, useEffect, useState } from "react";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import type { Integration, IntegrationData } from "~/integrations/integration";
+import { log } from "~/lib/logger";
 import type { NotificationCount } from "~/types";
+import { getPanelsFromIntegrations } from "../integrations/utils/extractPanelsFromIntegrations";
+import { getRouteStorageKey } from "../overlay/utils/routePersistence";
 import Navigation from "./navigation";
 
 export default function Overview({
@@ -11,30 +14,31 @@ export default function Overview({
   setOpen,
   isOnline,
   showClearEventsButton,
+  contextId,
 }: {
   integrations: Integration[];
   integrationData: IntegrationData<unknown>;
   setTriggerButtonCount: (count: NotificationCount) => void;
   setOpen: (value: boolean) => void;
   isOnline: boolean;
   showClearEventsButton: boolean;
+  contextId: string;
 }) {
   const [notificationCountSum, setNotificationCountSum] = useState<NotificationCount>({ count: 0, severe: false });
+  const location = useLocation();
 
-  const panels = integrations.flatMap(integration => {
-    if (integration.panels || integration.tabs) {
-      const processedEvents = integrationData[integration.name]?.map(container => container.event) || [];
-      return (
-        integration.panels?.({ processedEvents }) ||
-        integration.tabs?.({ processedEvents }).map(tab => ({
-          ...tab,
-          processedEvents: processedEvents,
-        })) ||
-        []
-      );
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(getRouteStorageKey(contextId), location.pathname);
+    } catch (error) {
+      log("Failed to set current route to browser storage", {
+        error,
+        currentPath: location.pathname,
+      });
     }
-    return [];
-  });
+  }, [location.pathname, contextId]);
+
+  const panels = getPanelsFromIntegrations(integrations, integrationData);
 
   const newNotificationSum = panels.reduce(
     (sum, panel) => ({

packages/overlay/src/index.tsx

@@ -12,6 +12,7 @@ import {
 import globalStyles from "./index.css?inline";
 import { type SpotlightContext, initIntegrations } from "./integrations/integration";
 import { default as sentry } from "./integrations/sentry/index";
+import { getPanelsFromIntegrations } from "./integrations/utils/extractPanelsFromIntegrations";
 import { off, on, trigger } from "./lib/eventTarget";
 import initSentry from "./lib/instrumentation";
 import { activateLogger, log } from "./lib/logger";
@@ -176,15 +177,7 @@ export async function init(initOptions: SpotlightOverlayOptions = {}) {
     });
   }
 
-  const tabs = initializedIntegrations.flatMap(
-    integration =>
-      integration.panels?.({ processedEvents: [] }) ||
-      integration.tabs?.({ processedEvents: [] }).map(tab => ({
-        ...tab,
-        processedEvents: [],
-      })) ||
-      [],
-  );
+  const tabs = getPanelsFromIntegrations(initializedIntegrations, {});
 
   const initialTab = startFrom || (tabs.length ? `/${tabs[0].id}` : "/no-tabs");
   log("Starting from", initialTab);

packages/overlay/src/integrations/utils/extractPanelsFromIntegrations.ts

@@ -0,0 +1,18 @@
+/**
+ * util to extract all panels/tabs from integrations, with processedEvents.
+ */
+import type { Integration, IntegrationData } from "../../integrations/integration";
+
+export function getPanelsFromIntegrations(integrations: Integration[], integrationData: IntegrationData<unknown>) {
+  return integrations.flatMap(integration => {
+    if (integration.panels || integration.tabs) {
+      const processedEvents = integrationData[integration.name]?.map(container => container.event) || [];
+      return (
+        integration.panels?.({ processedEvents }) ||
+        integration.tabs?.({ processedEvents }).map(tab => ({ ...tab, processedEvents })) ||
+        []
+      );
+    }
+    return [];
+  });
+}

packages/overlay/src/overlay/utils/routePersistence.ts

@@ -0,0 +1,7 @@
+/**
+ * returns a namespaced sessionStorage key for storing the last route.
+ * @param contextId unique identifier for the current context, current sidecarUrl
+ */
+export function getRouteStorageKey(contextId: string) {
+  return `spotlight:lastRoute:${contextId}`;
+}