From 7cf567792aeaeee4ca0a7cdaa18bdff1f07fdb79 Mon Sep 17 00:00:00 2001
From: palash-signoz <palash@signoz.io>
Date: Thu, 5 May 2022 11:12:42 +0530
Subject: [PATCH] chore: error message is displayed to user in the error page
 (#1085)

---
 frontend/src/container/AllError/index.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/AllError/index.tsx b/frontend/src/container/AllError/index.tsx
index 82a62916da..500a5edb24 100644
--- a/frontend/src/container/AllError/index.tsx
+++ b/frontend/src/container/AllError/index.tsx
@@ -1,9 +1,10 @@
-import { Table, Typography } from 'antd';
+import { notification, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import getAll from 'api/errors/getAll';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { generatePath, Link } from 'react-router-dom';
@@ -16,6 +17,8 @@ function AllErrors(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
+	const { t } = useTranslation(['common']);
+
 	const { isLoading, data } = useQuery(['getAllError', [maxTime, minTime]], {
 		queryFn: () =>
 			getAll({
@@ -24,6 +27,14 @@ function AllErrors(): JSX.Element {
 			}),
 	});
 
+	useEffect(() => {
+		if (data?.error) {
+			notification.error({
+				message: data.error || t('something_went_wrong'),
+			});
+		}
+	}, [data?.error, data?.payload, t]);
+
 	const getDateValue = (value: string): JSX.Element => {
 		return (
 			<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>