diff --git a/package-lock.json b/package-lock.json index 7dbcd141..684cfd69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 06f9915f..b5cbad73 100644 --- a/package.json +++ b/package.json @@ -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" } -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index 5b224401..62726708 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 = (
@@ -71,18 +62,6 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Pro
) - // Displays Report Dialog when some component crashes - if (config.SENTRY_KEY) { - return ( - } - > - {mainApp} - - ) - } - return mainApp } diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index e7e74977..f0c82de3 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -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 { render(): ReactElement { if (this.state.error) { - return + // You can render any custom fallback UI + return

Something went wrong. Error: {this.state.error.message}

} return this.props.children diff --git a/src/components/Feedback.tsx b/src/components/Feedback.tsx deleted file mode 100644 index 1b03d2eb..00000000 --- a/src/components/Feedback.tsx +++ /dev/null @@ -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:\/\/(?\w+)@(?\w+)\.ingest\.sentry\.io\/(?\d+)$/gm - -async function isSentryReachable(): Promise { - 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 ( - - } label={Send feedback} /> - - ) - } - - return <> -} diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index be7d82fb..9f14d54d 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -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 { - diff --git a/src/config.ts b/src/config.ts index 9c7603d7..1d7c52ab 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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 = diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index 161be1e4..e6b67621 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -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 = ( - } - > - {content} - - ) - } else { - errorBoundaryWithContent = {content} - } - return (
- {errorBoundaryWithContent} + + {' '} + {content} +
) } diff --git a/src/layout/ItsBroken.tsx b/src/layout/ItsBroken.tsx deleted file mode 100644 index afff9507..00000000 --- a/src/layout/ItsBroken.tsx +++ /dev/null @@ -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 ( -
- -

Ups, there was a problem 😅

-

Error: {message}

- -
- ) -} - -export default ItsBroken diff --git a/src/utils/sentry.ts b/src/utils/sentry.ts deleted file mode 100644 index 5f5cf0ef..00000000 --- a/src/utils/sentry.ts +++ /dev/null @@ -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 { - 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 - }, - }) -}