How to use react-error-boundary - 5 common examples

Component: React.ComponentType;
  data?: object;
};

const Plugin: React.FC = ({ id, Component, data }) => {
  // Plugin API this
  const api = useApi(id);
  const props: API = {
    ...api,
    data,
  };

  return ;
};

export default withErrorBoundary(Plugin, Crashed, captureException);

function useApi(id: string) {
  const dispatch = useDispatch();

  // Cache
  const cache = useSelector(state => state.cache[id]);
  const boundSetCache = React.useCallback(
    (cache: object) => dispatch(setCache(id, cache)),
    [dispatch, id],
  );

  // Data
  const boundSetData = React.useCallback(
    (data: object) => dispatch(setData(id, data)),
    [dispatch, id],
  );

import Crashed from './Crashed';
import { useApi } from '../../utils/useApi';

type Props = {
  id: string;
  Component: React.ComponentType>;
};

const Plugin: FC = ({ id, Component }) => {
  // Create plugin API
  const api = useApi(id);

  return ;
};

export default withErrorBoundary(Plugin, Crashed, captureException);

const pageWrapper = (Page, toTitle = R.F) => {
  const title = R.pipe(
    toTitle,
    R.unless(R.is(String), R.always('')),
    R.trim,
    capitalize,
  )
  const locationToProps = R.pipe(
    R.converge(R.merge, [R.prop('payload'), R.pick(['pathname'])]),
    R.converge(R.assoc('pageTitle'), [title, R.identity]),
  )
  return [withErrorBoundary(Page, undefined, onError), locationToProps]
}

const {localConfigLoaded} = require('../../actions/localConfig');
const {loadPrintCapabilities} = require('../../actions/print');

const ConfigUtils = require('../../utils/ConfigUtils');
const LocaleUtils = require('../../utils/LocaleUtils');
const PluginsUtils = require('../../utils/PluginsUtils');

const assign = require('object-assign');
const url = require('url');
const {isObject, isArray} = require('lodash');

const urlQuery = url.parse(window.location.href, true).query;

require('./appPolyfill');

const ErrorBoundary = require('react-error-boundary').default;

/**
 * Standard MapStore2 application component
 *
 * @name  StandardApp
 * @memberof components.app
 * @prop {function} appStore store creator function
 * @prop {object} pluginsDef plugins definition object (e.g. as loaded from plugins.js)
 * @prop {object} storeOpts options for the store
 * @prop {array} initialActions list of actions to be dispatched on startup
 * @prop {function|object} appComponent root component for the application
 * @prop {bool} printingEnabled initializes printing environment based on mapfish-print
 * @prop {function} onStoreInit optional callback called just after store creation
 * @prop {function} onInit optional callback called before first rendering, can delay first rendering
 * to do custom initialization (e.g. force SSO login)
 * @prop {string} mode current application mode (e.g. desktop/mobile) drives plugins loaded from localConfig

export const useErrorHandler = (
  error: unknown,
  { defaultError }: { defaultError: Error }
): void => {
  const handler = useReactErrorHandler()

  useEffect(() => {
    if (!error) {
      return
    }

    if (error instanceof Error) {
      Bugsnag.notify(error)

      handler(new HandledError(defaultError.message))
    } else if (error instanceof Response) {
      error
        .clone()
        .json()
        .then((res: { error: APIError }) => {
          handler(new HandledError(res.error.message))