Default error message

CHANGELOG.md

@@ -26,6 +26,7 @@ Unreleased
 1.22.0 - (April 28, 2020)
 ------------------
 ### Changed
+* Updated errorBoundary to have a default error message when there is none provided.
 * Update terra-toolkit dev dependency to 6.0.0
 
 1.21.0 - (April 22, 2020)

CONTRIBUTORS.md

@@ -3,7 +3,10 @@ Cerner Corporation
 - Tyler Biethman [@tbiethman]
 - David Schoonover [@dkschoonover]
 - Dianna McGinn [@DMcginn]
+- Jaime Mackey [@jmsv6d]
 
 [@tbiethman]: https://github.com/tbiethman
 [@dkschoonover]: https://github.com/dkschoonover
-[@DMcginn]: https://github.com/DMcginn
+[@DMcginn]: https://github.com/DMcginn
+[@jmsv6d]: https://github.com/jmsv6d
+

src/application-error-boundary/ApplicationErrorBoundary.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import StatusView from 'terra-status-view';
+import { injectIntl, intlShape } from 'react-intl';
 import logger from '../utils/logger';
 
 const propTypes = {
@@ -9,6 +10,12 @@ const propTypes = {
    * by these components during their render lifecycle will be caught by the ApplicationErrorBoundary.
    */
   children: PropTypes.node,
+
+  /**
+   * @private
+   * Intl object for translations.
+   */
+  intl: PropTypes.shape(intlShape),
 };
 
 /**
@@ -78,14 +85,16 @@ class ApplicationErrorBoundary extends React.Component {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, intl } = this.props;
     const activeError = this.state.error || this.errorRef.current;
 
     if (activeError) {
+      const errorDetails = activeError.message.toString();
+      const errorText = intl.formatMessage({ id: 'terraApplication.errorBoundary.defaultErrorMessage' }, { errorDetails });
       return (
         <StatusView
           variant="error"
-          message={activeError.toString()}
+          message={errorText}
         />
       );
     }
@@ -96,4 +105,4 @@ class ApplicationErrorBoundary extends React.Component {
 
 ApplicationErrorBoundary.propTypes = propTypes;
 
-export default ApplicationErrorBoundary;
+export default injectIntl(ApplicationErrorBoundary);

src/terra-dev-site/test/application-error-boundary/ErrorBoundaryTest.test.jsx

@@ -3,13 +3,21 @@ import ApplicationErrorBoundary from '../../../../lib/application-error-boundary
 
 const ErrorComponent = () => {
   const [throwError, setThrowError] = useState(false);
+  const [throwDefaultError, setThrowDefaultError] = useState(false);
 
   if (throwError) {
     throw new Error('ouch');
   }
 
+  if (throwDefaultError) {
+    throw new Error();
+  }
+
   return (
-    <button type="button" onClick={() => { setThrowError(true); }}>Throw Error</button>
+    <>
+      <button type="button" onClick={() => { setThrowError(true); }}>Throw Error</button>
+      <button type="button" id="defaultMessage" onClick={() => { setThrowDefaultError(true); }}>Throw Default Error</button>
+    </>
   );
 };
 

tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap

@@ -30,7 +30,7 @@ exports[`ApplicationBase should render with all props 1`] = `
           </div>
         }
       >
-        <ApplicationErrorBoundary>
+        <InjectIntl(ApplicationErrorBoundary)>
           <InjectIntl(Component)>
             <ActiveBreakpointProvider>
               <withPromptRegistration(NavigationPromptCheckpoint)
@@ -53,7 +53,7 @@ exports[`ApplicationBase should render with all props 1`] = `
               </withPromptRegistration(NavigationPromptCheckpoint)>
             </ActiveBreakpointProvider>
           </InjectIntl(Component)>
-        </ApplicationErrorBoundary>
+        </InjectIntl(ApplicationErrorBoundary)>
       </Base>
     </ThemeContextProvider>
   </ThemeProvider>
@@ -79,7 +79,7 @@ exports[`ApplicationBase should render with minimal props 1`] = `
         locale="en"
         strictMode={false}
       >
-        <ApplicationErrorBoundary>
+        <InjectIntl(ApplicationErrorBoundary)>
           <InjectIntl(Component)>
             <ActiveBreakpointProvider>
               <withPromptRegistration(NavigationPromptCheckpoint)
@@ -102,7 +102,7 @@ exports[`ApplicationBase should render with minimal props 1`] = `
               </withPromptRegistration(NavigationPromptCheckpoint)>
             </ActiveBreakpointProvider>
           </InjectIntl(Component)>
-        </ApplicationErrorBoundary>
+        </InjectIntl(ApplicationErrorBoundary)>
       </Base>
     </ThemeContextProvider>
   </ThemeProvider>
@@ -128,7 +128,7 @@ exports[`ApplicationBase should render with the preferred browser local 1`] = `
         locale="en"
         strictMode={false}
       >
-        <ApplicationErrorBoundary>
+        <InjectIntl(ApplicationErrorBoundary)>
           <InjectIntl(Component)>
             <ActiveBreakpointProvider>
               <withPromptRegistration(NavigationPromptCheckpoint)
@@ -151,7 +151,7 @@ exports[`ApplicationBase should render with the preferred browser local 1`] = `
               </withPromptRegistration(NavigationPromptCheckpoint)>
             </ActiveBreakpointProvider>
           </InjectIntl(Component)>
-        </ApplicationErrorBoundary>
+        </InjectIntl(ApplicationErrorBoundary)>
       </Base>
     </ThemeContextProvider>
   </ThemeProvider>

tests/jest/application-error-boundary/ApplicationErrorBoundary.test.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import { shallowWithIntl, mountWithIntl } from 'terra-enzyme-intl';
 import ApplicationErrorBoundary from '../../../src/application-error-boundary/ApplicationErrorBoundary';
 import Logger from '../../../src/utils/logger';
 
 describe('ApplicationErrorBoundary', () => {
   describe('Snapshots', () => {
     it('should render with minimal props', () => {
-      const wrapper = shallow((
+      const wrapper = shallowWithIntl((
         <ApplicationErrorBoundary />
       ));
 
       expect(wrapper).toMatchSnapshot();
     });
 
     it('should render with children', () => {
-      const wrapper = shallow((
+      const wrapper = shallowWithIntl((
         <ApplicationErrorBoundary>
           <div>Test child</div>
         </ApplicationErrorBoundary>
@@ -26,11 +27,12 @@ describe('ApplicationErrorBoundary', () => {
       const spy = jest.spyOn(Logger, 'error').mockImplementation(() => {});
       const ErrorComponent = () => <div />;
 
-      const wrapper = shallow((
+      const wrapper = mountWithIntl((
         <ApplicationErrorBoundary>
           <ErrorComponent />
         </ApplicationErrorBoundary>
       ));
+      expect(wrapper).toMatchSnapshot();
 
       /**
        * After simulating the error, the error view should be rendered.