From 0c74dae4e88916cf54c3c0500b37203b865e48a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Uhl=C3=AD=C5=99?= <adam@uhlir.dev>
Date: Fri, 9 Sep 2022 04:07:40 -0700
Subject: [PATCH] feat: error reporting callback (#530)

---
 src/App.tsx                      | 12 ++++++++++--
 src/components/ErrorBoundary.tsx |  9 ++++++++-
 src/layout/Dashboard.tsx         |  3 ++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 902ebf3..7cae2d0 100644
--- a/src/App.tsx
+++ b/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>
                             </>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index f0c82de..6dc2179 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/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
   }
 
diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx
index d8f53f6..1326de6 100644
--- a/src/layout/Dashboard.tsx
+++ b/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>
   )