feat: retry on chunk load error

frontend/.gitignore

@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.env.sentry-build-plugin

frontend/package.json

@@ -41,7 +41,7 @@
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "7.102.1",
-		"@sentry/webpack-plugin": "2.14.2",
+		"@sentry/webpack-plugin": "2.16.0",
 		"@signozhq/design-tokens": "0.0.8",
 		"@uiw/react-md-editor": "3.23.5",
 		"@xstate/react": "^3.0.0",

frontend/src/components/Loadable/index.tsx

@@ -1,9 +1,10 @@
 import { ComponentType, lazy, LazyExoticComponent } from 'react';
+import { lazyRetry } from 'utils/lazyWithRetries';
 
 function Loadable(importPath: {
 	(): LoadableProps;
 }): LazyExoticComponent<LazyComponent> {
-	return lazy(() => importPath());
+	return lazy(() => lazyRetry(() => importPath()));
 }
 
 type LazyComponent = ComponentType<Record<string, unknown>>;

frontend/src/constants/sessionStorage.ts

@@ -0,0 +1,3 @@
+export enum SESSIONSTORAGE {
+	RETRY_LAZY_REFRESHED = 'retry-lazy-refreshed',
+}

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -3,6 +3,7 @@ import Spinner from 'components/Spinner';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { lazy, Suspense, useMemo } from 'react';
 import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
+import { lazyRetry } from 'utils/lazyWithRetries';
 
 import ErrorLink from './ErrorLink';
 import LinkContainer from './Link';
@@ -17,8 +18,9 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 
 	const items = sortedConfig.map((item) => {
 		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-		const Component = lazy(
-			() => import(`@ant-design/icons/es/icons/${iconName}.js`),
+
+		const Component = lazy(() =>
+			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
 		);
 		return {
 			key: item.text + item.href,

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

@@ -339,7 +339,6 @@ function DateTimeSelection({
 	};
 
 	const onCustomDateHandler = (dateTimeRange: DateTimeRangeType): void => {
-		// console.log('dateTimeRange', dateTimeRange);
 		if (dateTimeRange !== null) {
 			const [startTimeMoment, endTimeMoment] = dateTimeRange;
 			if (startTimeMoment && endTimeMoment) {

frontend/src/lib/logql/reverseParser.ts

@@ -2,37 +2,38 @@
 // @ts-ignore
 // @ts-nocheck
 
-import { QueryTypes, StringTypeQueryOperators } from "./tokens";
+import { QueryTypes, StringTypeQueryOperators } from './tokens';
 
 export const reverseParser = (
 	parserQueryArr: { type: string; value: any }[] = [],
 ) => {
 	let queryString = '';
-	let lastToken: { type: string; value: any }; 
+	let lastToken: { type: string; value: any };
 	parserQueryArr.forEach((query) => {
 		if (queryString) {
 			queryString += ' ';
 		}
 
 		if (Array.isArray(query.value) && query.value.length > 0) {
-			// if the values are array type, here we spread them in 
-			// ('a', 'b') format 
+			// if the values are array type, here we spread them in
+			// ('a', 'b') format
 			queryString += `(${query.value.map((val) => `'${val}'`).join(',')})`;
 		} else {
-			if (query.type === QueryTypes.QUERY_VALUE 
-				&& lastToken.type === QueryTypes.QUERY_OPERATOR 
-				&& Object.values(StringTypeQueryOperators).includes(lastToken.value) ) {
-					// for operators that need string type value, here we append single 
-					// quotes. if the content has single quote they would be removed 
-					queryString += `'${query.value?.replace(/'/g, '')}'`;
+			if (
+				query.type === QueryTypes.QUERY_VALUE &&
+				lastToken.type === QueryTypes.QUERY_OPERATOR &&
+				Object.values(StringTypeQueryOperators).includes(lastToken.value)
+			) {
+				// for operators that need string type value, here we append single
+				// quotes. if the content has single quote they would be removed
+				queryString += `'${query.value?.replace(/'/g, '')}'`;
 			} else {
 				queryString += query.value;
 			}
 		}
 		lastToken = query;
 	});
 
-	// console.log(queryString);
 	return queryString;
 };
 

frontend/src/utils/lazyWithRetries.ts

@@ -0,0 +1,26 @@
+import { SESSIONSTORAGE } from 'constants/sessionStorage';
+
+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',
+		);
+
+		componentImport()
+			.then((component: any) => {
+				window.sessionStorage.setItem(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'false');
+				resolve(component);
+			})
+			.catch((error: Error) => {
+				if (!hasRefreshed) {
+					window.sessionStorage.setItem(SESSIONSTORAGE.RETRY_LAZY_REFRESHED, 'true');
+
+					window.location.reload();
+				}
+
+				reject(error);
+			});
+	});

frontend/webpack.config.js

@@ -64,7 +64,7 @@ if (process.env.BUNDLE_ANALYSER === 'true') {
  */
 const config = {
 	mode: 'development',
-	devtool: 'eval-source-map',
+	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
 	devServer: {
 		historyApiFallback: {

frontend/webpack.config.prod.js

@@ -83,7 +83,7 @@ if (process.env.BUNDLE_ANALYSER === 'true') {
 
 const config = {
 	mode: 'production',
-	devtool: 'eval-source-map',
+	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
 	output: {
 		path: resolve(__dirname, './build'),