chore(frontend): add no-antd-barrel lint rule

frontend/.oxlintrc.json

@@ -291,6 +291,11 @@
     // Prevents the usage of specific antd components in favor of our lib
     "signoz/no-signozhq-ui-barrel": "error",
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
+    "signoz/no-antd-barrel": "off",
+    // Off until someone runs `oxlint --fix --rules signoz/no-antd-barrel` over
+    // src: 626 files still import the barrel and the autofix has not been
+    // reviewed against the production bundle. Same rationale as
+    // no-signozhq-ui-barrel above; the barrel is ~536 modules.
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "signoz/no-dashboard-fetch-outside-root": "error",

frontend/jest.config.ts

@@ -13,6 +13,9 @@ const config: Config.InitialOptions = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
+		'^antd/es/(.*)$': 'antd/lib/$1',
+		'^lodash-es$': 'lodash',
+		'^lodash-es/(.*)$': 'lodash/$1',
 		'\\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$':
 			'<rootDir>/__mocks__/fileMock.ts',
 		// The icon glob module uses `import.meta.glob` (Vite-only); jest can't parse

frontend/plugins/rules/no-antd-barrel.mjs

@@ -0,0 +1,98 @@
+/**
+ * Rule: no-antd-barrel
+ *
+ * Forbids importing from the `antd` barrel and requires the matching
+ * `antd/es/<component>` subpath instead.
+ *
+ * This rule catches:
+ *   import { Tooltip } from 'antd'
+ *   import { Button, Modal } from 'antd'
+ *   import { theme as antdTheme } from 'antd'
+ *
+ * And expects:
+ *   import Tooltip from 'antd/es/tooltip'
+ *   import Button from 'antd/es/button'
+ *   import antdTheme from 'antd/es/theme'
+ *
+ * Why: `antd/es/index.js` re-exports every component, and a re-export cannot be
+ * erased by type elision the way an unused named import can, so one `Tooltip`
+ * import loads all ~536 antd modules. Measured on the jest suite, five files on
+ * the `tests/test-utils` path were responsible for the whole antd subtree;
+ * converting just those cut per-file import cost 33%.
+ *
+ * Type-only imports are exempt: `import type { ThemeConfig } from 'antd'` is
+ * erased before the module is ever requested.
+ */
+
+const SUBPATH_OVERRIDES = {
+	theme: 'theme',
+	message: 'message',
+	notification: 'notification',
+	ConfigProvider: 'config-provider',
+	FloatButton: 'float-button',
+	AutoComplete: 'auto-complete',
+	BackTop: 'back-top',
+	ColorPicker: 'color-picker',
+	DatePicker: 'date-picker',
+	InputNumber: 'input-number',
+	TimePicker: 'time-picker',
+	TreeSelect: 'tree-select',
+	QRCode: 'qr-code',
+};
+
+function toSubpath(name) {
+	if (SUBPATH_OVERRIDES[name]) return SUBPATH_OVERRIDES[name];
+	// Components are PascalCase and live at the kebab-case path.
+	if (!/^[A-Z]/.test(name)) return null;
+	return name
+		.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+		.toLowerCase();
+}
+
+function buildReplacement(node) {
+	const quote = node.source.raw?.[0] === '"' ? '"' : "'";
+	const lines = [];
+
+	for (const spec of node.specifiers) {
+		if (spec.type !== 'ImportSpecifier') return null;
+		if (spec.imported?.type !== 'Identifier') return null;
+
+		const subpath = toSubpath(spec.imported.name);
+		if (!subpath) return null;
+
+		// An inline `type` specifier keeps its name; it is erased either way.
+		const keyword = spec.importKind === 'type' ? 'import type' : 'import';
+		lines.push(
+			`${keyword} ${spec.local.name} from ${quote}antd/es/${subpath}${quote};`,
+		);
+	}
+
+	return lines.length ? lines.join('\n') : null;
+}
+
+export default {
+	meta: {
+		fixable: 'code',
+	},
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				if (node.source.value !== 'antd') return;
+				if (node.importKind === 'type') return;
+				if (node.specifiers.length === 0) return;
+
+				const replacement = buildReplacement(node);
+				const report = {
+					node: node.source,
+					message:
+						"Do not import from the 'antd' barrel. Use the matching subpath instead (e.g. 'antd/es/tooltip', 'antd/es/button'). The barrel re-exports every component, so one named import loads all ~536 antd modules and slows every test that reaches this file.",
+				};
+				if (replacement) {
+					report.fix = (fixer) => fixer.replaceText(node, replacement);
+				}
+				context.report(report);
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -11,6 +11,7 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
+import noAntdBarrel from './rules/no-antd-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
@@ -27,6 +28,7 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
+		'no-antd-barrel': noAntdBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -12,7 +12,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/widgets/widget';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -12,7 +12,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { Widgets } from 'types/api/widgets/widget';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -15,7 +15,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal } from 'antd';
+import Button from 'antd/es/button';
+import Modal from 'antd/es/modal';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
+import Button from 'antd/es/button';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown } from '@signozhq/icons';

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -12,7 +12,7 @@ import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 import uPlot, { AlignedData } from 'uplot';
 

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -34,7 +34,7 @@ import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';

frontend/src/container/LogsExplorerChart/index.tsx

@@ -12,7 +12,7 @@ import GetMinMax from 'lib/getMinMax';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { StackMode } from 'lib/uPlotV2/config/types';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -33,8 +33,8 @@ let mockGlobalTimeState: {
 } | null = null;
 
 // Mock UpdateTimeInterval to update the mock state that useSelector will use
-jest.mock('store/actions', () => {
-	const originalModule = jest.requireActual('store/actions');
+jest.mock('store/actions/global', () => {
+	const originalModule = jest.requireActual('store/actions/global');
 	const GetMinMax = jest.requireActual('lib/getMinMax').default;
 
 	return {

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -16,7 +16,7 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/widgets/widget';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/MeterExplorer/Explorer/useTimeSeriesTimeManagement.ts

@@ -11,7 +11,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { getTimeRange } from 'utils/getTimeRange';
 
 interface UseTimeSeriesTimeManagementProps {

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -23,7 +23,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
 import history from 'lib/history';
 import store from 'store';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -25,7 +25,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
 import history from 'lib/history';
 import store from 'store';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -26,7 +26,7 @@ import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -36,7 +36,7 @@ import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { SuccessResponse, Warning } from 'types/api';
 import { LegendPosition } from 'types/api/widgets/widget';

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -28,7 +28,7 @@ import { useTimezone } from 'providers/Timezone';
 // eslint-disable-next-line no-restricted-imports
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
-import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions';
+import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/WidgetCard/Card/index.tsx

@@ -14,7 +14,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/hooks/queryBuilder/__tests__/useSyncTimeOnStagedQueryChange.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 
 import { useSyncTimeOnStagedQueryChange } from '../useSyncTimeOnStagedQueryChange';
 
@@ -12,7 +12,7 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn(),
 }));
 
-jest.mock('store/actions', () => ({
+jest.mock('store/actions/global', () => ({
 	UpdateTimeInterval: jest.fn((time: string) => ({
 		type: 'UPDATE_TIME_INTERVAL_THUNK',
 		payload: time,

frontend/src/hooks/queryBuilder/useSyncTimeOnStagedQueryChange.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/hooks/useDarkMode/index.tsx

@@ -11,7 +11,8 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { theme as antdTheme, ThemeConfig } from 'antd';
+import type { ThemeConfig } from 'antd/es/config-provider';
+import antdTheme from 'antd/es/theme';
 import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';

frontend/src/hooks/useZoomOut.ts

@@ -6,7 +6,7 @@ import { QueryParams } from 'constants/query';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { getNextZoomOutRange } from 'lib/zoomOutUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -12,7 +12,8 @@ import useResourceAttribute from 'hooks/useResourceAttribute';
 import { whilelistedKeys } from 'hooks/useResourceAttribute/config';
 import { IResourceAttribute } from 'hooks/useResourceAttribute/types';
 import { filterServiceMapSupportedQueries } from 'hooks/useResourceAttribute/utils';
-import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions';
+import { getDetailedServiceMapItems } from 'store/actions/serviceMap';
+import type { ServiceMapStore } from 'store/actions/serviceMap';
 import { AppState } from 'store/reducers';
 import styled from 'styled-components';
 import { GlobalTime } from 'types/actions/globalTime';

frontend/src/modules/Usage/UsageExplorer.tsx

@@ -7,7 +7,9 @@ import { withRouter } from 'react-router-dom';
 import { Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import Graph from 'components/Graph';
-import { GetService, getUsageData, UsageDataItem } from 'store/actions';
+import { GetService } from 'store/actions/metrics';
+import { getUsageData } from 'store/actions/usage';
+import type { UsageDataItem } from 'store/actions/usage';
 import { AppState } from 'store/reducers';
 import { GlobalTime } from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/OverviewRightPanelGraph.tsx

@@ -14,7 +14,7 @@ import { Button } from 'container/MetricsApplication/Tabs/styles';
 import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/widgets/widget';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions.ts

@@ -11,7 +11,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import logEvent from 'api/common/logEvent';
 import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 
 export interface PanelInteractions {
 	/** Drag-select a chart range → write it to the URL + global time so every panel re-fetches the same range. */

frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageGraph.tsx

@@ -9,7 +9,7 @@ import GridCard from 'container/WidgetCard/Card';
 import { Card } from 'container/WidgetCard/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { Widgets } from 'types/api/widgets/widget';
 
 import './MetricPage.styles.scss';

frontend/src/pages/MessagingQueues/MQGraph/MQGraph.tsx

@@ -11,7 +11,7 @@ import { Card } from 'container/WidgetCard/styles';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 
 import {
 	getFiltersFromConfigOptions,

frontend/src/periscope/components/KeyValueLabel/KeyValueLabel.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import Tooltip from 'antd/es/tooltip';
 
 import TrimmedText from '../TrimmedText/TrimmedText';
 

frontend/src/periscope/components/TrimmedText/TrimmedText.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Tooltip } from 'antd';
+import Tooltip from 'antd/es/tooltip';
 
 function TrimmedText({
 	text,

frontend/src/store/actions/index.ts

@@ -1,5 +0,0 @@
-export * from './global';
-export * from './metrics';
-export * from './serviceMap';
-export * from './types';
-export * from './usage';

frontend/src/store/reducers/serviceMap.ts

@@ -1,4 +1,5 @@
-import { Action, ActionTypes, ServiceMapStore } from 'store/actions';
+import { Action, ActionTypes } from 'store/actions/types';
+import type { ServiceMapStore } from 'store/actions/serviceMap';
 
 const initialState: ServiceMapStore = {
 	items: [],

frontend/src/store/reducers/usage.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sonarjs/no-small-switch */
-import { Action, ActionTypes, UsageDataItem } from 'store/actions';
+import { Action, ActionTypes } from 'store/actions/types';
+import type { UsageDataItem } from 'store/actions/usage';
 
 export const usageDataReducer = (
 	state: UsageDataItem[] = [{ timestamp: 0, count: 0 }],

frontend/src/utils/sanitizeOrderBy.ts

@@ -1,4 +1,3 @@
-import * as Sentry from '@sentry/react';
 import {
 	IBuilderQuery,
 	OrderByPayload,
@@ -23,11 +22,15 @@ export function sanitizeOrderByForExplorer(
 	const hasInvalidOrderBy = current.some((o) => !allowed.has(o.columnName));
 
 	if (hasInvalidOrderBy) {
-		Sentry.captureEvent({
-			message: `Invalid orderBy: current: ${JSON.stringify(
-				current,
-			)} - allowed: ${JSON.stringify(Array.from(allowed))}`,
-			level: 'warning',
+		// Loaded on demand: a static import puts all of @sentry/react (~273
+		// modules) in the graph of every module that reaches this file.
+		void import('@sentry/react').then((Sentry) => {
+			Sentry.captureEvent({
+				message: `Invalid orderBy: current: ${JSON.stringify(
+					current,
+				)} - allowed: ${JSON.stringify(Array.from(allowed))}`,
+				level: 'warning',
+			});
 		});
 	}
 	return current.filter((o) => allowed.has(o.columnName));