react + react native(Expo)でエラーハンドリングどうやる？

import React, { Component } from 'react'
import * as Sentry from '@sentry/browser'

interface Props {}

interface State {
  eventId?: string
  hasError: boolean
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { eventId: '', hasError: false }
  }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error: Error, errorInfo: {}) {
    Sentry.withScope(scope => {
      scope.setExtras(errorInfo)
      const eventId = Sentry.captureException(error)
      this.setState({ eventId })
    })
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>エラー発生した旨をここに記述<div/>
      )
    }
    return this.props.children
  }
}

export default ErrorBoundary

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../state/store';
import Routes from './Routes';
import ErrorBoundary from '../libraries/ErrorBoundary';
import * as Sentry from '@sentry/browser';

const store = configureStore();
Sentry.init({ dsn: process.env.REACT_APP_SENTRY_DSN });

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <Provider store={store}>
        <Routes />
      </Provider>
    </ErrorBoundary>
  );
};

Sentry.withScope(scope => {
  scope.setExtras(errorInfo);
  const eventId = Sentry.captureException(error);
  this.setState({ eventId });
});

import Constants from 'expo-constants';

Sentry.setRelease(Constants.manifest.revisionId || 'development');
Sentry.init({
  dsn: Constants.manifest.extra.sentryDSN,
  enableInExpoDevelopment: true,
  debug: true
});

import { ErrorInterceptionAction, SuccessInterceptionAction } from './actions';

interface HTTPError {
  // status code
  status: number;
  // エラーコードごとにエラーのタイプが別れる。内部エラーと外部エラーの定義をここで判別する
  code: ErrorCodeEnum;
  // error messages
  errors: Array<string>;
}

const handleHttpError = (error: HTTPError) => {
  return {
    type: ActionTypes.HANDLE_HTTP_ERROR,
    error
  };
};

const authFailure = (error: HTTPError) => {
  return {
    type: ActionTypes.AUTH_FAILURE,
    error
  };
};

const authExpired = () => {
  return {
    type: ActionTypes.AUTH_EXPIRED
  };
};
const internalServerError = (error: HTTPError) => {
  return {
    type: ActionTypes.INTERNAL_SERVER_ERROR,
    error
  };
};

type ErrorInterceptionAction = ReturnType<typeof handleHttpError> &
  ReturnType<typeof authFailure> &
  ReturnType<typeof authExpired> &
  ReturnType<typeof internalServerError> &
  ReturnType<typeof resetError>;

interface HttpErrorInterceptionState {
  error: Error | null;
}

const initialHttpErrorInterceptionState: HttpErrorInterceptionState = {
  error: null
};

const errorInterception = (
  state: HttpErrorInterceptionState = initialHttpErrorInterceptionState,
  action: ErrorInterceptionAction
): HttpErrorInterceptionState => {
  switch (action.type) {
    case ActionTypes.AUTH_FAILURE: {
      return {
        ...state,
        error: new Error(action.error.errors.join('\n'))
      };
    }
    case ActionTypes.INTERNAL_SERVER_ERROR: {
      return {
        ...state,
        error: new Error(action.error.errors.join('\n'))
      };
    }
    case ActionTypes.AUTH_EXPIRED: {
      return { ...state, error: new Error(action.error.errors.join('\n')) };
    }
    case ActionTypes.RESET_ERROR: {
      return { ...state, error: null };
    }
    // ...
    default: {
      return { ...state };
    }
  }
};

import { put, takeEvery } from 'redux-saga/effects';
import { default as actions, ErrorInterceptionAction } from './actions';
import { ErrorCodeEnum } from 'api';
import { ActionTypes } from './types';

function* handleHttpError(action: ErrorInterceptionAction) {
  switch (action.error.code) {
    case ErrorCodeEnum.AuthenticationFailure: {
      yield put(actions.authFailure(action.error));
      yield put(actions.resetError());
      return;
    }
    case ErrorCodeEnum.InternalServerError: {
      yield put(actions.internalServerError(action.error));
      yield put(actions.resetError());
      return;
    }
    case ErrorCodeEnum.AuthenticationExpired: {
      yield put(actions.authExpired());
      yield put(actions.resetError());
      return;
    }
  }
}
const sagas = [takeEvery(ActionTypes.HANDLE_HTTP_ERROR, handleHttpError)];
export default sagas;

function* getTodo(action: TodoAction) {
  try {
    const todo = yield call(getTodoRequest, {
      todoId: action.todoId
    });
    yield put(actions.getSuccessTask(task));
  } catch (error) {
    yield put(interceptionsActions.handleHttpError(error));
  }
}

import React, { useEffect } from 'react';
import { notification, Modal } from 'antd';

const { info } = Modal;

interface OwnProps {
  error: Error | null;
}

const ErrorNotification: React.FC<OwnProps> = (props: OwnProps) => {
  useEffect(() => {
    if (props.error !== null) {
      notification['error']({ message: props.error.message });
    }
  }, [props.error, props.isShowAuthExpired]);
  return null;
};

export default ErrorNotification;

import React from 'react';
import ErrorNotification from '../../views/components/interceptions/ErrorNotification';
import { useSelector, shallowEqual } from 'react-redux';

interface State {
  interceptionsState: {
    errorInterception: {
      error: Error
    }
  };
}

const useStateProps = () => {
  return {
    error: useSelector((state: State) => state.interceptionsState.errorInterception.error, shallowEqual)
  };
};

const ErrorNotificationContainer: React.FC = () => {
  const stateProps = useStateProps();
  return <ErrorNotification {...stateProps} />;
};

export default ErrorNotificationContainer;