react-transform-catch-errors/src/index.js

React Transform that catches errors inside React components

export default function catchErrors({ filename, components, imports }) {
  const [React, ErrorReporter, reporterOptions] = imports;

  if (!React || !React.Component) {
    throw new Error('imports[0] for react-transform-catch-errors does not look like React.');
  }
  if (typeof ErrorReporter !== 'function') {
    throw new Error('imports[1] for react-transform-catch-errors does not look like a React component.');
  }

  return function wrapToCatchErrors(ReactClass, componentId) {
    const originalRender = ReactClass.prototype.render;

    ReactClass.prototype.render = function tryRender() {
      try {
        return originalRender.apply(this, arguments);
      } catch (err) {
        setTimeout(() => {
          if (typeof console.reportErrorsAsExceptions !== 'undefined') {
            let prevReportErrorAsExceptions = console.reportErrorsAsExceptions;
            // We're in React Native. Don't throw.
            // Stop react-native from triggering its own error handler
            console.reportErrorsAsExceptions = false;
            // Log an error
            console.error(err);
            // Reactivate it so other errors are still handled
            console.reportErrorsAsExceptions = prevReportErrorAsExceptions;
          } else {
            throw err;
          }
        });

        return React.createElement(ErrorReporter, {
          error: err,
          filename,
          ...reporterOptions
        });
      }
    };

    return ReactClass;
  };
}