Reporting-Client-Errors.md

👈 Return to Overview

Reporting Client Errors

errorReporting Duck

one-app includes the errorReporting duck from one-app-ducks which will log any errors reported by dispatching the addErrorToReport action. This provides your modules with a simple and efficient way to report errors from the client.

When addErrorToReport is dispatched during SSR, the errorReporting duck will log the reported error to console.error. If dispatched on the client addErrorToReport will result in the error being POSTed to the reportingUrl configured by the ONE_CLIENT_REPORTING_URL URL.

ONE_CLIENT_REPORTING_URL defaults to /_/report/errors in development but it will need to be set in production.

When errors are reported to /_/report/errors, one-app will format and log them through console.error. Every error will be named ClientReportedError and will include any additional data under metaData.

Please note that when running in development one-app does not log the ClientReportedError.

Example using React Error Boundary

addErrorToReport accepts two arguments:

Argument	Type	Description
error	Object	(required) This is the error stack
otherData	Object	This is any other data that you'd like to send alongside the error message

Below is an example of how you could dispatch the addErrorToReport action in an error boundary component:

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addErrorToReport } from '@americanexpress/one-app-ducks';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { error };
  }

  componentDidCatch(error) {
    const { dispatch } = this.props;
    dispatch(
      addErrorToReport(error, {
        // example otherData
        errorReportedBy: 'ErrorBoundary',
      })
    );
  }

  render() {
    const {
      state: { error },
      props: { children },
    } = this;

    if (error) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return (
      <div>
        <h1>Error Boundary</h1>
        {children}
      </div>
    );
  }
}

ErrorBoundary.propTypes = {
  children: PropTypes.node,
  dispatch: PropTypes.func.isRequired,
};

export default connect()(ErrorBoundary);

Read more about error boundaries on the React website.

☝️ Return To Top