fix(base-path): rename loadModule to loadStorageModule to avoid TS global scope collision

frontend/.eslintrc.cjs

@@ -66,8 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
-		// Base-path safety — window.open and origin-concat patterns; upgrade to error coming PR
-		'rulesdir/no-raw-absolute-path': 'warn',
+		// Base-path safety — window.open and origin-concat patterns
+		'rulesdir/no-raw-absolute-path': 'error',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned
@@ -215,6 +215,31 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='localStorage']",
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='sessionStorage']",
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
+		],
+		'no-restricted-globals': [
+			'error',
+			{
+				name: 'localStorage',
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				name: 'sessionStorage',
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
 		],
 	},
 	overrides: [
@@ -248,6 +273,11 @@ module.exports = {
 				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
 				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
 				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
+				// Test assertions intentionally reference window.location.origin for expected-value checks
+				'rulesdir/no-raw-absolute-path': 'off',
+				// Tests may access storage directly for setup/assertion/spy purposes
+				'no-restricted-globals': 'off',
+				'no-restricted-syntax': 'off',
 			},
 		},
 		{

frontend/index.html

@@ -40,12 +40,12 @@
 		<meta
 			data-react-helmet="true"
 			property="og:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
 			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"

frontend/src/api/browser/localstorage/get.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const get = (key: string): string | null => {
 	try {
-		return localStorage.getItem(key);
+		return localStorage.getItem(getScopedKey(key));
 	} catch (e) {
 		return '';
 	}

frontend/src/api/browser/localstorage/remove.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const remove = (key: string): boolean => {
 	try {
-		window.localStorage.removeItem(key);
+		localStorage.removeItem(getScopedKey(key));
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/localstorage/set.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const set = (key: string, value: string): boolean => {
 	try {
-		localStorage.setItem(key, value);
+		localStorage.setItem(getScopedKey(key), value);
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/sessionstorage/get.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const get = (key: string): string | null => {
+	try {
+		return sessionStorage.getItem(getScopedKey(key));
+	} catch (e) {
+		return '';
+	}
+};
+
+export default get;

frontend/src/api/browser/sessionstorage/remove.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const remove = (key: string): boolean => {
+	try {
+		sessionStorage.removeItem(getScopedKey(key));
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default remove;

frontend/src/api/browser/sessionstorage/set.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const set = (key: string, value: string): boolean => {
+	try {
+		sessionStorage.setItem(getScopedKey(key), value);
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default set;

frontend/src/api/logs/livetail.ts

@@ -3,13 +3,16 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { withBasePath } from 'utils/basePath';
 
 // 10 min in ms
 const TIMEOUT_IN_MS = 10 * 60 * 1000;
 
 export const LiveTail = (queryParams: string): EventSourcePolyfill =>
 	new EventSourcePolyfill(
-		`${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`,
+		ENVIRONMENT.baseURL
+			? `${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`
+			: withBasePath(`${apiV1}logs/tail?${queryParams}`),
 		{
 			headers: {
 				Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -31,6 +31,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';
 
 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -387,7 +388,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -14,6 +14,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -188,7 +189,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -196,7 +197,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

frontend/src/components/QueryBuilderV2/QueryV2/previousQuery.utils.ts

@@ -1,10 +1,13 @@
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import removeSessionStorageApi from 'api/browser/sessionstorage/remove';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export const PREVIOUS_QUERY_KEY = 'previousQuery';
 
 function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 	try {
-		const raw = sessionStorage.getItem(PREVIOUS_QUERY_KEY);
+		const raw = getSessionStorageApi(PREVIOUS_QUERY_KEY);
 		if (!raw) {
 			return {};
 		}
@@ -17,7 +20,7 @@ function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 
 function writePreviousQueryToStore(store: Record<string, IBuilderQuery>): void {
 	try {
-		sessionStorage.setItem(PREVIOUS_QUERY_KEY, JSON.stringify(store));
+		setSessionStorageApi(PREVIOUS_QUERY_KEY, JSON.stringify(store));
 	} catch {
 		// ignore quota or serialization errors
 	}
@@ -63,7 +66,7 @@ export const removeKeyFromPreviousQuery = (key: string): void => {
 
 export const clearPreviousQuery = (): void => {
 	try {
-		sessionStorage.removeItem(PREVIOUS_QUERY_KEY);
+		removeSessionStorageApi(PREVIOUS_QUERY_KEY);
 	} catch {
 		// no-op
 	}

frontend/src/components/ResizeTable/utils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+
 import { DynamicColumnsKey } from './contants';
 import {
 	GetNewColumnDataFunction,
@@ -12,7 +15,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 }) => {
 	let columnVisibilityData: { [key: string]: boolean };
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			columnVisibilityData = JSON.parse(storedData);
 			return dynamicColumns.filter((column) => {
@@ -28,7 +31,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 			initialColumnVisibility[key] = false;
 		});
 
-		localStorage.setItem(tablesource, JSON.stringify(initialColumnVisibility));
+		setLocalStorageKey(tablesource, JSON.stringify(initialColumnVisibility));
 	} catch (error) {
 		console.error(error);
 	}
@@ -42,14 +45,14 @@ export const setVisibleColumns = ({
 	dynamicColumns,
 }: SetVisibleColumnsProps): void => {
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			const columnVisibilityData = JSON.parse(storedData);
 			const { key } = dynamicColumns[index];
 			if (key) {
 				columnVisibilityData[key] = checked;
 			}
-			localStorage.setItem(tablesource, JSON.stringify(columnVisibilityData));
+			setLocalStorageKey(tablesource, JSON.stringify(columnVisibilityData));
 		}
 	} catch (error) {
 		console.error(error);

frontend/src/container/AppLayout/index.tsx

@@ -73,6 +73,7 @@ import {
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
@@ -461,7 +462,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -31,6 +31,7 @@ import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
@@ -324,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			updateCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -333,7 +334,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			manageCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -55,7 +56,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});
 
-		window.open(url, '_blank');
+		openInNewTab(url);
 	}
 	const renderOptions = useMemo(
 		() => (

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -48,6 +48,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffixIcon={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// eslint-disable-next-line rulesdir/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -16,6 +16,8 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -213,7 +215,7 @@ function PublicDashboardSetting(): JSX.Element {
 
 		try {
 			setCopyPublicDashboardURL(
-				`${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+				getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 			);
 			toast.success('Copied Public Dashboard URL successfully');
 		} catch (error) {
@@ -222,7 +224,7 @@ function PublicDashboardSetting(): JSX.Element {
 	};
 
 	const publicDashboardURL = useMemo(
-		() => `${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+		() => getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 		[publicDashboardResponse],
 	);
 
@@ -294,7 +296,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react';
 import { Button } from 'antd';
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
 import ROUTES from 'constants/routes';
 import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -26,7 +27,7 @@ function DashboardBreadcrumbs(): JSX.Element {
 	const { title = '', image = Base64Icons[0] } = selectedData || {};
 
 	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = sessionStorage.getItem(
+		const dashboardsListQueryParamsString = getSessionStorageApi(
 			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
 		);
 

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import removeLocalStorageKey from 'api/browser/localstorage/remove';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
 
 import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
@@ -12,7 +15,7 @@ export function getStoredSeriesVisibility(
 	widgetId: string,
 ): SeriesVisibilityItem[] | null {
 	try {
-		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		const storedData = getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
 		if (!storedData) {
 			return null;
@@ -29,7 +32,7 @@ export function getStoredSeriesVisibility(
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it
-			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+			removeLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 		}
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
@@ -42,7 +45,7 @@ export function updateSeriesVisibilityToLocalStorage(
 ): void {
 	let visibilityStates: GraphVisibilityState[] = [];
 	try {
-		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
+		const storedData = getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 		visibilityStates = JSON.parse(storedData || '[]');
 	} catch (error) {
 		if (error instanceof SyntaxError) {
@@ -63,7 +66,7 @@ export function updateSeriesVisibilityToLocalStorage(
 		];
 	}
 
-	localStorage.setItem(
+	setLocalStorageKey(
 		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		JSON.stringify(visibilityStates),
 	);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,6 +22,8 @@ import {
 	Tooltip,
 	Typography,
 } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import axios from 'axios';
@@ -472,7 +474,7 @@ function ExplorerOptions({
 		value: string;
 	}): void => {
 		// Retrieve stored views from local storage
-		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		const storedViews = getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
 
 		// Initialize or parse the stored views
 		const updatedViews: PreservedViewsInLocalStorage = storedViews
@@ -486,7 +488,7 @@ function ExplorerOptions({
 		};
 
 		// Save the updated views back to local storage
-		localStorage.setItem(
+		setLocalStorageKey(
 			PRESERVED_VIEW_LOCAL_STORAGE_KEY,
 			JSON.stringify(updatedViews),
 		);
@@ -537,7 +539,7 @@ function ExplorerOptions({
 
 	const removeCurrentViewFromLocalStorage = (): void => {
 		// Retrieve stored views from local storage
-		const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+		const storedViews = getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
 
 		if (storedViews) {
 			// Parse the stored views
@@ -547,7 +549,7 @@ function ExplorerOptions({
 			delete parsedViews[PRESERVED_VIEW_TYPE];
 
 			// Update local storage with the modified views
-			localStorage.setItem(
+			setLocalStorageKey(
 				PRESERVED_VIEW_LOCAL_STORAGE_KEY,
 				JSON.stringify(parsedViews),
 			);
@@ -672,7 +674,7 @@ function ExplorerOptions({
 		}
 
 		const parsedPreservedView = JSON.parse(
-			localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
+			getLocalStorageKey(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
 		);
 
 		const preservedView = parsedPreservedView[PRESERVED_VIEW_TYPE] || {};

frontend/src/container/ExplorerOptions/utils.ts

@@ -1,4 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { showErrorNotification } from 'components/ExplorerCard/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
@@ -71,7 +73,7 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
 
 export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
 	try {
-		const showExplorerToolbar = localStorage.getItem(
+		const showExplorerToolbar = getLocalStorageKey(
 			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 		);
 		if (showExplorerToolbar === null) {
@@ -84,7 +86,7 @@ export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
 				[DataSource.TRACES]: true,
 				[DataSource.LOGS]: true,
 			};
-			localStorage.setItem(
+			setLocalStorageKey(
 				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 				JSON.stringify(parsedShowExplorerToolbar),
 			);
@@ -103,13 +105,13 @@ export const setExplorerToolBarVisibility = (
 	dataSource: string,
 ): void => {
 	try {
-		const showExplorerToolbar = localStorage.getItem(
+		const showExplorerToolbar = getLocalStorageKey(
 			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 		);
 		if (showExplorerToolbar) {
 			const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
 			parsedShowExplorerToolbar[dataSource] = value;
-			localStorage.setItem(
+			setLocalStorageKey(
 				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
 				JSON.stringify(parsedShowExplorerToolbar),
 			);

frontend/src/container/ForgotPassword/index.tsx

@@ -10,6 +10,7 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+import { getBaseUrl } from 'utils/basePath';
 
 import tvUrl from '@/assets/svgs/tv.svg';
 
@@ -105,7 +106,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);

frontend/src/container/FormAlertRules/index.tsx

@@ -46,6 +46,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openInNewTab } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -771,7 +772,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}
 

frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts

@@ -1,3 +1,5 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import getLabelName from 'lib/getLabelName';
 import { QueryData } from 'types/api/widgets/getQuery';
@@ -100,7 +102,7 @@ export const saveLegendEntriesToLocalStorage = ({
 
 	try {
 		existingEntries = JSON.parse(
-			localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) || '[]',
+			getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) || '[]',
 		);
 	} catch (error) {
 		console.error('Error parsing LEGEND_GRAPH from local storage', error);
@@ -115,7 +117,7 @@ export const saveLegendEntriesToLocalStorage = ({
 	}
 
 	try {
-		localStorage.setItem(
+		setLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 			JSON.stringify(existingEntries),
 		);

frontend/src/container/GridCardLayout/GridCard/utils.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import type { NotificationInstance } from 'antd/es/notification/interface';
+import getLocalStorageKey from 'api/browser/localstorage/get';
 import { NavigateToExplorerProps } from 'components/CeleryTask/useNavigateToExplorer';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -44,8 +45,8 @@ export const getLocalStorageGraphVisibilityState = ({
 		],
 	};
 
-	if (localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
-		const legendGraphFromLocalStore = localStorage.getItem(
+	if (getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
+		const legendGraphFromLocalStore = getLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		);
 		let legendFromLocalStore: {
@@ -94,8 +95,8 @@ export const getGraphVisibilityStateOnDataChange = ({
 		graphVisibilityStates: Array(options.series.length).fill(true),
 		legendEntry: showAllDataSet(options),
 	};
-	if (localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
-		const legendGraphFromLocalStore = localStorage.getItem(
+	if (getLocalStorageKey(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
+		const legendGraphFromLocalStore = getLocalStorageKey(
 			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
 		);
 		let legendFromLocalStore: {

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -10,6 +10,7 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -114,7 +115,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							window.open(getLink(), '_blank');
+							openInNewTab(getLink());
 						} else {
 							safeNavigate(getLink());
 						}

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openInNewTab } from 'utils/navigation';
 
 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -51,7 +52,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
+			openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};
 

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import './HomeChecklist.styles.scss';
 
@@ -99,11 +100,7 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															window?.open(
-																item.docsLink || '',
-																'_blank',
-																'noopener noreferrer',
-															);
+															openInNewTab(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openInNewTab(item.docsLink ?? '');
 														}}
 													>
 														<BookOpenText size={16} />

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -31,6 +31,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -79,11 +80,7 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									window?.open(
-										DOCS_LINKS.ADD_DATA_SOURCE,
-										'_blank',
-										'noopener noreferrer',
-									);
+									openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -17,6 +17,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -133,11 +134,7 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
+										openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface AlertInfoCardProps {
 	header: string;
@@ -19,7 +20,7 @@ function AlertInfoCard({
 			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 		>
 			<div className="alert-card-text">

frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined, PlayCircleFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface InfoLinkTextProps {
 	infoText: string;
@@ -20,7 +21,7 @@ function InfoLinkText({
 		<Flex
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 			className="info-link-container"
 		>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -28,6 +28,8 @@ import {
 	Typography,
 } from 'antd';
 import type { TableProps } from 'antd/lib';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import createDashboard from 'api/v1/dashboards/create';
 import { AxiosError } from 'axios';
@@ -147,7 +149,7 @@ function DashboardsList(): JSX.Element {
 	);
 
 	const getLocalStorageDynamicColumns = (): DashboardDynamicColumns => {
-		const dashboardDynamicColumnsString = localStorage.getItem('dashboard');
+		const dashboardDynamicColumnsString = getLocalStorageKey('dashboard');
 		let dashboardDynamicColumns: DashboardDynamicColumns = {
 			createdAt: true,
 			createdBy: true,
@@ -161,7 +163,7 @@ function DashboardsList(): JSX.Element {
 				);
 
 				if (isEmpty(tempDashboardDynamicColumns)) {
-					localStorage.setItem('dashboard', JSON.stringify(dashboardDynamicColumns));
+					setLocalStorageKey('dashboard', JSON.stringify(dashboardDynamicColumns));
 				} else {
 					dashboardDynamicColumns = { ...tempDashboardDynamicColumns };
 				}
@@ -169,7 +171,7 @@ function DashboardsList(): JSX.Element {
 				console.error(error);
 			}
 		} else {
-			localStorage.setItem('dashboard', JSON.stringify(dashboardDynamicColumns));
+			setLocalStorageKey('dashboard', JSON.stringify(dashboardDynamicColumns));
 		}
 
 		return dashboardDynamicColumns;
@@ -183,7 +185,7 @@ function DashboardsList(): JSX.Element {
 		visibleColumns: DashboardDynamicColumns,
 	): void {
 		try {
-			localStorage.setItem('dashboard', JSON.stringify(visibleColumns));
+			setLocalStorageKey('dashboard', JSON.stringify(visibleColumns));
 		} catch (error) {
 			console.error(error);
 		}

frontend/src/container/Login/index.tsx

@@ -213,6 +213,7 @@ function Login(): JSX.Element {
 			if (isCallbackAuthN) {
 				const url = form.getFieldValue('url');
 
+				// eslint-disable-next-line rulesdir/no-raw-absolute-path
 				window.location.href = url;
 			}
 		} catch (error) {

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -9,6 +9,7 @@ import {
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { Bell, Grid } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
@@ -67,9 +68,8 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -90,11 +90,10 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboardId,
 								}),
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -18,6 +18,7 @@ import {
 import useContextVariables from 'hooks/dashboard/useContextVariables';
 import { Plus, Trash2 } from 'lucide-react';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
+import { getBaseUrl } from 'utils/basePath';
 
 import VariablesDropdown from './VariablesDropdown';
 
@@ -84,7 +85,7 @@ function UpdateContextLinks({
 	);
 
 	// Function to get current domain
-	const getCurrentDomain = (): string => window.location.origin;
+	const getCurrentDomain = (): string => getBaseUrl();
 
 	// Function to handle variable selection from dropdown
 	const handleVariableSelect = (

frontend/src/container/NoLogs/NoLogs.tsx

@@ -6,6 +6,7 @@ import history from 'lib/history';
 import { ArrowUpRight } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';
 import DOCLINKS from 'utils/docLinks';
+import { openInNewTab } from 'utils/navigation';
 
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
 
@@ -42,11 +43,11 @@ export default function NoLogs({
 			}
 			history.push(link);
 		} else if (dataSource === 'traces') {
-			window.open(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE);
 		} else if (dataSource === DataSource.METRICS) {
-			window.open(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE, '_blank');
+			openInNewTab(DOCLINKS.METRICS_EXPLORER_EMPTY_STATE);
 		} else {
-			window.open(`${DOCLINKS.USER_GUIDE}${dataSource}/`, '_blank');
+			openInNewTab(`${DOCLINKS.USER_GUIDE}${dataSource}/`);
 		}
 	};
 	return (

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -18,6 +18,7 @@ import {
 	Trash2,
 } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';
 
 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
@@ -60,7 +61,7 @@ function InviteTeamMembers({
 		email: '',
 		role: '',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};
 

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx

@@ -8,6 +8,7 @@ import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
+import { withBasePath } from 'utils/basePath';
 
 import './IngestionDetails.styles.scss';
 
@@ -215,7 +216,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 							</a>
 							. To create a new one,{' '}
 							<a
-								href="/settings/ingestion-settings"
+								href={withBasePath('/settings/ingestion-settings')}
 								target="_blank"
 								className="learn-more"
 								rel="noreferrer"

frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx

@@ -8,6 +8,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import { ArrowRight, CheckCircle, Plus, TriangleAlert, X } from 'lucide-react';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 import { v4 as uuid } from 'uuid';
 
 import './InviteTeamMembers.styles.scss';
@@ -56,7 +57,7 @@ function InviteTeamMembers({
 		email: '',
 		role: 'EDITOR',
 		name: '',
-		frontendBaseUrl: window.location.origin,
+		frontendBaseUrl: getBaseUrl(),
 		id: '',
 	};
 

frontend/src/container/OrganizationSettings/AuthDomain/index.tsx

@@ -18,6 +18,7 @@ import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import CreateEdit from './CreateEdit/CreateEdit';
 import SSOEnforcementToggle from './SSOEnforcementToggle';
@@ -145,7 +146,7 @@ function AuthDomain(): JSX.Element {
 						return <span className="auth-domain-list-na">N/A</span>;
 					}
 
-					const href = `${window.location.origin}/${relayPath}`;
+					const href = getAbsoluteUrl(`/${relayPath}`);
 					return <CopyToClipboard textToCopy={href} />;
 				},
 			},

frontend/src/container/OrganizationSettings/InviteUserModal/InviteUserModal.tsx

@@ -4,6 +4,7 @@ import { Button, Form, FormInstance, Modal } from 'antd';
 import sendInvite from 'api/v1/invite/create';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import InviteTeamMembers from '../InviteTeamMembers';
 import { InviteMemberFormValues } from '../utils';
@@ -40,7 +41,7 @@ function InviteUserModal(props: InviteUserModalProps): JSX.Element {
 								email: member.email,
 								name: member?.name,
 								role: member.role,
-								frontendBaseUrl: window.location.origin,
+								frontendBaseUrl: getBaseUrl(),
 							});
 
 							notifications.success({

frontend/src/container/SideNav/SideNav.tsx

@@ -818,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		);
 
 		if (item && !('type' in item) && item.isExternal && item.url) {
-			window.open(item.url, '_blank');
+			openInNewTab(item.url);
 		}
 
 		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;

frontend/src/hooks/dashboard/useDashboardsListQueryParams.ts

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import isEqual from 'lodash-es/isEqual';
@@ -61,7 +62,7 @@ function useDashboardsListQueryParams(): {
 
 		const queryParamsString = params.toString();
 
-		sessionStorage.setItem(
+		setSessionStorageApi(
 			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
 			queryParamsString,
 		);

frontend/src/hooks/integration/aws/useIntegrationModal.ts

@@ -17,6 +17,7 @@ import {
 	ConnectionUrlResponse,
 	GenerateConnectionUrlPayload,
 } from 'types/api/integrations/aws';
+import { openInNewTab } from 'utils/navigation';
 import { regions } from 'utils/regions';
 
 import logEvent from '../../../api/common/logEvent';
@@ -120,7 +121,7 @@ export function useIntegrationModal({
 					logEvent('AWS Integration: Account connection attempt redirected to AWS', {
 						id: data.account_id,
 					});
-					window.open(data.connection_url, '_blank');
+					openInNewTab(data.connection_url);
 					setModalState(ModalStateEnum.WAITING);
 					setAccountId(data.account_id);
 				},

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -21,6 +21,7 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 import { getGraphType } from 'utils/getGraphType';
 
 const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
@@ -92,7 +93,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 
 				const url = `${ROUTES.ALERTS_NEW}?${params.toString()}`;
 
-				window.open(url, '_blank', 'noreferrer');
+				window.open(withBasePath(url), '_blank', 'noreferrer');
 			},
 			onError: () => {
 				notifications.error({

frontend/src/hooks/useLocalStorage.ts

@@ -1,34 +1,20 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import removeLocalStorageApi from 'api/browser/localstorage/remove';
+import setLocalStorageApi from 'api/browser/localstorage/set';
 
-/**
- * A React hook for interacting with localStorage.
- * It allows getting, setting, and removing items from localStorage.
- *
- * @template T The type of the value to be stored.
- * @param {string} key The localStorage key.
- * @param {T | (() => T)} defaultValue The default value to use if no value is found in localStorage,
- * @returns {[T, (value: T | ((prevState: T) => T)) => void, () => void]}
- * A tuple containing:
- * - The current value from state (and localStorage).
- * - A function to set the value (updates state and localStorage).
- * - A function to remove the value from localStorage and reset state to defaultValue.
- */
 export function useLocalStorage<T>(
 	key: string,
 	defaultValue: T | (() => T),
 ): [T, (value: T | ((prevState: T) => T)) => void, () => void] {
-	// Stabilize the defaultValue to prevent unnecessary re-renders
 	const defaultValueRef = useRef<T | (() => T)>(defaultValue);
 
-	// Update the ref if defaultValue changes (for cases where it's intentionally dynamic)
 	useEffect(() => {
 		if (defaultValueRef.current !== defaultValue) {
 			defaultValueRef.current = defaultValue;
 		}
 	}, [defaultValue]);
 
-	// This function resolves the defaultValue if it's a function,
-	// and handles potential errors during localStorage access or JSON parsing.
 	const readValueFromStorage = useCallback((): T => {
 		const resolveddefaultValue =
 			defaultValueRef.current instanceof Function
@@ -36,33 +22,25 @@ export function useLocalStorage<T>(
 				: defaultValueRef.current;
 
 		try {
-			const item = window.localStorage.getItem(key);
-			// If item exists, parse it, otherwise return the resolved default value.
+			const item = getLocalStorageApi(key);
 			if (item) {
 				return JSON.parse(item) as T;
 			}
 		} catch (error) {
-			// Log error and fall back to default value if reading/parsing fails.
 			console.warn(`Error reading localStorage key "${key}":`, error);
 		}
 		return resolveddefaultValue;
 	}, [key]);
 
-	// Initialize state by reading from localStorage.
 	const [storedValue, setStoredValue] = useState<T>(readValueFromStorage);
 
-	// This function updates both localStorage and the React state.
 	const setValue = useCallback(
 		(value: T | ((prevState: T) => T)) => {
 			try {
-				// If a function is passed to setValue, it receives the latest value from storage.
 				const latestValueFromStorage = readValueFromStorage();
 				const valueToStore =
 					value instanceof Function ? value(latestValueFromStorage) : value;
-
-				// Save to localStorage.
-				window.localStorage.setItem(key, JSON.stringify(valueToStore));
-				// Update React state.
+				setLocalStorageApi(key, JSON.stringify(valueToStore));
 				setStoredValue(valueToStore);
 			} catch (error) {
 				console.warn(`Error setting localStorage key "${key}":`, error);
@@ -71,11 +49,9 @@ export function useLocalStorage<T>(
 		[key, readValueFromStorage],
 	);
 
-	// This function removes the item from localStorage and resets the React state.
 	const removeValue = useCallback(() => {
 		try {
-			window.localStorage.removeItem(key);
-			// Reset state to the (potentially resolved) defaultValue.
+			removeLocalStorageApi(key);
 			setStoredValue(
 				defaultValueRef.current instanceof Function
 					? (defaultValueRef.current as () => T)()
@@ -86,12 +62,9 @@ export function useLocalStorage<T>(
 		}
 	}, [key]);
 
-	// useEffect to update the storedValue if the key changes,
-	// or if the defaultValue prop changes causing readValueFromStorage to change.
-	// This ensures the hook reflects the correct localStorage item if its key prop dynamically changes.
 	useEffect(() => {
 		setStoredValue(readValueFromStorage());
-	}, [key, readValueFromStorage]); // Re-run if key or the read function changes.
+	}, [key, readValueFromStorage]);
 
 	return [storedValue, setValue, removeValue];
 }

frontend/src/hooks/useSafeNavigate.ts

@@ -108,19 +108,18 @@ export const useSafeNavigate = (
 	const safeNavigate = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
-			const currentUrl = new URL(
-				`${location.pathname}${location.search}`,
-				window.location.origin,
-			);
+			// eslint-disable-next-line rulesdir/no-raw-absolute-path
+			const base = window.location.origin;
+			const currentUrl = new URL(`${location.pathname}${location.search}`, base);
 
 			let targetUrl: URL;
 
 			if (typeof to === 'string') {
-				targetUrl = new URL(to, window.location.origin);
+				targetUrl = new URL(to, base);
 			} else {
 				targetUrl = new URL(
 					`${to.pathname || location.pathname}${to.search || ''}`,
-					window.location.origin,
+					base,
 				);
 			}
 

frontend/src/pages/MessagingQueues/MessagingQueues.tsx

@@ -59,7 +59,7 @@ function MessagingQueues(): JSX.Element {
 				history.push(link);
 			}
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 

frontend/src/pages/Support/Support.tsx

@@ -20,6 +20,8 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import './Support.styles.scss';
 
@@ -92,7 +94,7 @@ export default function Support(): JSX.Element {
 
 	const { pathname } = useLocation();
 	const handleChannelWithRedirects = (url: string): void => {
-		window.open(url, '_blank');
+		openInNewTab(url);
 	};
 
 	useEffect(() => {
@@ -150,7 +152,7 @@ export default function Support(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -29,6 +29,7 @@ import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { isModifierKeyPressed } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate } from 'utils/timeUtils';
 
 import CustomerStoryCard from './CustomerStoryCard';
@@ -115,7 +116,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 		logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [updateCreditCard]);
 

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -21,6 +21,7 @@ import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDateWithMinutes } from 'utils/timeUtils';
 
 import featureGraphicCorrelationUrl from '@/assets/Images/feature-graphic-correlation.svg';
@@ -57,7 +58,7 @@ function WorkspaceSuspended(): JSX.Element {
 
 	const handleUpdateCreditCard = useCallback(async () => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);
 

frontend/src/providers/Dashboard/helpers/selectedRowWidgetIdHelper.ts

@@ -1,3 +1,8 @@
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import removeSessionStorageApi from 'api/browser/sessionstorage/remove';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
+import { getScopedKey } from 'utils/storage';
+
 const PREFIX = 'dashboard_row_widget_';
 
 function getKey(dashboardId: string): string {
@@ -8,21 +13,25 @@ export function setSelectedRowWidgetId(
 	dashboardId: string,
 	widgetId: string,
 ): void {
-	const key = getKey(dashboardId);
+	const unscopedKey = getKey(dashboardId);
+	const scopedPrefix = getScopedKey(PREFIX);
+	const scopedKey = getScopedKey(unscopedKey);
 
-	// remove all other selected widget ids for the dashboard before setting the new one
-	// to ensure only one widget is selected at a time. Helps out in weird navigate and refresh scenarios
+	// Object.keys returns the raw/already-scoped keys from the browser.
+	// Direct sessionStorage.removeItem is intentional here — k is already fully scoped.
+	// eslint-disable-next-line no-restricted-globals
 	Object.keys(sessionStorage)
-		.filter((k) => k.startsWith(PREFIX) && k !== key)
+		.filter((k) => k.startsWith(scopedPrefix) && k !== scopedKey)
+		// eslint-disable-next-line no-restricted-globals
 		.forEach((k) => sessionStorage.removeItem(k));
 
-	sessionStorage.setItem(key, widgetId);
+	setSessionStorageApi(unscopedKey, widgetId);
 }
 
 export function getSelectedRowWidgetId(dashboardId: string): string | null {
-	return sessionStorage.getItem(getKey(dashboardId));
+	return getSessionStorageApi(getKey(dashboardId));
 }
 
 export function clearSelectedRowWidgetId(dashboardId: string): void {
-	sessionStorage.removeItem(getKey(dashboardId));
+	removeSessionStorageApi(getKey(dashboardId));
 }

frontend/src/providers/EventSource.tsx

@@ -22,6 +22,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { EventListener, EventSourcePolyfill } from 'event-source-polyfill';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
+import { withBasePath } from 'utils/basePath';
 
 interface IEventSourceContext {
 	eventSourceInstance: EventSourcePolyfill | null;
@@ -129,9 +130,12 @@ export function EventSourceProvider({
 
 	const handleStartOpenConnection = useCallback(
 		(filterExpression?: string): void => {
-			const eventSourceUrl = `${
-				ENVIRONMENT.baseURL
-			}${apiV3}logs/livetail?filter=${encodeURIComponent(filterExpression || '')}`;
+			const apiPath = `${apiV3}logs/livetail?filter=${encodeURIComponent(
+				filterExpression || '',
+			)}`;
+			const eventSourceUrl = ENVIRONMENT.baseURL
+				? `${ENVIRONMENT.baseURL}${apiPath}`
+				: withBasePath(apiPath);
 
 			eventSourceRef.current = new EventSourcePolyfill(eventSourceUrl, {
 				headers: {

frontend/src/providers/Timezone.tsx

@@ -9,6 +9,8 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import {
 	getBrowserTimezone,
 	getTimezoneObjectByTimezoneString,
@@ -43,7 +45,7 @@ function TimezoneProvider({
 }): JSX.Element {
 	const getStoredTimezoneValue = (): Timezone | null => {
 		try {
-			const timezoneValue = localStorage.getItem(LOCALSTORAGE.PREFERRED_TIMEZONE);
+			const timezoneValue = getLocalStorageKey(LOCALSTORAGE.PREFERRED_TIMEZONE);
 			if (timezoneValue) {
 				return getTimezoneObjectByTimezoneString(timezoneValue);
 			}
@@ -55,7 +57,7 @@ function TimezoneProvider({
 
 	const setStoredTimezoneValue = (value: string): void => {
 		try {
-			localStorage.setItem(LOCALSTORAGE.PREFERRED_TIMEZONE, value);
+			setLocalStorageKey(LOCALSTORAGE.PREFERRED_TIMEZONE, value);
 		} catch (error) {
 			console.error('Error saving timezone to localStorage:', error);
 		}

frontend/src/providers/preferences/configs/logsUpdaterConfig.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -48,7 +49,7 @@ const getLogsUpdaterConfig = (
 
 			// Also update local storage
 			const local = JSON.parse(
-				localStorage.getItem(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
+				getLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
 			);
 			local.selectColumns = newColumns;
 			setLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS, JSON.stringify(local));
@@ -76,7 +77,7 @@ const getLogsUpdaterConfig = (
 
 			// Also update local storage
 			const local = JSON.parse(
-				localStorage.getItem(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
+				getLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
 			);
 			Object.assign(local, newFormatting);
 			setLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS, JSON.stringify(local));

frontend/src/providers/preferences/configs/tracesUpdaterConfig.ts

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
+import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -37,7 +38,7 @@ const getTracesUpdaterConfig = (
 			});
 
 			const local = JSON.parse(
-				localStorage.getItem(LOCALSTORAGE.TRACES_LIST_OPTIONS) || '{}',
+				getLocalStorageKey(LOCALSTORAGE.TRACES_LIST_OPTIONS) || '{}',
 			);
 			local.selectColumns = newColumns;
 			setLocalStorageKey(LOCALSTORAGE.TRACES_LIST_OPTIONS, JSON.stringify(local));

frontend/src/utils/__tests__/storage.test.ts

@@ -0,0 +1,72 @@
+/**
+ * storage.ts memoizes basePath at module init (via basePath.ts IIFE).
+ * Use jest.isolateModules to re-import storage with a fresh DOM state each time.
+ */
+
+type StorageModule = typeof import('../storage');
+
+function loadStorageModule(href?: string): StorageModule {
+	if (href !== undefined) {
+		const base = document.createElement('base');
+		base.setAttribute('href', href);
+		document.head.appendChild(base);
+	}
+	let mod!: StorageModule;
+	jest.isolateModules(() => {
+		// eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
+		mod = require('../storage');
+	});
+	return mod;
+}
+
+afterEach(() => {
+	document.head.querySelectorAll('base').forEach((el) => el.remove());
+	localStorage.clear();
+});
+
+describe('getScopedKey — root path "/"', () => {
+	it('returns the bare key unchanged', () => {
+		const { getScopedKey } = loadStorageModule('/');
+		expect(getScopedKey('AUTH_TOKEN')).toBe('AUTH_TOKEN');
+	});
+
+	it('backward compat: scoped key equals direct localStorage key', () => {
+		const { getScopedKey } = loadStorageModule('/');
+		localStorage.setItem('AUTH_TOKEN', 'tok');
+		expect(localStorage.getItem(getScopedKey('AUTH_TOKEN'))).toBe('tok');
+	});
+});
+
+describe('getScopedKey — prefixed path "/signoz/"', () => {
+	it('prefixes the key with the base path', () => {
+		const { getScopedKey } = loadStorageModule('/signoz/');
+		expect(getScopedKey('AUTH_TOKEN')).toBe('/signoz/AUTH_TOKEN');
+	});
+
+	it('isolates from root namespace', () => {
+		const { getScopedKey } = loadStorageModule('/signoz/');
+		localStorage.setItem('AUTH_TOKEN', 'root-tok');
+		expect(localStorage.getItem(getScopedKey('AUTH_TOKEN'))).toBeNull();
+	});
+});
+
+describe('getScopedKey — prefixed path "/testing/"', () => {
+	it('prefixes the key with /testing/', () => {
+		const { getScopedKey } = loadStorageModule('/testing/');
+		expect(getScopedKey('THEME')).toBe('/testing/THEME');
+	});
+});
+
+describe('getScopedKey — prefixed path "/playwright/"', () => {
+	it('prefixes the key with /playwright/', () => {
+		const { getScopedKey } = loadStorageModule('/playwright/');
+		expect(getScopedKey('THEME')).toBe('/playwright/THEME');
+	});
+});
+
+describe('getScopedKey — no <base> tag', () => {
+	it('falls back to bare key (basePath defaults to "/")', () => {
+		const { getScopedKey } = loadStorageModule();
+		expect(getScopedKey('THEME')).toBe('THEME');
+	});
+});

frontend/src/utils/basePath.ts

@@ -35,6 +35,7 @@ export function withBasePath(path: string): string {
  * getAbsoluteUrl(ROUTES.LOGS_EXPLORER) → 'https://host/signoz/logs/logs-explorer'
  */
 export function getAbsoluteUrl(path: string): string {
+	// eslint-disable-next-line rulesdir/no-raw-absolute-path
 	return window.location.origin + withBasePath(path);
 }
 
@@ -44,7 +45,7 @@ export function getAbsoluteUrl(path: string): string {
  * getBaseUrl() → 'https://host/signoz'
  */
 export function getBaseUrl(): string {
-	return (
-		window.location.origin + (_basePath === '/' ? '' : _basePath.slice(0, -1))
-	);
+	// eslint-disable-next-line rulesdir/no-raw-absolute-path
+	const origin = window.location.origin;
+	return origin + (_basePath === '/' ? '' : _basePath.slice(0, -1));
 }

frontend/src/utils/customTimeRangeUtils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import removeLocalStorageKey from 'api/browser/localstorage/remove';
+import setLocalStorageKey from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import dayjs from 'dayjs';
@@ -16,9 +19,7 @@ const MAX_STORED_RANGES = 3;
  */
 export const getCustomTimeRanges = (): CustomTimeRange[] => {
 	try {
-		const stored = localStorage.getItem(
-			LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES,
-		);
+		const stored = getLocalStorageKey(LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES);
 		if (!stored) {
 			return [];
 		}
@@ -78,7 +79,7 @@ export const addCustomTimeRange = (
 
 	// Store in localStorage
 	try {
-		localStorage.setItem(
+		setLocalStorageKey(
 			LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES,
 			JSON.stringify(updatedRanges),
 		);
@@ -94,7 +95,7 @@ export const addCustomTimeRange = (
  */
 export const clearCustomTimeRanges = (): void => {
 	try {
-		localStorage.removeItem(LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES);
+		removeLocalStorageKey(LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES);
 	} catch (error) {
 		console.warn('Failed to clear custom time ranges from localStorage:', error);
 	}
@@ -112,7 +113,7 @@ export const removeCustomTimeRange = (timestamp: number): CustomTimeRange[] => {
 	);
 
 	try {
-		localStorage.setItem(
+		setLocalStorageKey(
 			LOCALSTORAGE.LAST_USED_CUSTOM_TIME_RANGES,
 			JSON.stringify(updatedRanges),
 		);

frontend/src/utils/lazyWithRetries.ts

@@ -1,3 +1,5 @@
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
 import { SESSIONSTORAGE } from 'constants/sessionStorage';
 
 type ComponentImport = () => Promise<any>;
@@ -5,18 +7,17 @@ type ComponentImport = () => Promise<any>;
 export const lazyRetry = (componentImport: ComponentImport): Promise<any> =>
 	new Promise((resolve, reject) => {
 		const hasRefreshed: boolean = JSON.parse(
-			window.sessionStorage.getItem(SESSIONSTORAGE.RETRY_LAZY_REFRESHED) ||
-				'false',
+			getSessionStorageApi(SESSIONSTORAGE.RETRY_LAZY_REFRESHED) || 'false',
 		);
 
 		componentImport()
 			.then((component: any) => {
-				window.sessionStorage.setItem(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'false');
+				setSessionStorageApi(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'false');
 				resolve(component);
 			})
 			.catch((error: Error) => {
 				if (!hasRefreshed) {
-					window.sessionStorage.setItem(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'true');
+					setSessionStorageApi(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'true');
 
 					window.location.reload();
 				}

frontend/src/utils/storage.ts

@@ -0,0 +1,11 @@
+import { getBasePath } from 'utils/basePath';
+
+/**
+ * Returns a storage key scoped to the runtime base path.
+ * At root ("/") the bare key is returned unchanged — backward compatible.
+ * At any other prefix the key is prefixed: "/signoz/AUTH_TOKEN".
+ */
+export function getScopedKey(key: string): string {
+	const basePath = getBasePath();
+	return basePath === '/' ? key : `${basePath}${key}`;
+}