GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-01 22:10:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update the error boundary components with sentry error boundary components (#5271)

Browse Source 
* fix: update the error boundary components with sentry error boundary components

* fix: update fallback components
This commit is contained in:
Vikrant Gupta 2024-06-18 19:04:06 +05:30 committed by GitHub
parent 45d6430ab3
commit 9a6db272c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Uplot/Uplot.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable sonarjs/cognitive-complexity */ /* eslint-disable sonarjs/cognitive-complexity */
import './Uplot.styles.scss'; import './Uplot.styles.scss';
import * as Sentry from '@sentry/react';
import { Typography } from 'antd'; import { Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types'; import { ToggleGraphProps } from 'components/Graph/types';
import { LineChart } from 'lucide-react'; import { LineChart } from 'lucide-react';
@ -13,7 +14,6 @@ import {
useImperativeHandle, useImperativeHandle,
useRef, useRef,
} from 'react'; } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import UPlot from 'uplot'; import UPlot from 'uplot';
import { dataMatch, optionsUpdateState } from './utils'; import { dataMatch, optionsUpdateState } from './utils';
@ -139,7 +139,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
} }
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<div className="uplot-graph-container" ref={targetRef}> <div className="uplot-graph-container" ref={targetRef}>
{data && data[0] && data[0]?.length === 0 ? ( {data && data[0] && data[0]?.length === 0 ? (
<div className="not-found"> <div className="not-found">
@ -147,7 +147,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
</div> </div>
) : null} ) : null}
</div> </div>
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
}, },
); );

6
frontend/src/container/AppLayout/index.tsx
View File

@ -3,6 +3,7 @@
/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/anchor-is-valid */
import './AppLayout.styles.scss'; import './AppLayout.styles.scss';
import * as Sentry from '@sentry/react';
import { Flex } from 'antd'; import { Flex } from 'antd';
import getLocalStorageKey from 'api/browser/localstorage/get'; import getLocalStorageKey from 'api/browser/localstorage/get';
import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs'; import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs';
@ -27,7 +28,6 @@ import {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Helmet } from 'react-helmet-async'; import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQueries } from 'react-query'; import { useQueries } from 'react-query';
@ -342,7 +342,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
/> />
)} )}
<div className={cx('app-content', collapsed ? 'collapsed' : '')}> <div className={cx('app-content', collapsed ? 'collapsed' : '')}>
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<LayoutContent> <LayoutContent>
<ChildrenContainer <ChildrenContainer
style={{ style={{
@ -360,7 +360,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
{children} {children}
</ChildrenContainer> </ChildrenContainer>
</LayoutContent> </LayoutContent>
</ErrorBoundary> </Sentry.ErrorBoundary>
</div> </div>
</Flex> </Flex>
</Layout> </Layout>

6
frontend/src/container/ServiceApplication/index.tsx
View File

@ -1,7 +1,7 @@
import * as Sentry from '@sentry/react';
import { FeatureKeys } from 'constants/features'; import { FeatureKeys } from 'constants/features';
import useFeatureFlag from 'hooks/useFeatureFlag'; import useFeatureFlag from 'hooks/useFeatureFlag';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { ErrorBoundary } from 'react-error-boundary';
import ServiceMetrics from './ServiceMetrics'; import ServiceMetrics from './ServiceMetrics';
import ServiceTraces from './ServiceTraces'; import ServiceTraces from './ServiceTraces';
@ -12,11 +12,11 @@ function Services(): JSX.Element {
?.active; ?.active;
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<Container style={{ marginTop: 0 }}> <Container style={{ marginTop: 0 }}>
{isSpanMetricEnabled ? <ServiceMetrics /> : <ServiceTraces />} {isSpanMetricEnabled ? <ServiceMetrics /> : <ServiceTraces />}
</Container> </Container>
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
} }

5
frontend/src/index.tsx
View File

@ -7,7 +7,6 @@ import { AxiosError } from 'axios';
import { ThemeProvider } from 'hooks/useDarkMode'; import { ThemeProvider } from 'hooks/useDarkMode';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import { HelmetProvider } from 'react-helmet-async'; import { HelmetProvider } from 'react-helmet-async';
import { QueryClient, QueryClientProvider } from 'react-query'; import { QueryClient, QueryClientProvider } from 'react-query';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
@ -58,7 +57,7 @@ if (container) {
const root = createRoot(container); const root = createRoot(container);
root.render( root.render(
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<HelmetProvider> <HelmetProvider>
<ThemeProvider> <ThemeProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
@ -68,6 +67,6 @@ if (container) {
</QueryClientProvider> </QueryClientProvider>
</ThemeProvider> </ThemeProvider>
</HelmetProvider> </HelmetProvider>
</ErrorBoundary>, </Sentry.ErrorBoundary>,
); );
} }

6
frontend/src/pages/LogsExplorer/index.tsx
View File

@ -1,5 +1,6 @@
import './LogsExplorer.styles.scss'; import './LogsExplorer.styles.scss';
import * as Sentry from '@sentry/react';
import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
import LogExplorerQuerySection from 'container/LogExplorerQuerySection'; import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
import LogsExplorerViews from 'container/LogsExplorerViews'; import LogsExplorerViews from 'container/LogsExplorerViews';
@ -9,7 +10,6 @@ import Toolbar from 'container/Toolbar/Toolbar';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
import { WrapperStyled } from './styles'; import { WrapperStyled } from './styles';
@ -70,7 +70,7 @@ function LogsExplorer(): JSX.Element {
); );
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<Toolbar <Toolbar
showAutoRefresh={false} showAutoRefresh={false}
leftActions={ leftActions={
@ -101,7 +101,7 @@ function LogsExplorer(): JSX.Element {
</div> </div>
</div> </div>
</WrapperStyled> </WrapperStyled>
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
} }

6
frontend/src/pages/Pipelines/index.tsx
View File

@ -1,5 +1,6 @@
import './Pipelines.styles.scss'; import './Pipelines.styles.scss';
import * as Sentry from '@sentry/react';
import type { TabsProps } from 'antd'; import type { TabsProps } from 'antd';
import { Tabs } from 'antd'; import { Tabs } from 'antd';
import getPipeline from 'api/pipeline/get'; import getPipeline from 'api/pipeline/get';
@ -9,7 +10,6 @@ import PipelinePage from 'container/PipelinePage/Layouts/Pipeline';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { useEffect, useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { SuccessResponse } from 'types/api'; import { SuccessResponse } from 'types/api';
@ -82,13 +82,13 @@ function Pipelines(): JSX.Element {
} }
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<Tabs <Tabs
className="pipeline-tabs" className="pipeline-tabs"
defaultActiveKey="pipelines" defaultActiveKey="pipelines"
items={tabItems} items={tabItems}
/> />
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
} }

6
frontend/src/pages/Trace/index.tsx
View File

@ -1,3 +1,4 @@
import * as Sentry from '@sentry/react';
import { Card } from 'antd'; import { Card } from 'antd';
import { NotificationInstance } from 'antd/es/notification/interface'; import { NotificationInstance } from 'antd/es/notification/interface';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
@ -11,7 +12,6 @@ import getStep from 'lib/getStep';
import history from 'lib/history'; import history from 'lib/history';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { MouseEventHandler, useCallback, useEffect, useState } from 'react'; import { MouseEventHandler, useCallback, useEffect, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { connect, useDispatch, useSelector } from 'react-redux'; import { connect, useDispatch, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux'; import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk'; import { ThunkDispatch } from 'redux-thunk';
@ -146,7 +146,7 @@ function Trace({
); );
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<Search /> <Search />
<Container> <Container>
<div> <div>
@ -169,7 +169,7 @@ function Trace({
</Card> </Card>
</RightContainer> </RightContainer>
</Container> </Container>
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
} }

6
frontend/src/pages/TracesExplorer/index.tsx
View File

@ -1,6 +1,7 @@
import './TracesExplorer.styles.scss'; import './TracesExplorer.styles.scss';
import { FilterOutlined } from '@ant-design/icons'; import { FilterOutlined } from '@ant-design/icons';
import * as Sentry from '@sentry/react';
import { Button, Card, Tabs, Tooltip } from 'antd'; import { Button, Card, Tabs, Tooltip } from 'antd';
import axios from 'axios'; import axios from 'axios';
import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
@ -21,7 +22,6 @@ import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history'; import history from 'lib/history';
import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback'; import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Dashboard } from 'types/api/dashboard/getAll'; import { Dashboard } from 'types/api/dashboard/getAll';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink'; import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
@ -185,7 +185,7 @@ function TracesExplorer(): JSX.Element {
const [isOpen, setOpen] = useState<boolean>(true); const [isOpen, setOpen] = useState<boolean>(true);
return ( return (
<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}> <Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
<div className="trace-explorer-page"> <div className="trace-explorer-page">
<Card className="filter" hidden={!isOpen}> <Card className="filter" hidden={!isOpen}>
<Filter setOpen={setOpen} /> <Filter setOpen={setOpen} />
@ -236,7 +236,7 @@ function TracesExplorer(): JSX.Element {
/> />
</Card> </Card>
</div> </div>
</ErrorBoundary> </Sentry.ErrorBoundary>
); );
} }