fix: remove sentry (#520)

2022-08-08 18:19:38 +02:00
parent e986d7ca22
commit 0260df61de
10 changed files with 9 additions and 394 deletions
@@ -15,8 +15,6 @@
        "@material-ui/core": "4.12.3",
        "@material-ui/icons": "4.11.2",
        "@material-ui/lab": "4.0.0-alpha.57",
-        "@sentry/react": "^7.1.1",
-        "@sentry/tracing": "^7.1.1",
        "assert": "^2.0.0",
        "axios": "0.24.0",
        "bignumber.js": "9.0.1",
@@ -65,9 +63,9 @@
        "@types/file-saver": "2.0.4",
        "@types/jest": "27.0.2",
        "@types/qrcode.react": "1.0.2",
-        "@types/react": ">=17.0.0 || >=18.0.0",
+        "@types/react": "17.0.34",
        "@types/react-copy-to-clipboard": "5.0.2",
-        "@types/react-dom": ">=17.0.0 || >=18.0.0",
+        "@types/react-dom": "17.0.11",
        "@types/react-router": "5.1.18",
        "@types/react-router-dom": "5.3.2",
        "@types/react-syntax-highlighter": "13.5.2",
@@ -4183,99 +4181,6 @@
      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
      "dev": true
    },
-    "node_modules/@sentry/browser": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.1.1.tgz",
-      "integrity": "sha512-5AQvStZ+nOP/yxsBmeMZpeGLVtuOgnCNvswKd/c1CJwNw7bDmCE4TQeNKp1C3Gb7lSdBk8ViwUKn0ZpoVQ5MTw==",
-      "dependencies": {
-        "@sentry/core": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/core": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.1.1.tgz",
-      "integrity": "sha512-SADdAoG5u1LTJhPN5KPtn5HHmH6r0mr6h2LokuZnhj6/okrAuCIIKOb6Fh8jV7j2VuABvew8+FjJHORxi7D/3Q==",
-      "dependencies": {
-        "@sentry/hub": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/hub": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-7.1.1.tgz",
-      "integrity": "sha512-ASsRVjYDIii6ZTf36JnIYKHWBQBk0P42Tgq324MpyPgaeVDg3saBcyXO5iAtWvY6Vmdi2H4JCVDoir2Zz3Me1w==",
-      "dependencies": {
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/react": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.1.1.tgz",
-      "integrity": "sha512-Z7cZvXHIWxg7OhOSy4InhrRgQPRNtHsyOkIAHkgwW32JYOGTg1HdqQ5mFUxQLejhU/YqsxVjTK4CI58FATykLw==",
-      "dependencies": {
-        "@sentry/browser": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": "15.x || 16.x || 17.x || 18.x"
-      }
-    },
-    "node_modules/@sentry/tracing": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.1.1.tgz",
-      "integrity": "sha512-MJ+EPGfvPlgbJOcZRoIl6+Oi0oRE2nIi/HP2BPJSKGxXFi2Y09bcZUwfxOH8fkUa465jOGBFdCm+sXcbyExvuw==",
-      "dependencies": {
-        "@sentry/hub": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/types": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.1.1.tgz",
-      "integrity": "sha512-5N1UMd2SqvUXprcIUMyDEju3H9lJY2oWfWQBGo0lG6Amn/lGAPAYlchg+4vQCLutDQMyd8K9zPwcbKn4u6gHdw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@sentry/utils": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.1.1.tgz",
-      "integrity": "sha512-DPRHDf3InfyVgmxToE4Z+AATAR4OVm+wsXDLFGGyncR91CE1x4wLQKOcAJJwX3F0Hz1VHENfmx1DvyYTHOrC/A==",
-      "dependencies": {
-        "@sentry/types": "7.1.1",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/@sinclair/typebox": {
      "version": "0.23.5",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.23.5.tgz",
@@ -23578,75 +23483,6 @@
      "integrity": "sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==",
      "dev": true
    },
-    "@sentry/browser": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.1.1.tgz",
-      "integrity": "sha512-5AQvStZ+nOP/yxsBmeMZpeGLVtuOgnCNvswKd/c1CJwNw7bDmCE4TQeNKp1C3Gb7lSdBk8ViwUKn0ZpoVQ5MTw==",
-      "requires": {
-        "@sentry/core": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@sentry/core": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.1.1.tgz",
-      "integrity": "sha512-SADdAoG5u1LTJhPN5KPtn5HHmH6r0mr6h2LokuZnhj6/okrAuCIIKOb6Fh8jV7j2VuABvew8+FjJHORxi7D/3Q==",
-      "requires": {
-        "@sentry/hub": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@sentry/hub": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-7.1.1.tgz",
-      "integrity": "sha512-ASsRVjYDIii6ZTf36JnIYKHWBQBk0P42Tgq324MpyPgaeVDg3saBcyXO5iAtWvY6Vmdi2H4JCVDoir2Zz3Me1w==",
-      "requires": {
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@sentry/react": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-7.1.1.tgz",
-      "integrity": "sha512-Z7cZvXHIWxg7OhOSy4InhrRgQPRNtHsyOkIAHkgwW32JYOGTg1HdqQ5mFUxQLejhU/YqsxVjTK4CI58FATykLw==",
-      "requires": {
-        "@sentry/browser": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "hoist-non-react-statics": "^3.3.2",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@sentry/tracing": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-7.1.1.tgz",
-      "integrity": "sha512-MJ+EPGfvPlgbJOcZRoIl6+Oi0oRE2nIi/HP2BPJSKGxXFi2Y09bcZUwfxOH8fkUa465jOGBFdCm+sXcbyExvuw==",
-      "requires": {
-        "@sentry/hub": "7.1.1",
-        "@sentry/types": "7.1.1",
-        "@sentry/utils": "7.1.1",
-        "tslib": "^1.9.3"
-      }
-    },
-    "@sentry/types": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.1.1.tgz",
-      "integrity": "sha512-5N1UMd2SqvUXprcIUMyDEju3H9lJY2oWfWQBGo0lG6Amn/lGAPAYlchg+4vQCLutDQMyd8K9zPwcbKn4u6gHdw=="
-    },
-    "@sentry/utils": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.1.1.tgz",
-      "integrity": "sha512-DPRHDf3InfyVgmxToE4Z+AATAR4OVm+wsXDLFGGyncR91CE1x4wLQKOcAJJwX3F0Hz1VHENfmx1DvyYTHOrC/A==",
-      "requires": {
-        "@sentry/types": "7.1.1",
-        "tslib": "^1.9.3"
-      }
-    },
    "@sinclair/typebox": {
      "version": "0.23.5",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.23.5.tgz",
@@ -32,8 +32,6 @@
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
-    "@sentry/react": "^7.1.1",
-    "@sentry/tracing": "^7.1.1",
    "assert": "^2.0.0",
    "axios": "0.24.0",
    "bignumber.js": "9.0.1",
@@ -162,4 +160,4 @@
    "npm": ">=6.9.0",
    "bee": ">=0.6.0"
  }
-}
+}
@@ -3,7 +3,6 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
 import React, { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
-import * as Sentry from '@sentry/react'
 import './App.css'
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
@@ -16,9 +15,6 @@ import { Provider as TopUpProvider } from './providers/TopUp'
 import { Provider as BalanceProvider } from './providers/WalletBalance'
 import BaseRouter from './routes'
 import { theme } from './theme'
-import { config } from './config'
-import ItsBroken from './layout/ItsBroken'
-import { initSentry } from './utils/sentry'

 interface Props {
  beeApiUrl?: string
@@ -27,11 +23,6 @@ interface Props {
  isBeeDesktop?: boolean
 }

-if (config.SENTRY_KEY) {
-  // eslint-disable-next-line no-console
-  initSentry().catch(e => console.error(e))
-}
-
 const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => {
  const mainApp = (
    <div className="App">
@@ -71,18 +62,6 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Pro
    </div>
  )

-  // Displays Report Dialog when some component crashes
-  if (config.SENTRY_KEY) {
-    return (
-      <Sentry.ErrorBoundary
-        showDialog
-        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
-      >
-        {mainApp}
-      </Sentry.ErrorBoundary>
-    )
-  }
-
  return mainApp
 }

@@ -1,5 +1,4 @@
 import { Component, ErrorInfo, ReactElement } from 'react'
-import ItsBroken from '../layout/ItsBroken'

 interface Props {
  children: ReactElement
@@ -27,7 +26,8 @@ export default class ErrorBoundary extends Component<Props, State> {

  render(): ReactElement {
    if (this.state.error) {
-      return <ItsBroken message={this.state.error.message} />
+      // You can render any custom fallback UI
+      return <h1>Something went wrong. Error: {this.state.error.message}</h1>
    }

    return this.props.children
@@ -1,95 +0,0 @@
-import { ReactElement, useEffect, useState } from 'react'
-import * as Sentry from '@sentry/react'
-import { Link } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import MessageSquare from 'remixicon-react/Message2LineIcon'
-
-import config from '../config'
-import SideBarItem from './SideBarItem'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    link: {
-      color: '#9f9f9f',
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'none',
-
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          textDecoration: 'none',
-        },
-      },
-    },
-
-    icon: {
-      height: theme.spacing(4),
-    },
-  }),
-)
-
-/**
- * Parses Sentry DNS so it could be transformed into API call
- * Sentry DNS like https://1asfasdf2312asdf3@o132123.ingest.sentry.io/13123123
- */
-const SENTRY_PARSING_REGEX = /^https:\/\/(?<key>\w+)@(?<sub>\w+)\.ingest\.sentry\.io\/(?<path>\d+)$/gm
-
-async function isSentryReachable(): Promise<boolean> {
-  const key = config.SENTRY_KEY
-
-  if (!key) {
-    return false
-  }
-
-  const match = SENTRY_PARSING_REGEX.exec(key)
-
-  if (!match) {
-    return false
-  }
-
-  const url = `https://${match.groups?.sub}.ingest.sentry.io/api/${match.groups?.path}/envelope/?sentry_key=${match.groups?.key}`
-
-  try {
-    await fetch(url, { method: 'POST' })
-
-    // Since we got some reply (even though most probably with some error) that means Sentry is reachable ==> lets provide the Feedback form
-    return true
-  } catch (e) {
-    // If an error was thrown than the request was blocked by the browser so Sentry is not accessible to us
-    return false
-  }
-}
-
-function showFeedbackForm(): void {
-  const eventId = Sentry.captureMessage('User feedback')
-  Sentry.showReportDialog({
-    eventId,
-    title: 'Provide us feedback!',
-    subtitle: 'Share with us what you like and/or dislike.',
-    subtitle2: 'We will be very happy.',
-    labelComments: 'What is your impression about this app?',
-    labelSubmit: 'Send Feedback',
-  })
-}
-
-export default function Feedback(): ReactElement {
-  const [sentryEnabled, setSentryEnabled] = useState(false)
-  const classes = useStyles()
-
-  // Run this only on component mount to verify once that Sentry is reachable
-  useEffect(() => {
-    isSentryReachable().then(result => {
-      setSentryEnabled(result)
-    })
-  }, [])
-
-  if (sentryEnabled) {
-    return (
-      <Link onClick={showFeedbackForm} className={classes.link}>
-        <SideBarItem iconStart={<MessageSquare className={classes.icon} />} label={<span>Send feedback</span>} />
-      </Link>
-    )
-  }
-
-  return <></>
-}
@@ -14,7 +14,6 @@ import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { config } from '../config'
 import { ROUTES } from '../routes'
-import Feedback from './Feedback'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 import { BeeModes } from '@ethersphere/bee-js'
@@ -133,7 +132,6 @@ export default function SideBar(): ReactElement {
            <Link to={ROUTES.STATUS} className={classes.link}>
              <SideBarStatus path={ROUTES.STATUS} />
            </Link>
-            <Feedback />
          </List>
        </Grid>
      </Grid>
@@ -7,14 +7,10 @@ class Config {
  public readonly GITHUB_REPO_URL: string
  public readonly BEE_DESKTOP_ENABLED: boolean
  public readonly BEE_DESKTOP_URL: string
-  public readonly SENTRY_KEY: string | undefined
-  public readonly SENTRY_ENVIRONMENT: string | undefined
  public readonly DEFAULT_RPC_URL: string

  constructor() {
    this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633'
-    this.SENTRY_KEY = process.env.REACT_APP_SENTRY_KEY
-    this.SENTRY_ENVIRONMENT = process.env.REACT_APP_SENTRY_ENVIRONMENT
    this.BEE_DEBUG_API_HOST =
      sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635'
    this.BLOCKCHAIN_EXPLORER_URL =
@@ -7,9 +7,6 @@ import ErrorBoundary from '../components/ErrorBoundary'
 import SideBar from '../components/SideBar'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
-import config from '../config'
-import * as Sentry from '@sentry/react'
-import ItsBroken from './ItsBroken'
 import { useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop'

@@ -117,25 +114,13 @@ const Dashboard = (props: Props): ReactElement => {
    </>
  )

-  let errorBoundaryWithContent
-
-  if (config.SENTRY_KEY) {
-    errorBoundaryWithContent = (
-      <Sentry.ErrorBoundary
-        showDialog
-        fallback={({ error, componentStack, resetError }) => <ItsBroken message={error.message} />}
-      >
-        {content}
-      </Sentry.ErrorBoundary>
-    )
-  } else {
-    errorBoundaryWithContent = <ErrorBoundary>{content}</ErrorBoundary>
-  }
-
  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
-      <Container className={classes.content}>{errorBoundaryWithContent}</Container>
+      <Container className={classes.content}>
+        {' '}
+        <ErrorBoundary>{content}</ErrorBoundary>
+      </Container>
    </div>
  )
 }
@@ -1,36 +0,0 @@
-import { Container } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ReactElement } from 'react'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    content: {
-      backgroundColor: theme.palette.background.default,
-      minHeight: '100vh',
-      textAlign: 'center',
-    },
-    errorMsg: {
-      marginTop: '30px',
-    },
-  }),
-)
-
-interface Props {
-  message: string
-}
-
-// TODO: Provide some nicer design
-const ItsBroken = ({ message }: Props): ReactElement => {
-  const classes = useStyles()
-
-  return (
-    <div>
-      <Container className={classes.content}>
-        <h1>Ups, there was a problem 😅</h1>
-        <h3 className={classes.errorMsg}>Error: {message}</h3>
-      </Container>
-    </div>
-  )
-}
-
-export default ItsBroken
@@ -1,46 +0,0 @@
-import { config } from '../config'
-import * as Sentry from '@sentry/react'
-import packageJson from '../../package.json'
-import { BrowserTracing } from '@sentry/tracing'
-import { getBeeDesktopLogs, getBeeLogs } from './desktop'
-
-export async function initSentry(): Promise<void> {
-  let tunnelAvailable
-
-  try {
-    const result = await fetch(`${config.BEE_DESKTOP_URL}/sentry`, { method: 'OPTIONS' })
-
-    if (result.status === 204) {
-      tunnelAvailable = true
-    }
-  } catch (e) {
-    // There was an error, so tunnel is not available
-    tunnelAvailable = false
-  }
-
-  Sentry.init({
-    dsn: config.SENTRY_KEY,
-    release: packageJson.version,
-    environment: config.SENTRY_ENVIRONMENT,
-    tunnel: tunnelAvailable ? `${config.BEE_DESKTOP_URL}/sentry` : undefined,
-    integrations: [new BrowserTracing({ tracingOrigins: [config.BEE_DESKTOP_URL] })],
-    tracesSampleRate: 0.4,
-    beforeSend: async (event, hint) => {
-      hint.attachments = []
-
-      try {
-        // This will fail if we are not running in Bee Desktop, but that is alright
-        hint.attachments.push({ filename: 'bee-desktop.log', data: await getBeeDesktopLogs() })
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-
-      try {
-        // This will fail if we are not running in Bee Desktop, but that is alright
-        hint.attachments.push({ filename: 'bee.log', data: await getBeeLogs() })
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-
-      return event
-    },
-  })
-}