diff --git a/frontend/src/components/Uplot/Uplot.tsx b/frontend/src/components/Uplot/Uplot.tsx
index 05f050a87c..af6e28ddf3 100644
--- a/frontend/src/components/Uplot/Uplot.tsx
+++ b/frontend/src/components/Uplot/Uplot.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import './Uplot.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
@@ -13,7 +14,6 @@ import {
 	useImperativeHandle,
 	useRef,
 } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import UPlot from 'uplot';
 
 import { dataMatch, optionsUpdateState } from './utils';
@@ -139,7 +139,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 		}
 
 		return (
-			<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+			<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 				<div className="uplot-graph-container" ref={targetRef}>
 					{data && data[0] && data[0]?.length === 0 ? (
 						<div className="not-found">
@@ -147,7 +147,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 						</div>
 					) : null}
 				</div>
-			</ErrorBoundary>
+			</Sentry.ErrorBoundary>
 		);
 	},
 );
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index f3beabb2bc..ef7be7eef4 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -3,6 +3,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import './AppLayout.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import { Flex } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs';
@@ -27,7 +28,6 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -342,7 +342,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					/>
 				)}
 				<div className={cx('app-content', collapsed ? 'collapsed' : '')}>
-					<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+					<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 						<LayoutContent>
 							<ChildrenContainer
 								style={{
@@ -360,7 +360,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								{children}
 							</ChildrenContainer>
 						</LayoutContent>
-					</ErrorBoundary>
+					</Sentry.ErrorBoundary>
 				</div>
 			</Flex>
 		</Layout>
diff --git a/frontend/src/container/ServiceApplication/index.tsx b/frontend/src/container/ServiceApplication/index.tsx
index b7b22018e1..0afdc6950d 100644
--- a/frontend/src/container/ServiceApplication/index.tsx
+++ b/frontend/src/container/ServiceApplication/index.tsx
@@ -1,7 +1,7 @@
+import * as Sentry from '@sentry/react';
 import { FeatureKeys } from 'constants/features';
 import useFeatureFlag from 'hooks/useFeatureFlag';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { ErrorBoundary } from 'react-error-boundary';
 
 import ServiceMetrics from './ServiceMetrics';
 import ServiceTraces from './ServiceTraces';
@@ -12,11 +12,11 @@ function Services(): JSX.Element {
 		?.active;
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<Container style={{ marginTop: 0 }}>
 				{isSpanMetricEnabled ? <ServiceMetrics /> : <ServiceTraces />}
 			</Container>
-		</ErrorBoundary>
+		</Sentry.ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 570db8c1da..45a1b6f11a 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -7,7 +7,6 @@ import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { createRoot } from 'react-dom/client';
-import { ErrorBoundary } from 'react-error-boundary';
 import { HelmetProvider } from 'react-helmet-async';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
@@ -58,7 +57,7 @@ if (container) {
 	const root = createRoot(container);
 
 	root.render(
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<HelmetProvider>
 				<ThemeProvider>
 					<QueryClientProvider client={queryClient}>
@@ -68,6 +67,6 @@ if (container) {
 					</QueryClientProvider>
 				</ThemeProvider>
 			</HelmetProvider>
-		</ErrorBoundary>,
+		</Sentry.ErrorBoundary>,
 	);
 }
diff --git a/frontend/src/pages/LogsExplorer/index.tsx b/frontend/src/pages/LogsExplorer/index.tsx
index 0cc2c07b4d..d8f5f38804 100644
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -1,5 +1,6 @@
 import './LogsExplorer.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViews from 'container/LogsExplorerViews';
@@ -9,7 +10,6 @@ import Toolbar from 'container/Toolbar/Toolbar';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useEffect, useMemo, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { WrapperStyled } from './styles';
@@ -70,7 +70,7 @@ function LogsExplorer(): JSX.Element {
 	);
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<Toolbar
 				showAutoRefresh={false}
 				leftActions={
@@ -101,7 +101,7 @@ function LogsExplorer(): JSX.Element {
 					</div>
 				</div>
 			</WrapperStyled>
-		</ErrorBoundary>
+		</Sentry.ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/pages/Pipelines/index.tsx b/frontend/src/pages/Pipelines/index.tsx
index 81b3b503f9..a1ae05c30c 100644
--- a/frontend/src/pages/Pipelines/index.tsx
+++ b/frontend/src/pages/Pipelines/index.tsx
@@ -1,5 +1,6 @@
 import './Pipelines.styles.scss';
 
+import * as Sentry from '@sentry/react';
 import type { TabsProps } from 'antd';
 import { Tabs } from 'antd';
 import getPipeline from 'api/pipeline/get';
@@ -9,7 +10,6 @@ import PipelinePage from 'container/PipelinePage/Layouts/Pipeline';
 import { useNotifications } from 'hooks/useNotifications';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useEffect, useMemo } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { SuccessResponse } from 'types/api';
@@ -82,13 +82,13 @@ function Pipelines(): JSX.Element {
 	}
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<Tabs
 				className="pipeline-tabs"
 				defaultActiveKey="pipelines"
 				items={tabItems}
 			/>
-		</ErrorBoundary>
+		</Sentry.ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx
index 75bf58f1bd..3d31271c18 100644
--- a/frontend/src/pages/Trace/index.tsx
+++ b/frontend/src/pages/Trace/index.tsx
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react';
 import { Card } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import ROUTES from 'constants/routes';
@@ -11,7 +12,6 @@ import getStep from 'lib/getStep';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -146,7 +146,7 @@ function Trace({
 	);
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<Search />
 			<Container>
 				<div>
@@ -169,7 +169,7 @@ function Trace({
 					</Card>
 				</RightContainer>
 			</Container>
-		</ErrorBoundary>
+		</Sentry.ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx
index 6c4057332f..30dc747345 100644
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -1,6 +1,7 @@
 import './TracesExplorer.styles.scss';
 
 import { FilterOutlined } from '@ant-design/icons';
+import * as Sentry from '@sentry/react';
 import { Button, Card, Tabs, Tooltip } from 'antd';
 import axios from 'axios';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
@@ -21,7 +22,6 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { DataSource } from 'types/common/queryBuilder';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
@@ -185,7 +185,7 @@ function TracesExplorer(): JSX.Element {
 	const [isOpen, setOpen] = useState<boolean>(true);
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="trace-explorer-page">
 				<Card className="filter" hidden={!isOpen}>
 					<Filter setOpen={setOpen} />
@@ -236,7 +236,7 @@ function TracesExplorer(): JSX.Element {
 					/>
 				</Card>
 			</div>
-		</ErrorBoundary>
+		</Sentry.ErrorBoundary>
 	);
 }