chore(/payment): better error reporting (#1766)

Author: Kikobeats

src/components/pages/payment/constants.js

@@ -5,9 +5,3 @@ export const PAYMENT_STATE = {
   success: 'success',
   failed: 'failed'
 }
-
-export const ERROR_MAIL_OPTS = {
-  subject: 'Payment process error',
-  body:
-    'Hello,\n\nSomething bad happens trying to pay at microlink.io.\n\nCan you help me?'
-}

src/helpers/email-url.js

@@ -0,0 +1,29 @@
+const encode = ({ to, subject, body }) =>
+  `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(
+    subject
+  )}&body=${encodeURIComponent(body)}`
+
+const paymentError = ({ subject, error }) => {
+  let body =
+    "Hello,\n\nSomething didn't work while updating my payment details."
+
+  if (error) {
+    body += `\n\nThe error is:\n\n\`${error.stack}\``
+    body += `\n\nMy browser is:\n\n\`${navigator.userAgent}\``
+  }
+
+  body += '\n\nCan you assist me?'
+
+  return encode({
+    to: '[email protected]',
+    subject,
+    body
+  })
+}
+
+const emailUrl = {
+  encode,
+  paymentError
+}
+
+export default emailUrl

src/helpers/encode.js

@@ -8,6 +8,7 @@ import aspectRatio from './aspect-ratio'
 import hasChildren from './has-children'
 import formatDate from './format-date'
 import proxyImage from './proxy-image'
+import emailUrl from './email-url'
 import getLines from './get-lines'
 import issueUrl from './issue-url'
 import template from './template'
@@ -17,7 +18,6 @@ import pdfUrl from './pdf-url'
 import trimMs from './trim-ms'
 import cdnUrl from './cdn-url'
 import decode from './decode'
-import encode from './encode'
 import isSSR from './is-ssr'
 import title from './title'
 import hash from './hash'
@@ -30,7 +30,7 @@ export {
   childrenText,
   childrenTextAll,
   decode,
-  encode,
+  emailUrl,
   formatDate,
   formatNumber,
   getLines,

src/helpers/index.js

@@ -1,7 +1,7 @@
 import { Caption, Layout } from 'components/patterns'
 import React, { useState, useEffect } from 'react'
 import { useQueryState } from 'components/hook'
-import { encode } from 'helpers'
+import emailUrl from 'helpers/email-url'
 import { layout, theme } from 'theme'
 
 import {
@@ -13,10 +13,7 @@ import {
   Meta
 } from 'components/elements'
 
-import {
-  PAYMENT_STATE,
-  ERROR_MAIL_OPTS
-} from 'components/pages/payment/constants'
+import { PAYMENT_STATE } from 'components/pages/payment/constants'
 
 const getTitle = paymentState => {
   switch (paymentState) {
@@ -46,9 +43,9 @@ const getCaption = paymentState => {
           Payment not processed.{' '}
           <Link
             css={theme({ pt: 2 })}
-            href={`mailto:[email protected]?${encode(ERROR_MAIL_OPTS)}`}
+            href={emailUrl.paymentError({ subject: 'Error during checkout' })}
           >
-            Contact us
+            Click to request assistance.
           </Link>
         </>
       )

src/pages/payment/index.js

@@ -1,6 +1,13 @@
 /* global fetch */
 
 import { useFingerprint, useSiteMetadata, useQueryState } from 'components/hook'
+import { PAYMENT_STATE } from 'components/pages/payment/constants'
+import { Caption, Layout } from 'components/patterns'
+import { loadStripe } from '@stripe/stripe-js/pure'
+import React, { useEffect, useState } from 'react'
+import emailUrl from 'helpers/email-url'
+import once from 'helpers/once'
+
 import {
   colors,
   fonts,
@@ -10,11 +17,6 @@ import {
   transition,
   theme
 } from 'theme'
-import { Caption, Layout } from 'components/patterns'
-import { loadStripe } from '@stripe/stripe-js/pure'
-import React, { useEffect, useState } from 'react'
-import { encode } from 'helpers'
-import once from 'helpers/once'
 
 import {
   Box,
@@ -35,11 +37,6 @@ import {
   useElements
 } from '@stripe/react-stripe-js'
 
-import {
-  PAYMENT_STATE,
-  ERROR_MAIL_OPTS
-} from 'components/pages/payment/constants'
-
 const fetchOnce = once(fetch)
 
 const redirectUrl = (paymentState, id) => {
@@ -62,7 +59,7 @@ const getTitle = paymentState => {
   }
 }
 
-const getCaption = paymentState => {
+const getCaption = (paymentState, error) => {
   switch (paymentState) {
     case PAYMENT_STATE.redirected:
       return (
@@ -79,9 +76,12 @@ const getCaption = paymentState => {
           Payment not updated.{' '}
           <Link
             css={theme({ pt: 2 })}
-            href={`mailto:[email protected]?${encode(ERROR_MAIL_OPTS)}`}
+            href={emailUrl.paymentError({
+              subject: 'Error updating my payment details',
+              error
+            })}
           >
-            Contact us
+            Click to request assistance.
           </Link>
           .
         </>
@@ -96,6 +96,7 @@ const CheckoutForm = ({
   id,
   paymentState,
   setPaymentState,
+  setError,
   token
 }) => {
   const elements = useElements()
@@ -124,6 +125,7 @@ const CheckoutForm = ({
       if (error) throw error
     } catch (error) {
       console.error(error)
+      setError(error)
       setPaymentState(PAYMENT_STATE.failed)
     }
   }
@@ -157,6 +159,7 @@ export const Head = () => <Meta title='Payment' />
 
 const PaymentUpdatePage = () => {
   const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState(null)
   const [query] = useQueryState()
   const {
     stripeKey,
@@ -215,7 +218,10 @@ const PaymentUpdatePage = () => {
           })}
           titleize={false}
         >
-          {getCaption(isLoading ? PAYMENT_STATE.redirected : paymentState)}
+          {getCaption(
+            isLoading ? PAYMENT_STATE.redirected : paymentState,
+            error
+          )}
         </Caption>
         {!isLoading && !query.status && (
           <Box css={theme({ pt: [3, null, 4], width: 7 })}>
@@ -251,6 +257,7 @@ const PaymentUpdatePage = () => {
                 id={query.id}
                 paymentState={paymentState}
                 setPaymentState={setPaymentState}
+                setError={setError}
                 token={query.token}
               />
             </Elements>

src/pages/payment/update.js

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`emailUrl > .paymentError > with error 1`] = `"mailto:hello%40microlink.io?subject=Error%20during%20checkout&body=Hello%2C%0A%0ASomething%20didn't%20work%20while%20updating%20my%20payment%20details.%0A%0AThe%20error%20is%3A%0A%0A%60Error%3A%20oh%20no%0A%20%20%20%20at%20Context.%3Canonymous%3E%20(%2Fpath%2Fto%2Ftest%2Fhelpers%2Femail-url.js%3A10%3A19)%0A%20%20%20%20at%20processImmediate%20(internal%2Ftimers.js%3A456%3A21)%60%0A%0AMy%20browser%20is%3A%0A%0A%60Node.js%2F22%60%0A%0ACan%20you%20assist%20me%3F"`;
+
+exports[`emailUrl > .paymentError > without error 1`] = `"mailto:hello%40microlink.io?subject=Error%20during%20checkout&body=Hello%2C%0A%0ASomething%20didn't%20work%20while%20updating%20my%20payment%20details.%0A%0ACan%20you%20assist%20me%3F"`;

test/helpers/__snapshots__/email-url.js.snap

@@ -0,0 +1,28 @@
+import { expect, describe, it } from 'vitest'
+
+import emailUrl from '../../src/helpers/email-url.js'
+
+describe('emailUrl', () => {
+  describe('.paymentError', () => {
+    it('with error', () => {
+      const error = new Error('oh no')
+      error.stack =
+        'Error: oh no\n    at Context.<anonymous> (/path/to/test/helpers/email-url.js:10:19)\n    at processImmediate (internal/timers.js:456:21)'
+
+      const url = emailUrl.paymentError({
+        subject: 'Error during checkout',
+        error
+      })
+
+      expect(url).toMatchSnapshot()
+    })
+
+    it('without error', () => {
+      const url = emailUrl.paymentError({
+        subject: 'Error during checkout'
+      })
+
+      expect(url).toMatchSnapshot()
+    })
+  })
+})