fix: error boundary adding return-to-app and force-quit options (#2131)

* fix: error boundary adding return-to-app and force-quit options

* fix: method context

* fix: method context

* chore: increased print width to 200 in prettier

* chore: reverted the prettier printWidth increase

* feat: remove box-shadow from error boundary message layout

---------

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>

packages/bruno-app/src/pages/ErrorBoundary/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Bruno from 'components/Bruno/index';
+
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -14,29 +16,61 @@ class ErrorBoundary extends React.Component {
   }
   componentDidCatch(error, errorInfo) {
     console.log({ error, errorInfo });
+    this.setState({ hasError: true, error, errorInfo });
   }
+
+  returnToApp() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('open-file');
+
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  }
+
+  forceQuit() {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('main:force-quit');
+  }
+
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex items-center justify-center p-10">
+        <div className="flex text-center justify-center p-20 h-full">
-          <div className="bg-white rounded-lg shadow-lg p-4 w-full">
+          <div className="bg-white rounded-lg p-10 w-full">
+            <div className="m-auto" style={{ width: '256px' }}>
+              <Bruno width={256} />
+            </div>
+
             <h1 className="text-2xl font-semibold text-red-600 mb-2">Oops! Something went wrong</h1>
-            <p className="text-red-600 mb-2">{this.state.error && this.state.error.toString()}</p>
+            <p className="text-red-500 mb-2">
-            {this.state.error && this.state.error.stack && (
+              If you are using an official production build: the above error is most likely a bug!
-              <pre className="bg-gray-100 p-2 rounded-lg overflow-auto">{this.state.error.stack}</pre>
+              <br />
-            )}
+              Please report this under:
+              <a
+                className="text-link hover:underline cursor-pointer ml-2"
+                href="https://github.com/usebruno/bruno/issues"
+                target="_blank"
+              >
+                https://github.com/usebruno/bruno/issues
+              </a>
+            </p>
+
             <button
               className="bg-red-500 text-white px-4 py-2 mt-4 rounded hover:bg-red-600 transition"
-              onClick={() => {
+              onClick={() => this.returnToApp()}
-                this.setState({ hasError: false, error: null });
-              }}
             >
-              Close
+              Return to App
             </button>
+
+            <div className="text-red-500 mt-3">
+              <a href="" className="hover:underline cursor-pointer" onClick={this.forceQuit}>
+                Force Quit
+              </a>
+            </div>
           </div>
         </div>
       );
     }
+
     return this.props.children;
   }
 }

packages/bruno-electron/src/ipc/collection.js

@@ -628,6 +628,10 @@ const registerMainEventHandlers = (mainWindow, watcher, lastOpenedCollections) =
   ipcMain.handle('main:complete-quit-flow', () => {
     mainWindow.destroy();
   });
+
+  ipcMain.handle('main:force-quit', () => {
+    process.exit();
+  });
 };
 
 const registerCollectionsIpc = (mainWindow, watcher, lastOpenedCollections) => {