feat(checkout): CHECKOUT-5102 Show request ID in error modal if avail…

…able
bigcommerce · Aug 14, 2020 · a4e4f00 · a4e4f00
1 parent 9dd1865
commit a4e4f00
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/src/app/common/error/ErrorCode.tsx b/src/app/common/error/ErrorCode.tsx
@@ -1,14 +1,19 @@
-import React, { memo, FunctionComponent } from 'react';
+import React, { memo, FunctionComponent, ReactNode } from 'react';
 
 import { TranslatedString } from '../../locale';
 
 import './ErrorCode.scss';
 
-const ErrorCode: FunctionComponent<{code: string}> = ({ code }) => {
+export interface ErrorCodeProps {
+    code: string;
+    label?: ReactNode;
+}
+
+const ErrorCode: FunctionComponent<ErrorCodeProps> = ({ code, label }) => {
     return (
         <div className="errorCode">
             <span className="errorCode-label">
-                <TranslatedString id="common.error_code" />
+                { label ?? <TranslatedString id="common.error_code" /> }
             </span>
             { ' ' }
             <span className="errorCode-value">{ code }</span>

diff --git a/src/app/common/error/ErrorModal.spec.tsx b/src/app/common/error/ErrorModal.spec.tsx
@@ -1,3 +1,4 @@
+import { RequestError } from '@bigcommerce/checkout-sdk';
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 
@@ -13,7 +14,7 @@ import ErrorModal, { ErrorModalProps } from './ErrorModal';
 describe('ErrorModal', () => {
     let errorModal: ReactWrapper;
     let localeContext: LocaleContextType;
-    let error: Error;
+    let error: Error | RequestError;
     const onClose = jest.fn();
 
     const ErrorModalContainer = (props: ErrorModalProps) => (
@@ -48,6 +49,18 @@ describe('ErrorModal', () => {
         expect(errorModal.find(ErrorCode).length).toEqual(1);
     });
 
+    it('renders request ID if available', () => {
+        error = {
+            type: 'request',
+            headers: { 'x-request-id': 'foobar' },
+        } as unknown as RequestError;
+
+        errorModal = mount(<ErrorModalContainer error={ error } />);
+
+        expect(errorModal.find(ErrorCode).text())
+            .toEqual('Request ID: foobar');
+    });
+
     it('overrides error message', () => {
         errorModal = mount(<ErrorModalContainer
             error={ error }

diff --git a/src/app/common/error/ErrorModal.tsx b/src/app/common/error/ErrorModal.tsx
@@ -1,3 +1,4 @@
+import { RequestError } from '@bigcommerce/checkout-sdk';
 import { noop } from 'lodash';
 import React, { Fragment, PureComponent, ReactNode, SyntheticEvent } from 'react';
 
@@ -8,10 +9,11 @@ import { Modal, ModalHeader } from '../../ui/modal';
 
 import computeErrorCode from './computeErrorCode';
 import isCustomError from './isCustomError';
+import isRequestError from './isRequestError';
 import ErrorCode from './ErrorCode';
 
 export interface ErrorModalProps {
-    error?: Error;
+    error?: Error | RequestError;
     message?: ReactNode;
     title?: ReactNode;
     shouldShowErrorCode?: boolean;
@@ -91,6 +93,13 @@ export default class ErrorModal extends PureComponent<ErrorModalProps> {
             return;
         }
 
+        if (isRequestError(error) && error?.headers?.['x-request-id']) {
+            return <ErrorCode
+                code={ error.headers['x-request-id'] }
+                label={ <TranslatedString id="common.request_id" /> }
+            />;
+        }
+
         const errorCode = computeErrorCode(error);
 
         if (!errorCode) {

diff --git a/src/app/locale/translations/en.json b/src/app/locale/translations/en.json
@@ -81,6 +81,7 @@
             "loading_text": "Loading",
             "ok_action": "Ok",
             "error_code": "Error code:",
+            "request_id": "Request ID:",
             "optional_text": "(Optional)",
             "unavailable_error": "Checkout is temporarily unavailable. Please try again later.",
             "unavailable_heading": "Checkout is temporarily unavailable",