From 37da23ab1cbdd6b6cc571f2066429a0fda3bb895 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Fri, 10 Sep 2021 09:56:04 +0100
Subject: [PATCH] set up global error handling

---
 tauri-wallet/package.json             |  1 +
 tauri-wallet/src/components/Error.tsx | 20 ++++++++++++++++++++
 tauri-wallet/src/components/index.ts  |  7 ++++++-
 tauri-wallet/src/index.tsx            | 14 +++++++++-----
 tauri-wallet/yarn.lock                | 11 +++++++++--
 5 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 tauri-wallet/src/components/Error.tsx

diff --git a/tauri-wallet/package.json b/tauri-wallet/package.json
index 2615106295..5aef0939f3 100644
--- a/tauri-wallet/package.json
+++ b/tauri-wallet/package.json
@@ -20,6 +20,7 @@
     "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.14.2",
     "react-router-dom": "^5.2.0",
     "semver": "^6.3.0",
diff --git a/tauri-wallet/src/components/Error.tsx b/tauri-wallet/src/components/Error.tsx
new file mode 100644
index 0000000000..0537674d8b
--- /dev/null
+++ b/tauri-wallet/src/components/Error.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { FallbackProps } from 'react-error-boundary'
+import { Alert, AlertTitle } from '@material-ui/lab'
+import { Button } from '@material-ui/core'
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  return (
+    <div>
+      <Alert severity="error">
+        <AlertTitle>{error.name}</AlertTitle>
+        {error.message}
+      </Alert>
+      <Alert severity="error">
+        <AlertTitle>Stack trace</AlertTitle>
+        {error.stack}
+      </Alert>
+      <Button onClick={resetErrorBoundary}>Back to safety</Button>
+    </div>
+  )
+}
diff --git a/tauri-wallet/src/components/index.ts b/tauri-wallet/src/components/index.ts
index f7269a253e..dbdc9e5889 100644
--- a/tauri-wallet/src/components/index.ts
+++ b/tauri-wallet/src/components/index.ts
@@ -1,4 +1,9 @@
-export * from './NymCard'
+export * from './Error'
+export * from './Confirmation'
 export * from './CopyToClipboard'
+export * from './NymCard'
 export * from './Nav'
 export * from './NavigationCards'
+export * from './NodeTypeSelector'
+export * from './RequestStatus'
+export * from './NoClientError'
diff --git a/tauri-wallet/src/index.tsx b/tauri-wallet/src/index.tsx
index cf2589b282..818b106057 100644
--- a/tauri-wallet/src/index.tsx
+++ b/tauri-wallet/src/index.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import ReactDOM from 'react-dom'
+import { ErrorBoundary } from 'react-error-boundary'
 import { CssBaseline, ThemeProvider } from '@material-ui/core'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { Routes } from './routes'
@@ -7,6 +8,7 @@ import { theme } from './theme'
 import { ClientContext, ClientContextProvider } from './context/main'
 import { ApplicationLayout } from './layouts'
 import { SignIn } from './routes/sign-in'
+import { ErrorFallback } from './components'
 
 const AppWrapper = () => {
   const { clientDetails } = useContext(ClientContext)
@@ -26,11 +28,13 @@ const AppWrapper = () => {
 
 const App = () => {
   return (
-    <Router>
-      <ClientContextProvider>
-        <AppWrapper />
-      </ClientContextProvider>
-    </Router>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Router>
+        <ClientContextProvider>
+          <AppWrapper />
+        </ClientContextProvider>
+      </Router>
+    </ErrorBoundary>
   )
 }
 
diff --git a/tauri-wallet/yarn.lock b/tauri-wallet/yarn.lock
index a8320d3fe3..3b18977a49 100644
--- a/tauri-wallet/yarn.lock
+++ b/tauri-wallet/yarn.lock
@@ -906,7 +906,7 @@
     "@babel/helper-validator-option" "^7.14.5"
     "@babel/plugin-transform-typescript" "^7.15.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.5", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   "integrity" "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA=="
   "resolved" "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz"
   "version" "7.15.3"
@@ -6231,6 +6231,13 @@
     "object-assign" "^4.1.1"
     "scheduler" "^0.20.2"
 
+"react-error-boundary@^3.1.3":
+  "integrity" "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA=="
+  "resolved" "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz"
+  "version" "3.1.3"
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "react-hook-form@^7.0.0", "react-hook-form@^7.14.2":
   "integrity" "sha512-32uvgKkaE/0vOncfnJdwQhfahhocPpcb5c7F4j9Eq7dOnqS2Hg8h70Bmt6KXb6veLSWJultc1+ik9QSfqXFmLA=="
   "resolved" "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.14.2.tgz"
@@ -6280,7 +6287,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.8.0 || ^17", "react@^16.8.0 || ^17.0.0", "react@^17.0.2", "react@>=15", "react@>=16.6.0", "react@17.0.2":
+"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.8.0 || ^17", "react@^16.8.0 || ^17.0.0", "react@^17.0.2", "react@>=15", "react@>=16.13.1", "react@>=16.6.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz"
   "version" "17.0.2"