Avoid scrape error message duplication on UI, adjust output

Author: Nikita

src/UI/ScrapeError.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { BreakingPre } from './BreakingPre'
+import * as errors from '../errors'
+
+function stripErrorCode (error) {
+  return error.message.replace(/^\[[A-Z]{3}] /, '')
+}
+
+function cleanStack (error) {
+  const messagePrefix = stripErrorCode(error) + '\n'
+
+  const stack = error.stack.replace(/^Error: /, '')
+  return stack.startsWith(messagePrefix) ? stack.slice(messagePrefix.length) : stack
+}
+
+const Warn = ({children}) => {
+  return <div>⚠️ {children}</div>
+}
+
+export const ScrapeError = ({ error }) => {
+  const logIsNotImportant = error.allowRetry || error.allow_retry
+  const forcePluginReinstall = error.fatal
+  const stack = cleanStack( error)
+
+  return (
+    <div>
+      <h3>Scrape Error</h3>
+      {error.name === 'Error' && <Warn>This error message will never be displayed on production UI; if you intend to show meaningful message to user, use one of constructors:
+        <ul>
+          {Object.keys(errors).map((key) => <li key={key}>{key}</li>)}
+        </ul>
+      </Warn>}
+      {logIsNotImportant && <Warn>logIsNotImportant = true: This error will be displayed on production UI without [Send log] button</Warn>}
+      {forcePluginReinstall && <Warn>forcePluginReinstall = true: User will be forced into preferences screen after this error</Warn>}
+      <BreakingPre>{error.message || 'error.message n/a'}</BreakingPre>
+      <BreakingPre>{stack}</BreakingPre>
+    </div>
+  )
+}

src/UI/index.jsx

@@ -1,15 +1,15 @@
-import _ from "lodash";
-import React from "react";
+import _ from 'lodash'
+import React from 'react'
+import { toDate } from '../common/dateUtils'
 import { toAtLeastTwoDigitsString } from '../common/stringUtils'
-import {prettyDeepDiff} from "../diff";
-import {Account} from "./Account";
-import {BreakingPre} from "./BreakingPre";
-import {Bubble} from "./Bubble";
-import {border, fontColor, zenmoneyGreenColor, zenmoneyRedColor} from "./designSystem";
-import {DayTransactions} from "./Transaction";
-import {toDate} from '../common/dateUtils'
+import { prettyDeepDiff } from '../diff'
+import { Account } from './Account'
+import { Bubble } from './Bubble'
+import { border, fontColor, zenmoneyGreenColor, zenmoneyRedColor } from './designSystem'
+import { ScrapeError } from './ScrapeError'
+import { DayTransactions } from './Transaction'
 
-const SidePane = ({children}) => <div style={{borderLeft: border, overflowY: "auto"}}>{children}</div>;
+const SidePane = ({ children }) => <div style={{borderLeft: border, overflowY: "auto"}}>{children}</div>;
 
 class AccountsPane extends React.PureComponent {
     render() {
@@ -143,9 +143,7 @@ export class UI extends React.PureComponent {
                         </React.Fragment>
                     )}
                     {scrapeState === ":scrape-state/success" && !scrapeResult.pluginDataChange && <div>pluginData: no changes</div>}
-                    {scrapeState === ":scrape-state/error" && <div>Scrape error:
-                        <BreakingPre>{scrapeError.message || "n/a"}</BreakingPre>
-                    </div>}
+                    {scrapeState === ":scrape-state/error" && <ScrapeError error={scrapeError} />}
                     {workflowState === ":workflow-state/complete" && <div><br />Cheers!</div>}
                 </SidePane>
                 {scrapeState === ":scrape-state/success" && (

src/common/adapters.js

@@ -26,7 +26,6 @@ import { ensureSyncIDsAreUniqueButSanitized, sanitizeSyncId, trimSyncId } from '
 import { toZenMoneyTransaction } from './converters'
 import { getMidnight, isValidDate, toISODateString } from './dateUtils'
 import { sanitize } from './sanitize'
-import { isDebug } from './utils'
 
 i18n.init({
   resources: _.fromPairs([
@@ -469,30 +468,6 @@ function getPresentationError (error, isFirstRun) {
   return meaningfulError
 }
 
-function augmentErrorWithDevelopmentHints (error) {
-  if (isDebug()) {
-    if (!(error instanceof ZPAPIError)) {
-      error.message += '\n(The message above will never be displayed on production UI; use specific ZPAPIError child class from errors.js if you want to show meaningful message to user)'
-    }
-    if (error.allowRetry || error.allow_retry) {
-      error.message += '\n(logIsNotImportant = true: the message above will be displayed on production UI without [Send log] button)'
-    }
-    if (error.fatal) {
-      error.message += '\n(forcePluginReinstall = true: user will be forced into preferences screen)'
-    }
-    if (!(error instanceof Error)) {
-      const err = new Error()
-      Object.assign(err, error)
-      err.message = error.message
-      err.stack = error.stack
-      err.fatal = error.fatal
-      err.allowRetry = error.allowRetry
-      error = err
-    }
-  }
-  return error
-}
-
 export function adaptScrapeToGlobalApi (scrape) {
   console.assert(typeof scrape === 'function', 'argument must be function')
 
@@ -519,10 +494,10 @@ export function adaptScrapeToGlobalApi (scrape) {
       value
     } = unsealSyncPromise(resultHandled)
     if (state === 'rejected') {
-      ZenMoney.setResult(augmentErrorWithDevelopmentHints(getPresentationError(value, isFirstRun)))
+      ZenMoney.setResult(getPresentationError(value, isFirstRun))
     } else if (state === 'pending') {
       resultHandled.catch((e) => {
-        ZenMoney.setResult(augmentErrorWithDevelopmentHints(getPresentationError(e, isFirstRun)))
+        ZenMoney.setResult(getPresentationError(e, isFirstRun))
       })
     }
   }

src/handleMessageFromWindow.js

@@ -1,4 +1,3 @@
-import { extractErrorDetails } from './utils'
 import { ZPAPI } from './ZPAPI'
 
 const messageHandlers = {
@@ -17,9 +16,7 @@ const messageHandlers = {
     } catch (error) {
       reply({
         type: ':events/scrape-error',
-        payload: {
-          message: extractErrorDetails(error)
-        }
+        payload: error
       })
     }
   },

src/utils.js

@@ -1,8 +1,3 @@
-export const extractErrorDetails = (error) => [
-  error.message,
-  error.stack && error.stack.replace('Error: ' + error.message + '\n', '')
-].filter(Boolean).join('\n')
-
 export const waitForOpenDevtools = () => new Promise(function fn (resolve) {
   const threshold = 200
   const eatenWidth = window.outerWidth - window.innerWidth