feat: error reporting callback (#530)

src/App.tsx

@@ -22,9 +22,17 @@ interface Props {
   lockedApiSettings?: boolean
   isDesktop?: boolean
   desktopUrl?: string
+  errorReporting?: (err: Error) => void
 }
 
-const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isDesktop, desktopUrl }: Props): ReactElement => {
+const App = ({
+  beeApiUrl,
+  beeDebugApiUrl,
+  lockedApiSettings,
+  isDesktop,
+  desktopUrl,
+  errorReporting,
+}: Props): ReactElement => {
   const mainApp = (
     <div className="App">
       <ThemeProvider theme={theme}>
@@ -46,7 +54,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isDesktop, desktopU
                           <Router>
                             <>
                               <CssBaseline />
-                              <Dashboard>
+                              <Dashboard errorReporting={errorReporting}>
                                 <BaseRouter />
                               </Dashboard>
                             </>

src/components/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import { Component, ErrorInfo, ReactElement } from 'react'
 
 interface Props {
   children: ReactElement
+  errorReporting?: (err: Error) => void
 }
 
 interface State {
@@ -9,8 +10,11 @@ interface State {
 }
 
 export default class ErrorBoundary extends Component<Props, State> {
+  private errorReporting?: (err: Error) => void
+
   constructor(props: Props) {
     super(props)
+    this.errorReporting = props.errorReporting
     this.state = { error: null }
   }
 
@@ -20,7 +24,10 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // You can also log the error to an error reporting service
+    if (this.errorReporting) {
+      this.errorReporting(error)
+    }
+
     console.error({ error, errorInfo }) // eslint-disable-line
   }
 

src/layout/Dashboard.tsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface Props {
   children?: ReactElement
+  errorReporting?: (err: Error) => void
 }
 
 const Dashboard = (props: Props): ReactElement => {
@@ -119,7 +120,7 @@ const Dashboard = (props: Props): ReactElement => {
       <SideBar />
       <Container className={classes.content}>
         {' '}
-        <ErrorBoundary>{content}</ErrorBoundary>
+        <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
       </Container>
     </div>
   )