Dev mode ErrorCard

The `ErrorCard` solved the situation of user-unfriendly error messages, but hid useful information for quickly debugging from QA and customers without having to deal with logs.

Expose a way to show the error if dev mode is enabled as a compromise.

Author: Jon-edge

src/components/cards/ErrorCard.tsx

@@ -2,7 +2,11 @@ import * as React from 'react'
 
 import { useHandler } from '../../hooks/useHandler'
 import { lstrings } from '../../locales/strings'
+import { useSelector } from '../../types/reactRedux'
+import { normalizeError } from '../../util/normalizeError'
 import { trackError } from '../../util/tracking'
+import { RawTextModal } from '../modals/RawTextModal'
+import { Airship } from '../services/AirshipInstance'
 import { AlertCardUi4 } from './AlertCard'
 
 /**
@@ -29,6 +33,7 @@ interface Props {
 export const ErrorCard: React.FC<Props> = props => {
   const { error } = props
 
+  const isDevMode = useSelector(state => state.ui.settings.developerModeOn)
   const [reportSent, setReportSent] = React.useState(false)
 
   const handleReportError = useHandler((): void => {
@@ -47,19 +52,34 @@ export const ErrorCard: React.FC<Props> = props => {
     )
   }
 
+  const buttonProps =
+    isDevMode || __DEV__
+      ? {
+          label: 'Show Error',
+          onPress: async () => {
+            await Airship.show(bridge => (
+              <RawTextModal
+                bridge={bridge}
+                body={normalizeError(error).toString()}
+              />
+            ))
+          }
+        }
+      : {
+          label: reportSent
+            ? lstrings.string_report_sent
+            : lstrings.string_report_error,
+          disabled: reportSent,
+          onPress: handleReportError
+        }
+
   // Unhappy path
   return (
     <AlertCardUi4
       type="error"
       title={lstrings.error_unexpected_title}
       body={lstrings.error_generic_message}
-      button={{
-        label: reportSent
-          ? lstrings.string_report_sent
-          : lstrings.string_report_error,
-        disabled: reportSent,
-        onPress: handleReportError
-      }}
+      button={buttonProps}
     />
   )
 }