GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-31 01:22:03 +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 */
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>
);
},
);

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

@ -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>

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 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>
);
}

5
frontend/src/index.tsx
View File

@ -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>,
);
}

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

@ -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>
);
}

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

@ -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>
);
}

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

@ -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>
);
}

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

@ -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>
);
}