chore: added sentry alert for dashboard when query_range not called (#6791)

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -44,6 +44,7 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		variablesToGetUpdated,
+		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
@@ -202,11 +203,13 @@ function GridCardGraph({
 			refetchOnMount: false,
 			onError: (error) => {
 				setErrorMessage(error.message);
+				setDashboardQueryRangeCalled(true);
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
+				setDashboardQueryRangeCalled(true);
 			},
 		},
 	);

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -1,5 +1,6 @@
 import './GridCardLayout.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Form, Input, Modal, Typography } from 'antd';
 import { useForm } from 'antd/es/form/Form';
@@ -61,6 +62,8 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setPanelMap,
 		setSelectedDashboard,
 		isDashboardLocked,
+		dashboardQueryRangeCalled,
+		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const { pathname } = useLocation();
@@ -124,6 +127,25 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		setDashboardLayout(sortLayout(layouts));
 	}, [layouts]);
 
+	useEffect(() => {
+		setDashboardQueryRangeCalled(false);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			// Send Sentry event if query_range is not called within expected timeframe (2 mins) when there are widgets
+			if (!dashboardQueryRangeCalled && data?.widgets?.length) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe even when there are ${data?.widgets?.length} widgets`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+
+		return (): void => clearTimeout(timeoutId);
+	}, [dashboardQueryRangeCalled, data?.widgets?.length]);
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data)) {

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -69,6 +69,8 @@ const DashboardContext = createContext<IDashboardContext>({
 	updateLocalStorageDashboardVariables: () => {},
 	variablesToGetUpdated: [],
 	setVariablesToGetUpdated: () => {},
+	dashboardQueryRangeCalled: false,
+	setDashboardQueryRangeCalled: () => {},
 });
 
 interface Props {
@@ -85,6 +87,11 @@ export function DashboardProvider({
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
+	const [
+		dashboardQueryRangeCalled,
+		setDashboardQueryRangeCalled,
+	] = useState<boolean>(false);
+
 	const isDashboardPage = useRouteMatch<Props>({
 		path: ROUTES.DASHBOARD,
 		exact: true,
@@ -407,6 +414,8 @@ export function DashboardProvider({
 			updateLocalStorageDashboardVariables,
 			variablesToGetUpdated,
 			setVariablesToGetUpdated,
+			dashboardQueryRangeCalled,
+			setDashboardQueryRangeCalled,
 		}),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
@@ -424,6 +433,8 @@ export function DashboardProvider({
 			currentDashboard,
 			variablesToGetUpdated,
 			setVariablesToGetUpdated,
+			dashboardQueryRangeCalled,
+			setDashboardQueryRangeCalled,
 		],
 	);
 

frontend/src/providers/Dashboard/types.ts

@@ -43,4 +43,6 @@ export interface IDashboardContext {
 	) => void;
 	variablesToGetUpdated: string[];
 	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
+	dashboardQueryRangeCalled: boolean;
+	setDashboardQueryRangeCalled: (value: boolean) => void;
 }