fix(sentry): add Sentry.ErrorBoundary

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@reactour/tour": "^3.3.0",
+    "@sentry/react": "^7.50.0",
     "@stripe/react-stripe-js": "^1.4.0",
     "@stripe/stripe-js": "^1.13.2",
     "babel-polyfill": "^6.26.0",

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<Props, State> {
-  // 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 && <Error />}
-        {children}
-      </>
-    )
-  }
-}
+export const ErrorBoundary = ({ children }: Props) => (
+  <Sentry.ErrorBoundary fallback={(
+    <>
+      {children}
+      <Error />
+    </>
+  )}
+  >
+    { children }
+  </Sentry.ErrorBoundary>
+)
 
-export default ErrorBoundary

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'

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.data)
+  }
+
   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)
 }

src/index.tsx

@@ -5,11 +5,23 @@ import {
 } from 'react'
 import ReactDOM from 'react-dom'
 
+import * as Sentry from '@sentry/react'
+import { BrowserTracing } from '@sentry/react'
+
 import { isIOS } from 'config/userAgent'
 // 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: process.env.REACT_APP_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'))