feat: move text to translations

frontend/public/locales/en/errorDetails.json

@@ -3,5 +3,7 @@
 	"see_error_in_trace_graph": "See the error in trace graph",
 	"stack_trace": "Stacktrace",
 	"older": "Older",
-	"newer": "Newer"
+	"newer": "Newer",
+	"something_went_wrong": "Oops !!! Something went wrong",
+	"contact_if_issue_exists": "Don't worry, our team is here to help. Please contact support if the issue persists."
 }

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.styles.scss

@@ -1,16 +1,16 @@
 .error-boundary-fallback-container {
 	width: 100%;
-}
 
-.actionBtn {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
+	.actionBtn {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
 
-.title,
-.actions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
+	.title,
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
 }

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -3,8 +3,11 @@ import './ErrorBoundaryFallback.styles.scss';
 import { BugOutlined, UndoOutlined } from '@ant-design/icons';
 import { Button, Card, Typography } from 'antd';
 import Slack from 'container/SideNav/Slack';
+import { useTranslation } from 'react-i18next';
 
 function ErrorBoundaryFallback(): JSX.Element {
+	const { t } = useTranslation(['errorDetails']);
+
 	const onClickSlackHandler = (): void => {
 		window.open('https://signoz.io/slack', '_blank');
 	};
@@ -17,16 +20,12 @@ function ErrorBoundaryFallback(): JSX.Element {
 			<div className="title">
 				<BugOutlined />
 				<Typography.Title type="danger" level={4} style={{ margin: 0 }}>
-					{' '}
-					Oops !!! Something went wrong
+					{t('something_went_wrong')}
 				</Typography.Title>
 			</div>
 
 			<>
-				<p>
-					Don&apos;t worry, our team is here to help. Please contact support if the
-					issue persists.
-				</p>
+				<p>{t('contact_if_issue_exists')}</p>
 
 				<div className="actions">
 					<Button