Format and reveal billing load errors

Author: NessieCanCode

src/slurmcostmanager.css

@@ -79,6 +79,14 @@ nav button:hover {
   color: red;
 }
 
+.error-details {
+  border: 1px solid #ccc;
+  background: #fdd;
+  padding: 0.5em;
+  white-space: pre-wrap;
+  margin-top: 0.5em;
+}
+
 .clickable {
   cursor: pointer;
 }

src/slurmcostmanager.js

@@ -51,7 +51,7 @@ function useBillingData() {
       setError(null);
     } catch (e) {
       console.error(e);
-      setError(e);
+      setError(e.message || String(e));
     }
   }, []);
 
@@ -1050,6 +1050,7 @@ function Rates({ onRatesUpdated }) {
 function App() {
   const [view, setView] = useState('summary');
   const { data, error, reload } = useBillingData();
+  const [showErrorDetails, setShowErrorDetails] = useState(false);
 
   return React.createElement(
     'div',
@@ -1074,7 +1075,30 @@ function App() {
       )
     ),
     view !== 'settings' && !data && !error && React.createElement('p', null, 'Loading...'),
-    view !== 'settings' && error && React.createElement('p', { className: 'error' }, 'Failed to load data'),
+    view !== 'settings' &&
+      error &&
+      React.createElement(
+        'div',
+        { className: 'error' },
+        React.createElement(
+          'p',
+          null,
+          'Failed to load data ',
+          React.createElement(
+            'a',
+            {
+              href: '#',
+              onClick: e => {
+                e.preventDefault();
+                setShowErrorDetails(v => !v);
+              }
+            },
+            '(Click here to Learn More)'
+          )
+        ),
+        showErrorDetails &&
+          React.createElement('pre', { className: 'error-details' }, error)
+      ),
     data &&
       view === 'summary' &&
       React.createElement(Summary, {