change(ui): iframe handle routes

frontend/app/Router.js

@@ -15,11 +15,12 @@ import APIClient from './api_client';
 import * as routes from './routes';
 import { OB_DEFAULT_TAB, isRoute } from 'App/routes';
 import Signup from 'Components/Signup';
-import { fetchTenants } from 'Duck/user';
+import { fetchTenants, setJwt } from 'Duck/user';
 import { setSessionPath } from 'Duck/sessions';
 import { ModalProvider } from './components/Modal';
-import { GLOBAL_DESTINATION_PATH, GLOBAL_HAS_NO_RECORDINGS } from 'App/constants/storageKeys';
+import { GLOBAL_DESTINATION_PATH, GLOBAL_HAS_NO_RECORDINGS, IFRAME } from 'App/constants/storageKeys';
 import SupportCallout from 'Shared/SupportCallout';
+import NotFoundPage from 'Shared/NotFoundPage';
 
 const Login = lazy(() => import('Components/Login/Login'));
 const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword'));
@@ -48,7 +49,7 @@ const Onboarding = withSiteIdUpdater(OnboardingPure);
 const FunnelPage = withSiteIdUpdater(FunnelPagePure);
 const FunnelsDetails = withSiteIdUpdater(FunnelDetailsPure);
 const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails);
-const Multiview = withSiteIdUpdater(MultiviewPure)
+const Multiview = withSiteIdUpdater(MultiviewPure);
 const withSiteId = routes.withSiteId;
 
 const METRICS_PATH = routes.metrics();
@@ -68,7 +69,7 @@ const SESSIONS_PATH = routes.sessions();
 const FFLAGS_PATH = routes.fflags();
 const FFLAG_PATH = routes.fflag();
 const FFLAG_CREATE_PATH = routes.newFFlag();
-const FFLAG_READ_PATH = routes.fflagRead()
+const FFLAG_READ_PATH = routes.fflagRead();
 const NOTES_PATH = routes.notes();
 const BOOKMARKS_PATH = routes.bookmarks();
 const ASSIST_PATH = routes.assist();
@@ -92,193 +93,257 @@ const MULTIVIEW_INDEX_PATH = routes.multiviewIndex();
 @withStore
 @withRouter
 @connect(
-    (state) => {
-        const siteId = state.getIn(['site', 'siteId']);
-        const jwt = state.getIn(['user', 'jwt']);
-        const changePassword = state.getIn(['user', 'account', 'changePassword']);
-        const userInfoLoading = state.getIn(['user', 'fetchUserInfoRequest', 'loading']);
-        return {
-            jwt,
-            siteId,
-            changePassword,
-            sites: state.getIn(['site', 'list']),
-            isLoggedIn: jwt !== null && !changePassword,
-            loading: siteId === null || userInfoLoading,
-            email: state.getIn(['user', 'account', 'email']),
-            account: state.getIn(['user', 'account']),
-            organisation: state.getIn(['user', 'account', 'name']),
-            tenantId: state.getIn(['user', 'account', 'tenantId']),
-            tenants: state.getIn(['user', 'tenants']),
-            existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
-            onboarding: state.getIn(['user', 'onboarding']),
-            isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || state.getIn(['user', 'authDetails', 'edition']) === 'ee',
-        };
-    },
-    {
-        fetchUserInfo,
-        fetchTenants,
-        setSessionPath,
-        fetchSiteList,
-    }
+  (state) => {
+    const siteId = state.getIn(['site', 'siteId']);
+    const jwt = state.getIn(['user', 'jwt']);
+    const changePassword = state.getIn(['user', 'account', 'changePassword']);
+    const userInfoLoading = state.getIn(['user', 'fetchUserInfoRequest', 'loading']);
+    return {
+      jwt,
+      siteId,
+      changePassword,
+      sites: state.getIn(['site', 'list']),
+      isLoggedIn: jwt !== null && !changePassword,
+      loading: siteId === null || userInfoLoading,
+      email: state.getIn(['user', 'account', 'email']),
+      account: state.getIn(['user', 'account']),
+      organisation: state.getIn(['user', 'account', 'name']),
+      tenantId: state.getIn(['user', 'account', 'tenantId']),
+      tenants: state.getIn(['user', 'tenants']),
+      existingTenant: state.getIn(['user', 'authDetails', 'tenants']),
+      onboarding: state.getIn(['user', 'onboarding']),
+      isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee' || state.getIn(['user', 'authDetails', 'edition']) === 'ee'
+    };
+  },
+  {
+    fetchUserInfo,
+    fetchTenants,
+    setSessionPath,
+    fetchSiteList,
+    setJwt
+  }
 )
 class Router extends React.Component {
-    constructor(props) {
-        super(props);
-        if (props.isLoggedIn) {
-            this.fetchInitialData();
-        }
+  constructor(props) {
+    super(props);
+    if (props.isLoggedIn) {
+      this.fetchInitialData();
     }
 
-    fetchInitialData = async () => {
-        const siteIdFromPath = parseInt(window.location.pathname.split("/")[1])
-        await this.props.fetchUserInfo()
-        await this.props.fetchSiteList(siteIdFromPath)
-        const { mstore } = this.props;
-        mstore.initClient();
+    const urlJWT = new URLSearchParams(window.location.search).get('jwt');
+
+    if (urlJWT && !props.isLoggedIn) {
+      props.setJwt(urlJWT)
+    }
+
+    this.state = {
+      isIframe: this.checkIframe(),
     };
+  }
 
-    componentDidMount() {
-        const { isLoggedIn, location } = this.props;
-        const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
-        if (!isLoggedIn && !location.pathname.includes('login')) {
-            localStorage.setItem(GLOBAL_DESTINATION_PATH, location.pathname);
-        } else if (isLoggedIn && destinationPath && !location.pathname.includes(destinationPath)) {
-            this.props.history.push(destinationPath || '/');
-            localStorage.removeItem(GLOBAL_DESTINATION_PATH);
-        }
+  checkIframe = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const iframe = urlParams.get('iframe');
+
+    if (iframe && iframe === 'true') {
+      localStorage.setItem(IFRAME, true);
+      return true;
+    } else {
+      localStorage.removeItem(IFRAME);
+      return false;
+    }
+  };
+
+  fetchInitialData = async () => {
+    const siteIdFromPath = parseInt(window.location.pathname.split('/')[1]);
+    await this.props.fetchUserInfo();
+    await this.props.fetchSiteList(siteIdFromPath);
+    const { mstore } = this.props;
+    mstore.initClient();
+  };
+
+  componentDidMount() {
+    const { isLoggedIn, location } = this.props;
+    const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
+
+    if (!isLoggedIn && !location.pathname.includes('login')) {
+      localStorage.setItem(GLOBAL_DESTINATION_PATH, location.pathname);
+    } else if (isLoggedIn && destinationPath && !location.pathname.includes(destinationPath)) {
+      this.props.history.push(destinationPath || '/');
+      localStorage.removeItem(GLOBAL_DESTINATION_PATH);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.props.setSessionPath(prevProps.location);
+    const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
+
+    if (prevProps.email !== this.props.email && !this.props.email) {
+      this.props.fetchTenants();
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        this.props.setSessionPath(prevProps.location);
-        const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH);
-
-        if (prevProps.email !== this.props.email && !this.props.email) {
-            this.props.fetchTenants();
-        }
-
-        if (
-            destinationPath &&
-            !prevProps.isLoggedIn &&
-            this.props.isLoggedIn &&
-            destinationPath !== routes.login() &&
-            destinationPath !== '/'
-        ) {
-            this.props.history.push(destinationPath);
-        }
-
-        if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
-            this.fetchInitialData();
-        }
+    if (
+      destinationPath &&
+      !prevProps.isLoggedIn &&
+      this.props.isLoggedIn &&
+      destinationPath !== routes.login() &&
+      destinationPath !== '/'
+    ) {
+      this.props.history.push(destinationPath);
     }
 
-    render() {
-        const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding, isEnterprise } = this.props;
-        const siteIdList = sites.map(({ id }) => id).toJS();
-        const hideHeader = (location.pathname && location.pathname.includes('/session/'))
-            || location.pathname.includes('/assist/')
-            || location.pathname.includes('multiview');
-        const isPlayer = isRoute(SESSION_PATH, location.pathname)
-            || isRoute(LIVE_SESSION_PATH, location.pathname)
-            || isRoute(MULTIVIEW_PATH, location.pathname)
-            || isRoute(MULTIVIEW_INDEX_PATH, location.pathname);
+    if (!prevProps.isLoggedIn && this.props.isLoggedIn) {
+      this.fetchInitialData();
+    }
+  }
 
-        const redirectToOnboarding = !onboarding && localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true'
 
-        return isLoggedIn ? (
-            <ModalProvider>
-                <Loader loading={loading} className="flex-1">
-                    <Notification />
-                    {!hideHeader && <Header key="header" />}
-                    <Suspense fallback={<Loader loading={true} className="flex-1" />}>
-                        <Switch key="content">
-                            <Route path={CLIENT_PATH} component={Client} />
-                            <Route path={withSiteId(ONBOARDING_PATH, siteIdList)} component={Onboarding} />
-                            <Route
-                                path="/integrations/"
-                                render={({ location }) => {
-                                    const client = new APIClient(jwt);
-                                    switch (location.pathname) {
-                                        case '/integrations/slack':
-                                            client.post('integrations/slack/add', {
-                                                code: location.search.split('=')[1],
-                                                state: tenantId,
-                                            });
-                                            break;
-                                        case '/integrations/msteams':
-                                            client.post('integrations/msteams/add', {
-                                                code: location.search.split('=')[1],
-                                                state: tenantId,
-                                            });
-                                            break;
-                                    }
-                                    return <Redirect to={CLIENT_PATH} />;
-                                }}
-                            />
-                            {redirectToOnboarding && <Redirect to={withSiteId(ONBOARDING_REDIRECT_PATH, siteId)} />}
+  render() {
+    const {
+      isLoggedIn,
+      jwt,
+      siteId,
+      sites,
+      loading,
+      changePassword,
+      location,
+      existingTenant,
+      onboarding,
+      isEnterprise
+    } = this.props;
+    const siteIdList = sites.map(({ id }) => id).toJS();
+    const hideHeader = (location.pathname && location.pathname.includes('/session/'))
+      || location.pathname.includes('/assist/')
+      || location.pathname.includes('multiview');
+    const isPlayer = isRoute(SESSION_PATH, location.pathname)
+      || isRoute(LIVE_SESSION_PATH, location.pathname)
+      || isRoute(MULTIVIEW_PATH, location.pathname)
+      || isRoute(MULTIVIEW_INDEX_PATH, location.pathname);
 
-                            {/* DASHBOARD and Metrics */}
-                            <Route exact strict path={withSiteId(ALERTS_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(ALERT_EDIT_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(ALERT_CREATE_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(METRICS_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(METRICS_DETAILS, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(METRICS_DETAILS_SUB, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(DASHBOARD_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(DASHBOARD_SELECT_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList)} component={Dashboard} />
-                            <Route exact strict path={withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList)} component={Dashboard} />
+    const redirectToOnboarding = !onboarding && localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true';
+    const { isIframe } = this.state;
 
-                            <Route exact path={withSiteId(MULTIVIEW_INDEX_PATH, siteIdList)} component={Multiview} />
-                            <Route path={withSiteId(MULTIVIEW_PATH, siteIdList)} component={Multiview} />
-                            <Route exact strict path={withSiteId(ASSIST_PATH, siteIdList)} component={Assist} />
-                            <Route exact strict path={withSiteId(RECORDINGS_PATH, siteIdList)} component={Assist} />
-                            {/*<Route exact strict path={withSiteId(ERRORS_PATH, siteIdList)} component={Errors} />*/}
-                            {/*<Route exact strict path={withSiteId(ERROR_PATH, siteIdList)} component={Errors} />*/}
-                            <Route exact strict path={withSiteId(FUNNEL_PATH, siteIdList)} component={FunnelPage} />
-                            <Route exact strict path={withSiteId(FUNNEL_CREATE_PATH, siteIdList)} component={FunnelsDetails} />
-                            <Route exact strict path={withSiteId(FUNNEL_ISSUE_PATH, siteIdList)} component={FunnelIssue} />
-                            <Route
-                                exact
-                                strict
-                                path={[
-                                    withSiteId(SESSIONS_PATH, siteIdList),
-                                    withSiteId(FFLAGS_PATH, siteIdList),
-                                    withSiteId(FFLAG_PATH, siteIdList),
-                                    withSiteId(FFLAG_READ_PATH, siteIdList),
-                                    withSiteId(FFLAG_CREATE_PATH, siteIdList),
-                                    withSiteId(NOTES_PATH, siteIdList),
-                                    withSiteId(BOOKMARKS_PATH, siteIdList),
-                                ]}
-                                component={SessionsOverview}
-                            />
-                            <Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
-                            <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
-                            <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} render={(props) => <Session {...props} live />} />
-                            {routes.redirects.map(([fr, to]) => (
-                                <Redirect key={fr} exact strict from={fr} to={to} />
-                            ))}
-                            <Redirect to={withSiteId(SESSIONS_PATH, siteId)} />
-                        </Switch>
-                    </Suspense>
-                </Loader>
-                {!isEnterprise && !isPlayer && <SupportCallout /> }
-            </ModalProvider>
-        ) : (
-            <Suspense fallback={<Loader loading={true} className="flex-1" />}>
-                <Switch>
-                    <Route exact strict path={FORGOT_PASSWORD} component={ForgotPassword} />
-                    <Route exact strict path={LOGIN_PATH} component={changePassword ? UpdatePassword : Login} />
-                    <Route exact strict path={SIGNUP_PATH} component={Signup} />
-                    <Redirect to={LOGIN_PATH} />
+    if (isIframe) {
+      if (isLoggedIn) {
+        return (
+          <ModalProvider>
+            <Loader loading={loading} className='flex-1'>
+              <Suspense fallback={<Loader loading={true} className='flex-1' />}>
+                <Switch key='content'>
+                  <Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
+                  <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
+                  <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)}
+                         render={(props) => <Session {...props} live />} />
+
+                  <Route path='*' render={NotFoundPage} />
                 </Switch>
-                {!isEnterprise && <SupportCallout /> }
-            </Suspense>
+              </Suspense>
+            </Loader>
+          </ModalProvider>
         );
+      } else {
+        return (
+          <NotFoundPage />
+        );
+      }
     }
+
+    return isLoggedIn ? (
+      <ModalProvider>
+        <Loader loading={loading} className='flex-1'>
+          <Notification />
+          {!hideHeader && <Header key='header' />}
+          <Suspense fallback={<Loader loading={true} className='flex-1' />}>
+            <Switch key='content'>
+              <Route path={CLIENT_PATH} component={Client} />
+              <Route path={withSiteId(ONBOARDING_PATH, siteIdList)} component={Onboarding} />
+              <Route
+                path='/integrations/'
+                render={({ location }) => {
+                  const client = new APIClient(jwt);
+                  switch (location.pathname) {
+                    case '/integrations/slack':
+                      client.post('integrations/slack/add', {
+                        code: location.search.split('=')[1],
+                        state: tenantId
+                      });
+                      break;
+                    case '/integrations/msteams':
+                      client.post('integrations/msteams/add', {
+                        code: location.search.split('=')[1],
+                        state: tenantId
+                      });
+                      break;
+                  }
+                  return <Redirect to={CLIENT_PATH} />;
+                }}
+              />
+              {redirectToOnboarding && <Redirect to={withSiteId(ONBOARDING_REDIRECT_PATH, siteId)} />}
+
+              {/* DASHBOARD and Metrics */}
+              <Route exact strict path={withSiteId(ALERTS_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(ALERT_EDIT_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(ALERT_CREATE_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(METRICS_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(METRICS_DETAILS, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(METRICS_DETAILS_SUB, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(DASHBOARD_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(DASHBOARD_SELECT_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList)} component={Dashboard} />
+              <Route exact strict path={withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList)} component={Dashboard} />
+
+              <Route exact path={withSiteId(MULTIVIEW_INDEX_PATH, siteIdList)} component={Multiview} />
+              <Route path={withSiteId(MULTIVIEW_PATH, siteIdList)} component={Multiview} />
+              <Route exact strict path={withSiteId(ASSIST_PATH, siteIdList)} component={Assist} />
+              <Route exact strict path={withSiteId(RECORDINGS_PATH, siteIdList)} component={Assist} />
+              {/*<Route exact strict path={withSiteId(ERRORS_PATH, siteIdList)} component={Errors} />*/}
+              {/*<Route exact strict path={withSiteId(ERROR_PATH, siteIdList)} component={Errors} />*/}
+              <Route exact strict path={withSiteId(FUNNEL_PATH, siteIdList)} component={FunnelPage} />
+              <Route exact strict path={withSiteId(FUNNEL_CREATE_PATH, siteIdList)} component={FunnelsDetails} />
+              <Route exact strict path={withSiteId(FUNNEL_ISSUE_PATH, siteIdList)} component={FunnelIssue} />
+              <Route
+                exact
+                strict
+                path={[
+                  withSiteId(SESSIONS_PATH, siteIdList),
+                  withSiteId(FFLAGS_PATH, siteIdList),
+                  withSiteId(FFLAG_PATH, siteIdList),
+                  withSiteId(FFLAG_READ_PATH, siteIdList),
+                  withSiteId(FFLAG_CREATE_PATH, siteIdList),
+                  withSiteId(NOTES_PATH, siteIdList),
+                  withSiteId(BOOKMARKS_PATH, siteIdList)
+                ]}
+                component={SessionsOverview}
+              />
+              <Route exact strict path={withSiteId(SESSION_PATH, siteIdList)} component={Session} />
+              <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)} component={LiveSession} />
+              <Route exact strict path={withSiteId(LIVE_SESSION_PATH, siteIdList)}
+                     render={(props) => <Session {...props} live />} />
+              {routes.redirects.map(([fr, to]) => (
+                <Redirect key={fr} exact strict from={fr} to={to} />
+              ))}
+              <Redirect to={withSiteId(SESSIONS_PATH, siteId)} />
+            </Switch>
+          </Suspense>
+        </Loader>
+        {!isEnterprise && !isPlayer && <SupportCallout />}
+      </ModalProvider>
+    ) : (
+      <Suspense fallback={<Loader loading={true} className='flex-1' />}>
+        <Switch>
+          <Route exact strict path={FORGOT_PASSWORD} component={ForgotPassword} />
+          <Route exact strict path={LOGIN_PATH} component={changePassword ? UpdatePassword : Login} />
+          <Route exact strict path={SIGNUP_PATH} component={Signup} />
+          <Redirect to={LOGIN_PATH} />
+        </Switch>
+        {!isEnterprise && <SupportCallout />}
+      </Suspense>
+    );
+  }
 }
 
 export default () => (
-    <BrowserRouter>
-        <Router />
-    </BrowserRouter>
+  <BrowserRouter>
+    <Router />
+  </BrowserRouter>
 );

frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js

@@ -11,6 +11,7 @@ import { withRequest } from 'HOCs';
 import SessionInfoItem from 'Components/Session_/SessionInfoItem';
 import { useModal } from 'App/components/Modal';
 import UserSessionsModal from 'Shared/UserSessionsModal';
+import { IFRAME } from 'App/constants/storageKeys';
 
 function UserCard({ className, request, session, width, height, similarSessions, loading }) {
     const { settingsStore } = useStore();
@@ -125,9 +126,10 @@ export default withRequest({
 
 // inner component
 function UserName({ name, userId, hash }) {
+    const hasIframe = localStorage.getItem(IFRAME) === 'true';
     const { showModal } = useModal();
     const onClick = () => {
         showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true, width: 700 });
     };
-    return <div onClick={userId ? onClick : () => {}}>{name}</div>;
+    return <div onClick={userId && !hasIframe ? onClick : () => {}}>{name}</div>;
 }

frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
@@ -16,6 +17,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
 import { observer } from 'mobx-react-lite';
 import stl from './playerBlockHeader.module.css';
 import { fetchListActive as fetchMetadata } from 'Duck/customField';
+import { IFRAME } from 'App/constants/storageKeys';
 
 const SESSIONS_ROUTE = sessionsRoute();
 
@@ -42,8 +44,8 @@ function PlayerBlockHeader(props: any) {
   } = props;
 
   React.useEffect(() => {
-    const queryParams = new URLSearchParams(location.search);
-    setHideBack(queryParams.has('iframe') && queryParams.get('iframe') === 'true');
+    const iframe = localStorage.getItem(IFRAME) || false;
+    setHideBack(!!iframe && iframe === 'true');
 
     if (metaList.size === 0) fetchMetadata();
   }, []);
@@ -90,7 +92,7 @@ function PlayerBlockHeader(props: any) {
         <UserCard className="" width={width} height={height} />
 
         <div className={cn('ml-auto flex items-center h-full', { hidden: closedLive })}>
-          {live && (
+          {live && !hideBack && (
             <>
               <div className={cn(stl.liveSwitchButton, 'pr-4')}>
                 <Link to={withSiteId(liveSessionRoute(sessionId), siteId)}>

frontend/app/components/shared/NotFoundPage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function NotFoundPage() {
+  return (
+    <div
+      className='inset-0 flex items-center justify-center absolute'
+      style={{
+        height: 'calc(100vh - 50px)'
+        // zIndex: '999',
+      }}
+    >
+      <div className='flex flex-col items-center'>
+        <div className='text-2xl -mt-8'>
+          Session not found.
+        </div>
+        <div className='text-sm'>
+          Please check your data retention policy.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NotFoundPage;

frontend/app/constants/storageKeys.ts

@@ -6,4 +6,5 @@ export const GLOBAL_DESTINATION_PATH = "__$global-destinationPath$__"
 export const GLOBAL_HAS_NO_RECORDINGS = "__$global-hasNoRecordings$__"
 export const SITE_ID_STORAGE_KEY = "__$user-siteId$__"
 export const GETTING_STARTED = "__$user-gettingStarted$__"
-export const MOUSE_TRAIL = "__$session-mouseTrail$__"
+export const MOUSE_TRAIL = "__$session-mouseTrail$__"
+export const IFRAME = "__$session-iframe$__"