fix(ui): guard sessionStorage access against strict-privacy crash (#1453)

apps/chat-ui/src/App.tsx

@@ -28,6 +28,7 @@ import { VSCodeProvider, VSCodeContextType } from './hooks/useVSCode';
 import { ChatContainer } from './components/ChatContainer';
 import { API_CONFIG, setAPIConfig } from './config/apiConfig';
 import { startClient } from './hooks/clientSingleton';
+import { safeSessionStorage } from './utils/safeStorage';
 
 const App: React.FC = () => {
 	const [isVSCode] = useState(() => 'acquireVsCodeApi' in window);
@@ -99,7 +100,7 @@ const App: React.FC = () => {
 			window.history.replaceState({}, '', window.location.pathname);
 		} else if (!isVSCode) {
 			// Fall back to session storage (skip in VSCode webview - shared storage would mix auth across tabs)
-			token = sessionStorage.getItem('auth') || '';
+			token = safeSessionStorage.getItem('auth') || '';
 		}
 		if (!token && API_CONFIG.devMode && API_CONFIG.ROCKETRIDE_APIKEY) {
 			token = API_CONFIG.ROCKETRIDE_APIKEY;
@@ -126,7 +127,7 @@ const App: React.FC = () => {
 
 		// Save the token in session storage (skip in VSCode) and our state
 		if (!isVSCode) {
-			sessionStorage.setItem('auth', token);
+			safeSessionStorage.setItem('auth', token);
 		}
 		setAuthToken(token);
 

apps/chat-ui/src/utils/safeStorage.ts

@@ -0,0 +1,78 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2026 Aparavi Software AG
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Safe `sessionStorage` accessors.
+ *
+ * Bare `sessionStorage` access throws a `SecurityError` in strict privacy
+ * modes (Safari Private Browsing, Chrome Incognito with third-party storage
+ * blocked, or when the UI is embedded in a sandboxed iframe). When that throw
+ * happens at module-eval time or during the initial React render, it aborts
+ * the whole render cycle and the user gets a blank white screen.
+ *
+ * These helpers swallow the exception and fall back to a harmless default so
+ * the app degrades to in-memory/limited functionality instead of crashing.
+ *
+ * NOTE: This helper is intentionally duplicated across the UI apps that do not
+ * share a common workspace package. Keep the copies in sync — apply any bug fix
+ * or new method (e.g. `clear`) to all three:
+ *   - apps/chat-ui/src/utils/safeStorage.ts
+ *   - apps/dropper-ui/src/utils/safeStorage.ts
+ *   - apps/shell-ui/src/util/safeStorage.ts
+ */
+export const safeSessionStorage = {
+	/**
+	 * Read a value from `sessionStorage`, returning `null` if storage is
+	 * unavailable or the key is missing.
+	 */
+	getItem(key: string): string | null {
+		try {
+			return sessionStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+
+	/**
+	 * Write a value to `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	setItem(key: string, value: string): void {
+		try {
+			sessionStorage.setItem(key, value);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+
+	/**
+	 * Remove a value from `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	removeItem(key: string): void {
+		try {
+			sessionStorage.removeItem(key);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+};

apps/dropper-ui/src/App.tsx

@@ -10,6 +10,7 @@ import { VSCodeProvider, VSCodeContextType } from './hooks/useVSCode';
 import { DropperContainer } from './components/DropperContainer';
 import { API_CONFIG, setAPIConfig } from './config/apiConfig';
 import { startClient } from './hooks/clientSingleton';
+import { safeSessionStorage } from './utils/safeStorage';
 
 const App: React.FC = () => {
 	const [isVSCode] = useState(() => 'acquireVsCodeApi' in window);
@@ -71,7 +72,7 @@ const App: React.FC = () => {
 		if (token) {
 			window.history.replaceState({}, '', window.location.pathname);
 		} else if (!isVSCode) {
-			token = sessionStorage.getItem('auth') || '';
+			token = safeSessionStorage.getItem('auth') || '';
 		}
 		if (!token && API_CONFIG.devMode && API_CONFIG.ROCKETRIDE_APIKEY) {
 			token = API_CONFIG.ROCKETRIDE_APIKEY;
@@ -94,7 +95,7 @@ const App: React.FC = () => {
 		});
 
 		if (!isVSCode) {
-			sessionStorage.setItem('auth', token);
+			safeSessionStorage.setItem('auth', token);
 		}
 		setAuthToken(token);
 

apps/dropper-ui/src/hooks/clientSingleton.ts

@@ -41,6 +41,7 @@
 
 import { RocketRideClient, RocketRideClientConfig, ConnectionException } from 'rocketride';
 import { API_CONFIG } from '../config/apiConfig';
+import { safeSessionStorage } from '../utils/safeStorage';
 
 // ============================================================================
 // SINGLETON STATE
@@ -120,7 +121,7 @@ let lastConnectionError: { reason: string; hasError: boolean } | null = null;
  */
 async function getAuthToken(): Promise<string | null> {
 	// Check session storage first for cached token
-	let auth = sessionStorage.getItem('auth');
+	let auth = safeSessionStorage.getItem('auth');
 	if (auth) return auth;
 
 	if (API_CONFIG.devMode) {
@@ -150,7 +151,7 @@ async function getAuthToken(): Promise<string | null> {
 	}
 
 	// Cache token in session storage for subsequent requests
-	if (auth) sessionStorage.setItem('auth', auth);
+	if (auth) safeSessionStorage.setItem('auth', auth);
 	return auth;
 }
 

apps/dropper-ui/src/utils/safeStorage.ts

@@ -0,0 +1,78 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2026 Aparavi Software AG
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Safe `sessionStorage` accessors.
+ *
+ * Bare `sessionStorage` access throws a `SecurityError` in strict privacy
+ * modes (Safari Private Browsing, Chrome Incognito with third-party storage
+ * blocked, or when the UI is embedded in a sandboxed iframe). When that throw
+ * happens at module-eval time or during the initial React render, it aborts
+ * the whole render cycle and the user gets a blank white screen.
+ *
+ * These helpers swallow the exception and fall back to a harmless default so
+ * the app degrades to in-memory/limited functionality instead of crashing.
+ *
+ * NOTE: This helper is intentionally duplicated across the UI apps that do not
+ * share a common workspace package. Keep the copies in sync — apply any bug fix
+ * or new method (e.g. `clear`) to all three:
+ *   - apps/chat-ui/src/utils/safeStorage.ts
+ *   - apps/dropper-ui/src/utils/safeStorage.ts
+ *   - apps/shell-ui/src/util/safeStorage.ts
+ */
+export const safeSessionStorage = {
+	/**
+	 * Read a value from `sessionStorage`, returning `null` if storage is
+	 * unavailable or the key is missing.
+	 */
+	getItem(key: string): string | null {
+		try {
+			return sessionStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+
+	/**
+	 * Write a value to `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	setItem(key: string, value: string): void {
+		try {
+			sessionStorage.setItem(key, value);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+
+	/**
+	 * Remove a value from `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	removeItem(key: string): void {
+		try {
+			sessionStorage.removeItem(key);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+};

apps/shell-ui/src/util/pkce.ts

@@ -20,6 +20,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+import { safeSessionStorage } from './safeStorage';
+
 // =============================================================================
 // PKCE — Client-side OAuth PKCE utilities
 // Browser-only (uses crypto.subtle and fetch).
@@ -114,7 +116,7 @@ export async function generatePkce(): Promise<PkceChallenge> {
 
     // Persist the verifier in sessionStorage so it survives the browser
     // redirect to the Zitadel authorization endpoint and back.
-    sessionStorage.setItem(PKCE_VERIFIER_KEY, verifier);
+    safeSessionStorage.setItem(PKCE_VERIFIER_KEY, verifier);
 
     return { verifier, challenge };
 }
@@ -132,7 +134,7 @@ export function getStoredVerifier(): string | null {
     // Read the previously stored verifier from sessionStorage.
     // Returns null if the key does not exist (e.g., the tab was closed
     // between the initial navigation and the redirect callback).
-    return sessionStorage.getItem(PKCE_VERIFIER_KEY);
+    return safeSessionStorage.getItem(PKCE_VERIFIER_KEY);
 }
 
 /**
@@ -143,7 +145,7 @@ export function getStoredVerifier(): string | null {
  */
 export function clearStoredVerifier(): void {
     // Remove the verifier entry from sessionStorage so it cannot be reused.
-    sessionStorage.removeItem(PKCE_VERIFIER_KEY);
+    safeSessionStorage.removeItem(PKCE_VERIFIER_KEY);
 }
 
 // =============================================================================

apps/shell-ui/src/util/safeStorage.ts

@@ -0,0 +1,78 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2026 Aparavi Software AG
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Safe `sessionStorage` accessors.
+ *
+ * Bare `sessionStorage` access throws a `SecurityError` in strict privacy
+ * modes (Safari Private Browsing, Chrome Incognito with third-party storage
+ * blocked, or when the UI is embedded in a sandboxed iframe). When that throw
+ * happens at module-eval time or during the initial React render, it aborts
+ * the whole render cycle and the user gets a blank white screen.
+ *
+ * These helpers swallow the exception and fall back to a harmless default so
+ * the app degrades to in-memory/limited functionality instead of crashing.
+ *
+ * NOTE: This helper is intentionally duplicated across the UI apps that do not
+ * share a common workspace package. Keep the copies in sync — apply any bug fix
+ * or new method (e.g. `clear`) to all three:
+ *   - apps/chat-ui/src/utils/safeStorage.ts
+ *   - apps/dropper-ui/src/utils/safeStorage.ts
+ *   - apps/shell-ui/src/util/safeStorage.ts
+ */
+export const safeSessionStorage = {
+	/**
+	 * Read a value from `sessionStorage`, returning `null` if storage is
+	 * unavailable or the key is missing.
+	 */
+	getItem(key: string): string | null {
+		try {
+			return sessionStorage.getItem(key);
+		} catch {
+			return null;
+		}
+	},
+
+	/**
+	 * Write a value to `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	setItem(key: string, value: string): void {
+		try {
+			sessionStorage.setItem(key, value);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+
+	/**
+	 * Remove a value from `sessionStorage`. No-ops if storage is unavailable.
+	 */
+	removeItem(key: string): void {
+		try {
+			sessionStorage.removeItem(key);
+		} catch {
+			/* storage unavailable — degrade gracefully */
+		}
+	},
+};