diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx index 66ce70fb86..09b6b65e1a 100644 --- a/frontend/src/container/GridCardLayout/GridCard/index.tsx +++ b/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); }, }, ); diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index 180539fb84..fa125091e6 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/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)) { diff --git a/frontend/src/providers/Dashboard/Dashboard.tsx b/frontend/src/providers/Dashboard/Dashboard.tsx index 8714cdba2c..ee3d196e01 100644 --- a/frontend/src/providers/Dashboard/Dashboard.tsx +++ b/frontend/src/providers/Dashboard/Dashboard.tsx @@ -69,6 +69,8 @@ const DashboardContext = createContext({ updateLocalStorageDashboardVariables: () => {}, variablesToGetUpdated: [], setVariablesToGetUpdated: () => {}, + dashboardQueryRangeCalled: false, + setDashboardQueryRangeCalled: () => {}, }); interface Props { @@ -85,6 +87,11 @@ export function DashboardProvider({ const [isDashboardLocked, setIsDashboardLocked] = useState(false); + const [ + dashboardQueryRangeCalled, + setDashboardQueryRangeCalled, + ] = useState(false); + const isDashboardPage = useRouteMatch({ 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, ], ); diff --git a/frontend/src/providers/Dashboard/types.ts b/frontend/src/providers/Dashboard/types.ts index e19c00e422..8ca214cfaf 100644 --- a/frontend/src/providers/Dashboard/types.ts +++ b/frontend/src/providers/Dashboard/types.ts @@ -43,4 +43,6 @@ export interface IDashboardContext { ) => void; variablesToGetUpdated: string[]; setVariablesToGetUpdated: React.Dispatch>; + dashboardQueryRangeCalled: boolean; + setDashboardQueryRangeCalled: (value: boolean) => void; }