diff --git a/package.json b/package.json index 8e59a5b2..c023ddac 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@reactour/tour": "^3.3.0", + "@sentry/react": "^7.53.1", "@stripe/react-stripe-js": "^1.4.0", "@stripe/stripe-js": "^1.13.2", "babel-polyfill": "^6.26.0", diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx index b3a27e45..4f3ad182 100644 --- a/src/components/ErrorBoundary/index.tsx +++ b/src/components/ErrorBoundary/index.tsx @@ -1,8 +1,8 @@ -// eslint-disable react/destructuring-assignment +import React from 'react' -import { Component } from 'react' +import type{ ReactNode } from 'react' -import type{ ErrorInfo, ReactNode } from 'react' +import * as Sentry from '@sentry/react' import { Error } from '../Error' @@ -10,41 +10,15 @@ interface Props { children?: ReactNode, } -interface State { - hasError: boolean, -} - -class ErrorBoundary extends Component { - // eslint-disable-next-line react/state-in-constructor - public state: State = { - hasError: false, - } - - public static getDerivedStateFromError(_: Error): State { - // Update state so the next render will show the fallback UI. - return { hasError: true } - } - - public componentDidCatch(error: Error, errorInfo: ErrorInfo) { - // eslint-disable-next-line no-console - console.error( - 'Uncaught error:', - error, - errorInfo, - ) - } - - public render() { - const { hasError } = this.state - const { children } = this.props - - return ( - <> - {hasError && } - {children} - - ) - } -} +export const ErrorBoundary = ({ children }: Props) => ( + + {children} + + + )} + > + { children } + +) -export default ErrorBoundary diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx index af66da71..d65ffd0a 100644 --- a/src/features/App/index.tsx +++ b/src/features/App/index.tsx @@ -23,7 +23,7 @@ import { GlobalStyles } from 'features/GlobalStyles' import { Theme } from 'features/Theme' import { UnavailableText } from 'components/UnavailableText' -import ErrorBoundary from 'components/ErrorBoundary' +import { ErrorBoundary } from 'components/ErrorBoundary' import { AuthenticatedApp } from './AuthenticatedApp' import { useAuthStore } from '../AuthStore' diff --git a/src/helpers/callApi/logoutIfUnauthorized.tsx b/src/helpers/callApi/logoutIfUnauthorized.tsx index 18e71881..d9958362 100644 --- a/src/helpers/callApi/logoutIfUnauthorized.tsx +++ b/src/helpers/callApi/logoutIfUnauthorized.tsx @@ -1,5 +1,13 @@ +import * as Sentry from '@sentry/react' + export const logoutIfUnauthorized = async (response: Response) => { /* отключили из-за доступа без авторизации */ + const body = await response.json() + + if (response.status === 400) { + Sentry.captureException(body) + } + if (response.status === 401 || response.status === 403) { window.dispatchEvent(new Event('FORBIDDEN_REQUEST')) } @@ -8,6 +16,5 @@ export const logoutIfUnauthorized = async (response: Response) => { // eslint-disable-next-line no-console console.error(error) - const body = await response.json() return Promise.reject(body) } diff --git a/src/index.tsx b/src/index.tsx index 81041121..8622573d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,11 +5,24 @@ import { } from 'react' import ReactDOM from 'react-dom' -import { isIOS } from 'config/userAgent' +import * as Sentry from '@sentry/react' +import { BrowserTracing } from '@sentry/react' + +import { isIOS, ENV } from 'config' + // import { makeServer } from 'utilits/mirage/Mirage' import * as serviceWorker from './serviceWorker' +if (process.env.NODE_ENV !== 'development') { + Sentry.init({ + dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21', + environment: ENV, + integrations: [new BrowserTracing()], + tracesSampleRate: 1.0, + }) +} + export const App = process.env.REACT_APP_TYPE === 'auth-service' ? lazy(() => import('features/AuthServiceApp')) : lazy(() => import('features/App'))