Display details about network errors in alert modal and content error components (#288)

Display details about network errors in alert modal and content error components
2026-01-16 04:10:44 -03:30 · 2019-06-26 11:40:15 -04:00 · 2019-06-26 11:40:15 -04:00 · 52851c57d8
commit 52851c57d8
parent a503529d05
26 changed files with 341 additions and 144 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -17,6 +17,7 @@ import AlertModal from '@components/AlertModal';
 import NavExpandableGroup from '@components/NavExpandableGroup';
 import BrandLogo from '@components/BrandLogo';
 import PageHeaderToolbar from '@components/PageHeaderToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import { ConfigProvider } from '@contexts/Config';

 const PageHeader = styled(PFPageHeader)`
@ -48,7 +49,7 @@ class App extends Component {
      version: null,
      isAboutModalOpen: false,
      isNavOpen,
-      hasConfigError: false,
+      configError: null
    };

    this.handleLogout = this.handleLogout.bind(this);
@ -81,7 +82,9 @@ class App extends Component {
  }

  handleConfigErrorClose () {
-    this.setState({ hasConfigError: false });
+    this.setState({
+      configError: null
+    });
  }

  async loadConfig () {
@ -92,7 +95,7 @@ class App extends Component {

      this.setState({ ansible_version, custom_virtualenvs, version, me });
    } catch (err) {
-      this.setState({ hasConfigError: true });
+      this.setState({ configError: err });
    }
  }

@ -104,7 +107,7 @@ class App extends Component {
      isNavOpen,
      me,
      version,
-      hasConfigError,
+      configError
    } = this.state;
    const {
      i18n,
@ -170,12 +173,13 @@ class App extends Component {
          onClose={this.handleAboutClose}
        />
        <AlertModal
-          isOpen={hasConfigError}
+          isOpen={configError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleConfigErrorClose}
        >
          {i18n._(t`Failed to retrieve configuration.`)}
+          <ErrorDetail error={configError} />
        </AlertModal>
      </Fragment>
    );
--- a/src/components/AlertModal/AlertModal.jsx
+++ b/src/components/AlertModal/AlertModal.jsx
@ -20,9 +20,13 @@ const getIcon = (variant) => {
  return icon;
 };

-export default ({ variant, children, ...props }) => (
-  <Modal className={`awx-c-modal${variant && ` at-c-alertModal at-c-alertModal--${variant}`}`} {...props}>
-    {children}
-    {getIcon(variant)}
-  </Modal>
-);
+export default ({ variant, children, ...props }) => {
+  const { isOpen = null } = props;
+  props.isOpen = Boolean(isOpen);
+  return (
+    <Modal className={`awx-c-modal${variant && ` at-c-alertModal at-c-alertModal--${variant}`}`} {...props}>
+      {children}
+      {getIcon(variant)}
+    </Modal>
+  );
+};
--- a/src/components/ContentError/ContentError.jsx
+++ b/src/components/ContentError/ContentError.jsx
@ -1,26 +1,40 @@
 import React from 'react';
 import { t } from '@lingui/macro';
+import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import {
  Title,
-  EmptyState,
+  EmptyState as PFEmptyState,
  EmptyStateIcon,
  EmptyStateBody
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';

-// TODO: Pass actual error as prop and display expandable details for network errors.
-const ContentError = ({ i18n }) => (
-  <EmptyState>
-    <EmptyStateIcon icon={ExclamationTriangleIcon} />
-    <Title size="lg">
-      {i18n._(t`Something went wrong...`)}
-    </Title>
-    <EmptyStateBody>
-      {i18n._(t`There was an error loading this content. Please reload the page.`)}
-    </EmptyStateBody>
-  </EmptyState>
-);
+import ErrorDetail from '@components/ErrorDetail';
+
+const EmptyState = styled(PFEmptyState)`
+  width: var(--pf-c-empty-state--m-lg--MaxWidth);
+`;
+
+class ContentError extends React.Component {
+  render () {
+    const { error, i18n } = this.props;
+    return (
+      <EmptyState>
+        <EmptyStateIcon icon={ExclamationTriangleIcon} />
+        <Title size="lg">
+          {i18n._(t`Something went wrong...`)}
+        </Title>
+        <EmptyStateBody>
+          {i18n._(t`There was an error loading this content. Please reload the page.`)}
+        </EmptyStateBody>
+        {error && (
+          <ErrorDetail error={error} />
+        )}
+      </EmptyState>
+    );
+  }
+}

 export { ContentError as _ContentError };
 export default withI18n()(ContentError);
--- a/src/components/ContentError/ContentError.test.jsx
+++ b/src/components/ContentError/ContentError.test.jsx
@ -5,7 +5,15 @@ import ContentError from './ContentError';

 describe('ContentError', () => {
  test('renders the expected content', () => {
-    const wrapper = mountWithContexts(<ContentError />);
+    const wrapper = mountWithContexts(<ContentError error={new Error({
+      response: {
+        config: {
+          method: 'post'
+        },
+        data: 'An error occurred',
+      }
+    })}
+    />);
    expect(wrapper).toHaveLength(1);
  });
 });
--- a/src/components/ErrorDetail/ErrorDetail.jsx
+++ b/src/components/ErrorDetail/ErrorDetail.jsx
@ -0,0 +1,95 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+import {
+  Card as PFCard,
+  CardBody as PFCardBody,
+  Expandable as PFExpandable
+} from '@patternfly/react-core';
+
+const Card = styled(PFCard)`
+  background-color: var(--pf-global--BackgroundColor--200);
+  overflow-wrap: break-word;
+`;
+
+const CardBody = styled(PFCardBody)`
+  max-height: 200px;
+  overflow: scroll;
+`;
+
+const Expandable = styled(PFExpandable)`
+  text-align: left;
+`;
+
+class ErrorDetail extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isExpanded: false
+    };
+
+    this.handleToggle = this.handleToggle.bind(this);
+    this.renderNetworkError = this.renderNetworkError.bind(this);
+    this.renderStack = this.renderStack.bind(this);
+  }
+
+  handleToggle () {
+    const { isExpanded } = this.state;
+    this.setState({ isExpanded: !isExpanded });
+  }
+
+  renderNetworkError () {
+    const { error } = this.props;
+    const { response } = error;
+
+    const message = typeof response.data === 'string'
+      ? response.data
+      : response.data.detail;
+
+    return (
+      <Fragment>
+        <CardBody>
+          {response.config.method.toUpperCase()}
+          {' '}
+          {response.config.url}
+          {' '}
+          <strong>
+            {response.status}
+          </strong>
+        </CardBody>
+        <CardBody>{message}</CardBody>
+      </Fragment>
+    );
+  }
+
+  renderStack () {
+    const { error } = this.props;
+    return (<CardBody>{error.stack}</CardBody>);
+  }
+
+  render () {
+    const { isExpanded } = this.state;
+    const { error, i18n } = this.props;
+
+    return (
+      <Expandable toggleText={i18n._(t`Details`)} onToggle={this.handleToggle} isExpanded={isExpanded}>
+        <Card>
+          {Object.prototype.hasOwnProperty.call(error, 'response')
+            ? this.renderNetworkError()
+            : this.renderStack()
+          }
+        </Card>
+      </Expandable>
+    );
+  }
+}
+
+ErrorDetail.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired
+};
+
+export default withI18n()(ErrorDetail);
--- a/src/components/ErrorDetail/ErrorDetail.test.jsx
+++ b/src/components/ErrorDetail/ErrorDetail.test.jsx
@ -0,0 +1,19 @@
+import React from 'react';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+
+import ErrorDetail from './ErrorDetail';
+
+describe('ErrorDetail', () => {
+  test('renders the expected content', () => {
+    const wrapper = mountWithContexts(<ErrorDetail error={new Error({
+      response: {
+        config: {
+          method: 'post'
+        },
+        data: 'An error occurred'
+      }
+    })}
+    />);
+    expect(wrapper).toHaveLength(1);
+  });
+});
--- a/src/components/ErrorDetail/index.js
+++ b/src/components/ErrorDetail/index.js
@ -0,0 +1 @@
+export { default } from './ErrorDetail';
--- a/src/components/LaunchButton/LaunchButton.jsx
+++ b/src/components/LaunchButton/LaunchButton.jsx
@ -8,6 +8,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';

 import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
 import { JobTemplatesAPI } from '@api';

 const StyledLaunchButton = styled(Button)`
@ -28,7 +29,7 @@ class LaunchButton extends React.Component {
    super(props);

    this.state = {
-      launchError: false,
+      launchError: null,
      promptError: false
    };

@ -38,7 +39,7 @@ class LaunchButton extends React.Component {
  }

  handleLaunchErrorClose () {
-    this.setState({ launchError: false });
+    this.setState({ launchError: null });
  }

  handlePromptErrorClose () {
@ -55,8 +56,8 @@ class LaunchButton extends React.Component {
      } else {
        this.setState({ promptError: true });
      }
-    } catch (error) {
-      this.setState({ launchError: true });
+    } catch (err) {
+      this.setState({ launchError: err });
    }
  }

@ -89,6 +90,7 @@ class LaunchButton extends React.Component {
          onClose={this.handleLaunchErrorClose}
        >
          {i18n._(t`Failed to launch job.`)}
+          <ErrorDetail error={launchError} />
        </AlertModal>
        <AlertModal
          isOpen={promptError}
--- a/src/components/LaunchButton/LaunchButton.test.jsx
+++ b/src/components/LaunchButton/LaunchButton.test.jsx
@ -43,7 +43,16 @@ describe('LaunchButton', () => {
    done();
  });
  test('displays error modal after unsuccessful launch', async (done) => {
-    JobTemplatesAPI.launch.mockRejectedValue({});
+    JobTemplatesAPI.launch.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'post',
+          url: '/api/v2/job_templates/1/launch'
+        },
+        data: 'An error occurred',
+        status: 403
+      }
+    }));
    const wrapper = mountWithContexts(<LaunchButton templateId={1} />);
    const launchButton = wrapper.find('LaunchButton__StyledLaunchButton');
    launchButton.simulate('click');
--- a/src/components/PaginatedDataList/PaginatedDataList.jsx
+++ b/src/components/PaginatedDataList/PaginatedDataList.jsx
@ -72,7 +72,7 @@ class PaginatedDataList extends React.Component {
  render () {
    const [orderBy, sortOrder] = this.getSortOrder();
    const {
-      hasContentError,
+      contentError,
      hasContentLoading,
      emptyStateControls,
      items,
@ -100,8 +100,8 @@ class PaginatedDataList extends React.Component {
    let Content;
    if (hasContentLoading && items.length <= 0) {
      Content = (<ContentLoading />);
-    } else if (hasContentError) {
-      Content = (<ContentError />);
+    } else if (contentError) {
+      Content = (<ContentError error={contentError} />);
    } else if (items.length <= 0) {
      Content = (<ContentEmpty title={emptyContentTitle} message={emptyContentMessage} />);
    } else {
@ -174,12 +174,12 @@ PaginatedDataList.propTypes = {
  showPageSizeOptions: PropTypes.bool,
  renderToolbar: PropTypes.func,
  hasContentLoading: PropTypes.bool,
-  hasContentError: PropTypes.bool,
+  contentError: PropTypes.shape(),
 };

 PaginatedDataList.defaultProps = {
  hasContentLoading: false,
-  hasContentError: false,
+  contentError: null,
  toolbarColumns: [],
  itemName: 'item',
  itemNamePlural: '',
--- a/src/screens/Job/Job.jsx
+++ b/src/screens/Job/Job.jsx
@ -19,7 +19,7 @@ class Job extends Component {

    this.state = {
      job: null,
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
      isInitialized: false
    };
@ -46,13 +46,13 @@ class Job extends Component {
    } = this.props;
    const id = parseInt(match.params.id, 10);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const { data } = await JobsAPI.readDetail(id);
      setBreadcrumb(data);
      this.setState({ job: data });
-    } catch (error) {
-      this.setState({ hasContentError: true });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -67,7 +67,7 @@ class Job extends Component {

    const {
      job,
-      hasContentError,
+      contentError,
      hasContentLoading,
      isInitialized
    } = this.state;
@ -103,11 +103,11 @@ class Job extends Component {
      cardHeader = null;
    }

-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
      return (
        <PageSection>
          <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
          </Card>
        </PageSection>
      );
--- a/src/screens/Job/JobList/JobList.jsx
+++ b/src/screens/Job/JobList/JobList.jsx
@ -11,6 +11,7 @@ import {
 import { UnifiedJobsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
  ToolbarDeleteButton
 } from '@components/PaginatedDataList';
@ -31,8 +32,8 @@ class JobList extends Component {

    this.state = {
      hasContentLoading: true,
-      hasContentError: false,
-      hasDeletionError: false,
+      contentError: null,
+      deletionError: null,
      selected: [],
      jobs: [],
      itemCount: 0,
@ -56,7 +57,7 @@ class JobList extends Component {
  }

  handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
  }

  handleSelectAll (isSelected) {
@ -76,11 +77,11 @@ class JobList extends Component {

  async handleDelete () {
    const { selected } = this.state;
-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
    try {
      await Promise.all(selected.map(({ id }) => UnifiedJobsAPI.destroy(id)));
    } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
    } finally {
      await this.loadJobs();
    }
@ -90,7 +91,7 @@ class JobList extends Component {
    const { location } = this.props;
    const params = parseNamespacedQueryString(QS_CONFIG, location.search);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const { data: { count, results } } = await UnifiedJobsAPI.read(params);
      this.setState({
@ -99,7 +100,7 @@ class JobList extends Component {
        selected: [],
      });
    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -107,9 +108,9 @@ class JobList extends Component {

  render () {
    const {
-      hasContentError,
+      contentError,
      hasContentLoading,
-      hasDeletionError,
+      deletionError,
      jobs,
      itemCount,
      selected,
@ -125,7 +126,7 @@ class JobList extends Component {
      <PageSection variant={medium}>
        <Card>
          <PaginatedDataList
-            hasContentError={hasContentError}
+            contentError={contentError}
            hasContentLoading={hasContentLoading}
            items={jobs}
            itemCount={itemCount}
@ -166,12 +167,13 @@ class JobList extends Component {
          />
        </Card>
        <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more jobs.`)}
+          <ErrorDetail error={deletionError} />
        </AlertModal>
      </PageSection>
    );
--- a/src/screens/Organization/Organization.jsx
+++ b/src/screens/Organization/Organization.jsx
@ -21,7 +21,7 @@ class Organization extends Component {
    this.state = {
      organization: null,
      hasContentLoading: true,
-      hasContentError: false,
+      contentError: null,
      isInitialized: false,
      isNotifAdmin: false,
      isAuditorOfThisOrg: false,
@ -50,7 +50,7 @@ class Organization extends Component {
    } = this.props;
    const id = parseInt(match.params.id, 10);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const [{ data }, notifAdminRes, auditorRes, adminRes] = await Promise.all([
        OrganizationsAPI.readDetail(id),
@ -66,7 +66,7 @@ class Organization extends Component {
        isAdminOfThisOrg: adminRes.data.results.length > 0
      });
    } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -79,13 +79,13 @@ class Organization extends Component {
    } = this.props;
    const id = parseInt(match.params.id, 10);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const { data } = await OrganizationsAPI.readDetail(id);
      setBreadcrumb(data);
      this.setState({ organization: data });
    } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -102,7 +102,7 @@ class Organization extends Component {

    const {
      organization,
-      hasContentError,
+      contentError,
      hasContentLoading,
      isInitialized,
      isNotifAdmin,
@ -162,11 +162,11 @@ class Organization extends Component {
      cardHeader = null;
    }

-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
      return (
        <PageSection>
          <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
          </Card>
        </PageSection>
      );
--- a/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
+++ b/src/screens/Organization/OrganizationAccess/OrganizationAccess.jsx
@ -7,6 +7,7 @@ import { OrganizationsAPI, TeamsAPI, UsersAPI } from '@api';
 import AddResourceRole from '@components/AddRole/AddResourceRole';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, { ToolbarAddButton } from '@components/PaginatedDataList';
 import {
  getQSConfig,
@ -33,9 +34,9 @@ class OrganizationAccess extends React.Component {
    super(props);
    this.state = {
      accessRecords: [],
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
-      hasDeletionError: false,
+      deletionError: null,
      deletionRecord: null,
      deletionRole: null,
      isAddModalOpen: false,
@ -70,7 +71,7 @@ class OrganizationAccess extends React.Component {
    const { organization, location } = this.props;
    const params = parseNamespacedQueryString(QS_CONFIG, location.search);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const {
        data: {
@ -79,8 +80,8 @@ class OrganizationAccess extends React.Component {
        }
      } = await OrganizationsAPI.readAccessList(organization.id, params);
      this.setState({ itemCount, accessRecords });
-    } catch (error) {
-      this.setState({ hasContentError: true });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -96,7 +97,7 @@ class OrganizationAccess extends React.Component {

  handleDeleteErrorClose () {
    this.setState({
-      hasDeletionError: false,
+      deletionError: null,
      deletionRecord: null,
      deletionRole: null
    });
@ -123,10 +124,10 @@ class OrganizationAccess extends React.Component {
        deletionRole: null,
        deletionRecord: null
      });
-    } catch (error) {
+    } catch (err) {
      this.setState({
        hasContentLoading: false,
-        hasDeletionError: true
+        deletionError: err
      });
    }
  }
@ -148,21 +149,21 @@ class OrganizationAccess extends React.Component {
    const { organization, i18n } = this.props;
    const {
      accessRecords,
-      hasContentError,
+      contentError,
      hasContentLoading,
      deletionRole,
      deletionRecord,
-      hasDeletionError,
+      deletionError,
      itemCount,
-      isAddModalOpen,
+      isAddModalOpen
    } = this.state;
    const canEdit = organization.summary_fields.user_capabilities.edit;
-    const isDeleteModalOpen = !hasContentLoading && !hasDeletionError && deletionRole;
+    const isDeleteModalOpen = !hasContentLoading && !deletionError && deletionRole;

    return (
      <Fragment>
        <PaginatedDataList
-          hasContentError={hasContentError}
+          error={contentError}
          hasContentLoading={hasContentLoading}
          items={accessRecords}
          itemCount={itemCount}
@ -205,12 +206,13 @@ class OrganizationAccess extends React.Component {
          />
        )}
        <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete role`)}
+          <ErrorDetail error={deletionError} />
        </AlertModal>
      </Fragment>
    );
--- a/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
+++ b/src/screens/Organization/OrganizationAccess/OrganizationAccess.test.jsx
@ -84,7 +84,7 @@ describe('<OrganizationAccess />', () => {
    await waitForElement(wrapper, 'OrganizationAccessItem', el => el.length === 2);
    expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
    expect(wrapper.find('OrganizationAccess').state('hasContentLoading')).toBe(false);
-    expect(wrapper.find('OrganizationAccess').state('hasContentError')).toBe(false);
+    expect(wrapper.find('OrganizationAccess').state('contentError')).toBe(null);
    done();
  });

--- a/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccess.test.jsx.snap
+++ b/src/screens/Organization/OrganizationAccess/snapshots/OrganizationAccess.test.jsx.snap
@ -34,7 +34,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
  }
 >
  <WithI18n
-    hasContentError={false}
+    error={null}
    hasContentLoading={true}
    itemCount={0}
    itemName="role"
@ -80,7 +80,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
      withHash={true}
    >
      <withRouter(PaginatedDataList)
-        hasContentError={false}
+        error={null}
        hasContentLoading={true}
        i18n={"/i18n/"}
        itemCount={0}
@ -124,7 +124,8 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
      >
        <Route>
          <PaginatedDataList
-            hasContentError={false}
+            contentError={null}
+            error={null}
            hasContentLoading={true}
            history={"/history/"}
            i18n={"/i18n/"}
@ -220,7 +221,7 @@ exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
    </I18n>
  </WithI18n>
  <_default
-    isOpen={false}
+    isOpen={null}
    onClose={[Function]}
    title="Error!"
    variant="danger"
--- a/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
+++ b/src/screens/Organization/OrganizationDetail/OrganizationDetail.jsx
@ -20,7 +20,7 @@ class OrganizationDetail extends Component {
    super(props);

    this.state = {
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
      instanceGroups: [],
    };
@ -39,7 +39,7 @@ class OrganizationDetail extends Component {
      const { data: { results = [] } } = await OrganizationsAPI.readInstanceGroups(id);
      this.setState({ instanceGroups: [...results] });
    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -48,7 +48,7 @@ class OrganizationDetail extends Component {
  render () {
    const {
      hasContentLoading,
-      hasContentError,
+      contentError,
      instanceGroups,
    } = this.state;

@ -70,8 +70,8 @@ class OrganizationDetail extends Component {
      return (<ContentLoading />);
    }

-    if (hasContentError) {
-      return (<ContentError />);
+    if (contentError) {
+      return (<ContentError error={contentError} />);
    }

    return (
--- a/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/src/screens/Organization/OrganizationList/OrganizationList.jsx
@ -11,6 +11,7 @@ import {
 import { OrganizationsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
  ToolbarAddButton,
  ToolbarDeleteButton,
@ -31,8 +32,8 @@ class OrganizationsList extends Component {

    this.state = {
      hasContentLoading: true,
-      hasContentError: false,
-      hasDeletionError: false,
+      contentError: null,
+      deletionError: null,
      organizations: [],
      selected: [],
      itemCount: 0,
@ -75,17 +76,17 @@ class OrganizationsList extends Component {
  }

  handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
  }

  async handleOrgDelete () {
    const { selected } = this.state;

-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
    try {
      await Promise.all(selected.map((org) => OrganizationsAPI.destroy(org.id)));
    } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
    } finally {
      await this.loadOrganizations();
    }
@ -108,7 +109,7 @@ class OrganizationsList extends Component {
      optionsPromise,
    ]);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const [{ data: { count, results } }, { data: { actions } }] = await promises;
      this.setState({
@ -118,7 +119,7 @@ class OrganizationsList extends Component {
        selected: [],
      });
    } catch (err) {
-      this.setState(({ hasContentError: true }));
+      this.setState(({ contentError: err }));
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -131,9 +132,9 @@ class OrganizationsList extends Component {
    const {
      actions,
      itemCount,
-      hasContentError,
+      contentError,
      hasContentLoading,
-      hasDeletionError,
+      deletionError,
      selected,
      organizations,
    } = this.state;
@ -147,7 +148,7 @@ class OrganizationsList extends Component {
        <PageSection variant={medium}>
          <Card>
            <PaginatedDataList
-              hasContentError={hasContentError}
+              contentError={contentError}
              hasContentLoading={hasContentLoading}
              items={organizations}
              itemCount={itemCount}
@ -194,12 +195,13 @@ class OrganizationsList extends Component {
          </Card>
        </PageSection>
        <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more organizations.`)}
+          <ErrorDetail error={deletionError} />
        </AlertModal>
      </Fragment>
    );
--- a/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
+++ b/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
@ -60,6 +60,20 @@ const mockAPIOrgsList = {
 describe('<OrganizationsList />', () => {
  let wrapper;

+  beforeEach(() => {
+    OrganizationsAPI.read = () => Promise.resolve({
+      data: {
+        count: 0,
+        results: []
+      }
+    });
+    OrganizationsAPI.readOptions = () => Promise.resolve({
+      data: {
+        actions: []
+      }
+    });
+  });
+
  test('initially renders succesfully', () => {
    mountWithContexts(<OrganizationsList />);
  });
@ -122,8 +136,17 @@ describe('<OrganizationsList />', () => {
    expect(fetchOrgs).toBeCalled();
  });

-  test('error is shown when org not successfully deleted from api', async () => {
-    OrganizationsAPI.destroy = () => Promise.reject();
+  test('error is shown when org not successfully deleted from api', async (done) => {
+    OrganizationsAPI.destroy.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'delete',
+          url: '/api/v2/organizations/1'
+        },
+        data: 'An error occurred'
+      }
+    }));
+
    wrapper = mountWithContexts(<OrganizationsList />);
    wrapper.find('OrganizationsList').setState({
      organizations: mockAPIOrgsList.data.results,
@ -133,5 +156,6 @@ describe('<OrganizationsList />', () => {
    });
    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
    await waitForElement(wrapper, 'Modal', (el) => el.props().isOpen === true && el.props().title === 'Error!');
+    done();
  });
 });
--- a/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
+++ b/src/screens/Organization/OrganizationNotifications/OrganizationNotifications.jsx
@ -6,6 +6,7 @@ import { t } from '@lingui/macro';

 import { OrganizationsAPI } from '@api';
 import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
 import NotificationListItem from '@components/NotificationsList/NotificationListItem';
 import PaginatedDataList from '@components/PaginatedDataList';
 import { getQSConfig, parseNamespacedQueryString } from '@util/qs';
@ -26,9 +27,9 @@ class OrganizationNotifications extends Component {
  constructor (props) {
    super(props);
    this.state = {
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
-      toggleError: false,
+      toggleError: null,
      toggleLoading: false,
      itemCount: 0,
      notifications: [],
@ -55,7 +56,7 @@ class OrganizationNotifications extends Component {
    const { id, location } = this.props;
    const params = parseNamespacedQueryString(QS_CONFIG, location.search);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const {
        data: {
@ -85,8 +86,8 @@ class OrganizationNotifications extends Component {
        successTemplateIds: successTemplates.results.map(s => s.id),
        errorTemplateIds: errorTemplates.results.map(e => e.id),
      });
-    } catch {
-      this.setState({ hasContentError: true });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -125,20 +126,20 @@ class OrganizationNotifications extends Component {
      );
      this.setState(stateUpdateFunction);
    } catch (err) {
-      this.setState({ toggleError: true });
+      this.setState({ toggleError: err });
    } finally {
      this.setState({ toggleLoading: false });
    }
  }

  handleNotificationErrorClose () {
-    this.setState({ toggleError: false });
+    this.setState({ toggleError: null });
  }

  render () {
    const { canToggleNotifications, i18n } = this.props;
    const {
-      hasContentError,
+      contentError,
      hasContentLoading,
      toggleError,
      toggleLoading,
@ -151,7 +152,7 @@ class OrganizationNotifications extends Component {
    return (
      <Fragment>
        <PaginatedDataList
-          hasContentError={hasContentError}
+          contentError={contentError}
          hasContentLoading={hasContentLoading}
          items={notifications}
          itemCount={itemCount}
@ -171,12 +172,13 @@ class OrganizationNotifications extends Component {
          )}
        />
        <AlertModal
+          isOpen={toggleError}
          variant="danger"
          title={i18n._(t`Error!`)}
-          isOpen={toggleError && !toggleLoading}
          onClose={this.handleNotificationErrorClose}
        >
          {i18n._(t`Failed to toggle notification.`)}
+          <ErrorDetail error={toggleError} />
        </AlertModal>
      </Fragment>
    );
--- a/src/screens/Organization/OrganizationNotifications/snapshots/OrganizationNotifications.test.jsx.snap
+++ b/src/screens/Organization/OrganizationNotifications/snapshots/OrganizationNotifications.test.jsx.snap
@ -39,7 +39,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
            }
          >
            <WithI18n
-              hasContentError={false}
+              contentError={null}
              hasContentLoading={false}
              itemCount={2}
              itemName="notification"
@ -101,7 +101,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                withHash={true}
              >
                <withRouter(PaginatedDataList)
-                  hasContentError={false}
+                  contentError={null}
                  hasContentLoading={false}
                  i18n={"/i18n/"}
                  itemCount={2}
@ -161,7 +161,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                >
                  <Route>
                    <PaginatedDataList
-                      hasContentError={false}
+                      contentError={null}
                      hasContentLoading={false}
                      history={"/history/"}
                      i18n={"/i18n/"}
@ -3295,7 +3295,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
              </I18n>
            </WithI18n>
            <_default
-              isOpen={false}
+              isOpen={null}
              onClose={[Function]}
              title="Error!"
              variant="danger"
--- a/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
+++ b/src/screens/Organization/OrganizationTeams/OrganizationTeams.jsx
@ -19,7 +19,7 @@ class OrganizationTeams extends React.Component {
    this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);

    this.state = {
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
      itemCount: 0,
      teams: [],
@ -41,7 +41,7 @@ class OrganizationTeams extends React.Component {
    const { id, location } = this.props;
    const params = parseNamespacedQueryString(QS_CONFIG, location.search);

-    this.setState({ hasContentLoading: true, hasContentError: false });
+    this.setState({ hasContentLoading: true, contentError: null });
    try {
      const {
        data: { count = 0, results = [] },
@ -50,18 +50,18 @@ class OrganizationTeams extends React.Component {
        itemCount: count,
        teams: results,
      });
-    } catch {
-      this.setState({ hasContentError: true });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
  }

  render () {
-    const { hasContentError, hasContentLoading, teams, itemCount } = this.state;
+    const { contentError, hasContentLoading, teams, itemCount } = this.state;
    return (
      <PaginatedDataList
-        hasContentError={hasContentError}
+        contentError={contentError}
        hasContentLoading={hasContentLoading}
        items={teams}
        itemCount={itemCount}
--- a/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@ -24,7 +24,7 @@ class JobTemplateDetail extends Component {
  constructor (props) {
    super(props);
    this.state = {
-      contentError: false,
+      contentError: null,
      hasContentLoading: true,
      instanceGroups: []
    };
@ -40,8 +40,8 @@ class JobTemplateDetail extends Component {
    try {
      const { data } = await JobTemplatesAPI.readInstanceGroups(match.params.id);
      this.setState({ instanceGroups: [...data.results] });
-    } catch {
-      this.setState({ contentError: true });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -131,7 +131,7 @@ class JobTemplateDetail extends Component {
    );

    if (contentError) {
-      return (<ContentError />);
+      return (<ContentError error={contentError} />);
    }

    if (hasContentLoading) {
--- a/src/screens/Template/Template.jsx
+++ b/src/screens/Template/Template.jsx
@ -24,7 +24,7 @@ class Template extends Component {
    super(props);

    this.state = {
-      hasContentError: false,
+      contentError: null,
      hasContentLoading: true,
      template: null,
    };
@ -46,15 +46,13 @@ class Template extends Component {
    const { setBreadcrumb, match } = this.props;
    const { id } = match.params;

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const { data } = await JobTemplatesAPI.readDetail(id);
      setBreadcrumb(data);
-      this.setState({
-        template: data,
-      });
-    } catch {
-      this.setState({ hasContentError: true });
+      this.setState({ template: data });
+    } catch (err) {
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -68,7 +66,7 @@ class Template extends Component {
      match,
    } = this.props;
    const {
-      hasContentError,
+      contentError,
      hasContentLoading,
      template
    } = this.state;
@ -98,11 +96,11 @@ class Template extends Component {
      cardHeader = null;
    }

-    if (!hasContentLoading && hasContentError) {
+    if (!hasContentLoading && contentError) {
      return (
        <PageSection>
          <Card className="awx-c-card">
-            <ContentError />
+            <ContentError error={contentError} />
          </Card>
        </PageSection>
      );
--- a/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/src/screens/Template/TemplateList/TemplateList.jsx
@ -15,6 +15,7 @@ import {
 } from '@api';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
+import ErrorDetail from '@components/ErrorDetail';
 import PaginatedDataList, {
  ToolbarDeleteButton
 } from '@components/PaginatedDataList';
@ -37,8 +38,8 @@ class TemplatesList extends Component {

    this.state = {
      hasContentLoading: true,
-      hasContentError: false,
-      hasDeletionError: false,
+      contentError: null,
+      deletionError: null,
      selected: [],
      templates: [],
      itemCount: 0,
@ -62,7 +63,7 @@ class TemplatesList extends Component {
  }

  handleDeleteErrorClose () {
-    this.setState({ hasDeletionError: false });
+    this.setState({ deletionError: null });
  }

  handleSelectAll (isSelected) {
@ -83,7 +84,7 @@ class TemplatesList extends Component {
  async handleTemplateDelete () {
    const { selected } = this.state;

-    this.setState({ hasContentLoading: true, hasDeletionError: false });
+    this.setState({ hasContentLoading: true });
    try {
      await Promise.all(selected.map(({ type, id }) => {
        let deletePromise;
@ -95,7 +96,7 @@ class TemplatesList extends Component {
        return deletePromise;
      }));
    } catch (err) {
-      this.setState({ hasDeletionError: true });
+      this.setState({ deletionError: err });
    } finally {
      await this.loadTemplates();
    }
@ -105,7 +106,7 @@ class TemplatesList extends Component {
    const { location } = this.props;
    const params = parseNamespacedQueryString(QS_CONFIG, location.search);

-    this.setState({ hasContentError: false, hasContentLoading: true });
+    this.setState({ contentError: null, hasContentLoading: true });
    try {
      const { data: { count, results } } = await UnifiedJobTemplatesAPI.read(params);
      this.setState({
@ -114,7 +115,7 @@ class TemplatesList extends Component {
        selected: [],
      });
    } catch (err) {
-      this.setState({ hasContentError: true });
+      this.setState({ contentError: err });
    } finally {
      this.setState({ hasContentLoading: false });
    }
@ -122,9 +123,9 @@ class TemplatesList extends Component {

  render () {
    const {
-      hasContentError,
+      contentError,
      hasContentLoading,
-      hasDeletionError,
+      deletionError,
      templates,
      itemCount,
      selected,
@ -139,7 +140,7 @@ class TemplatesList extends Component {
      <PageSection variant={medium}>
        <Card>
          <PaginatedDataList
-            hasContentError={hasContentError}
+            error={contentError}
            hasContentLoading={hasContentLoading}
            items={templates}
            itemCount={itemCount}
@ -180,12 +181,13 @@ class TemplatesList extends Component {
          />
        </Card>
        <AlertModal
-          isOpen={hasDeletionError}
+          isOpen={deletionError}
          variant="danger"
          title={i18n._(t`Error!`)}
          onClose={this.handleDeleteErrorClose}
        >
          {i18n._(t`Failed to delete one or more template.`)}
+          <ErrorDetail error={deletionError} />
        </AlertModal>
      </PageSection>
    );
--- a/src/screens/Template/TemplateList/TemplatesList.test.jsx
+++ b/src/screens/Template/TemplateList/TemplatesList.test.jsx
@ -151,7 +151,15 @@ describe('<TemplatesList />', () => {
  });

  test('error is shown when template not successfully deleted from api', async () => {
-    JobTemplatesAPI.destroy = () => Promise.reject();
+    JobTemplatesAPI.destroy.mockRejectedValue(new Error({
+      response: {
+        config: {
+          method: 'delete',
+          url: '/api/v2/job_templates/1'
+        },
+        data: 'An error occurred'
+      }
+    }));
    const wrapper = mountWithContexts(<TemplatesList />);
    wrapper.find('TemplatesList').setState({
      templates: mockTemplates,