woggioni-opencode-agent/bee-dashboard
1
0
Fork 0
Code Actions Packages Releases Activity

fix: remove sentry (#520)

Browse Source
This commit is contained in:
Adam Uhlíř
2022-08-08 18:19:38 +02:00
committed by GitHub
parent e986d7ca22
commit 0260df61de
10 changed files with 9 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
-21
View File
@@ -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
}
src/components/ErrorBoundary.tsx
+2 -2
View File
@@ -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
src/components/Feedback.tsx
-95
View File
@@ -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 <></>
}
src/components/SideBar.tsx
-2
View File
@@ -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>
src/config.ts
-4
View File
@@ -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 =
src/layout/Dashboard.tsx
+4 -19
View File
@@ -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>
)
}
src/layout/ItsBroken.tsx
-36
View File
@@ -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
src/utils/sentry.ts
-46
View File
@@ -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
},
})
}