error detail for connection errors

packages/api/src/proc/connectProcess.js

@@ -2,6 +2,25 @@ const childProcessChecker = require('../utility/childProcessChecker');
 const requireEngineDriver = require('../utility/requireEngineDriver');
 const connectUtility = require('../utility/connectUtility');
 const { handleProcessCommunication } = require('../utility/processComm');
+const _ = require('lodash');
+
+function pickSafeConnectionInfo(connection) {
+  return _.mapValues(connection, (v, k) => {
+    if (k == 'engine' || k == 'port' || k == 'authType' || k == 'sshMode' || k == 'passwordMode') return v;
+    if (v === null || v === true || v === false) return v;
+    if (v) return '***';
+    return undefined;
+  });
+}
+
+const formatErrorDetail = (e, connection) => `${e.stack}
+
+Error JSON: ${JSON.stringify(e, undefined, 2)}
+
+Connection: ${JSON.stringify(pickSafeConnectionInfo(connection), undefined, 2)}
+
+Platform: ${process.platform}
+`;
 
 function start() {
   childProcessChecker();
@@ -14,7 +33,11 @@ function start() {
       process.send({ msgtype: 'connected', ...res });
     } catch (e) {
       console.error(e);
-      process.send({ msgtype: 'error', error: e.message });
+      process.send({
+        msgtype: 'error',
+        error: e.message,
+        detail: formatErrorDetail(e, connection),
+      });
     }
   });
 }

packages/web/src/modals/ConnectionModal.svelte

@@ -12,8 +12,10 @@
   import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
 
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal, closeModal } from './modalTools';
+  import { closeCurrentModal, closeModal, showModal } from './modalTools';
   import createRef from '../utility/createRef';
+  import Link from '../elements/Link.svelte';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
 
   export let connection;
 
@@ -92,6 +94,16 @@
           <div class="error-result">
             Connect failed: <FontIcon icon="img error" />
             {sqlConnectResult.error}
+            <Link
+              onClick={() =>
+                showModal(ErrorMessageModal, {
+                  message: sqlConnectResult.detail,
+                  showAsCode: true,
+                  title: 'Database connection error',
+                })}
+            >
+              Show detail
+            </Link>
           </div>
         {/if}
         {#if isTesting}

packages/web/src/modals/ErrorMessageModal.svelte

@@ -9,18 +9,25 @@
 
   export let title = 'Error';
   export let message;
+  export let showAsCode = false;
 </script>
 
 <FormProvider>
   <ModalBase {...$$restProps}>
     <div slot="header">{title}</div>
 
-    <div class="wrapper">
+    {#if showAsCode}
-      <div class="icon">
+      <pre>{message}</pre>
-        <FontIcon icon="img error" />
+    {:else}
+      <div class="wrapper">
+        <div class="icon">
+          <FontIcon icon="img error" />
+        </div>
+        <div>
+          {message}
+        </div>
       </div>
-      {message}
+    {/if}
-    </div>
 
     <div slot="footer">
       <FormSubmit value="Close" on:click={closeCurrentModal} />
@@ -38,4 +45,9 @@
     margin-right: 10px;
     font-size: 20pt;
   }
+
+  pre {
+    max-height: calc(100vh - 300px);
+    overflow-y: auto;
+  }
 </style>