Task/ime-329 generic error

CHANGELOG.md

@@ -1,4 +1,6 @@
 # Changelog: [mojaloop/reporting-hub-bop-trx-ui](https://github.com/mojaloop/reporting-hub-bop-trx-ui)
+### Features
+
 ### [1.7.4](https://github.com/mojaloop/reporting-hub-bop-trx-ui/compare/v1.7.3...v1.7.4) (2024-12-24)
 
 ### [1.7.3](https://github.com/mojaloop/reporting-hub-bop-trx-ui/compare/v1.7.2...v1.7.3) (2024-10-25)

src/App/Transfers/Dashboard/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import { Component, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  onError: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  isForbidden: boolean;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, isForbidden: false };
+  }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true, isForbidden: false };
+  }
+
+  componentDidCatch(error: any): void {
+    // Check for 403 error
+    const status = error?.response?.status || error?.networkError?.statusCode;
+    if (status === 403) {
+      this.setState({ isForbidden: true });
+      this.props.onError();
+    }
+  }
+
+  render() {
+    if (this.state.hasError && this.state.isForbidden) {
+      return null; // Do not render anything if a 403 error occurs
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/App/Transfers/Dashboard/ErrorMessage.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { MessageBox } from 'components';
+
+interface ErrorMessageProps {
+  message: string;
+}
+
+const ErrorMessage: FC<ErrorMessageProps> = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: '-8px',
+        marginBottom: '-8px',
+        marginLeft: '-16px',
+        marginRight: '-16px',
+      }}
+    >
+      <MessageBox
+        kind="default"
+        style={{
+          width: '100%',
+          textAlign: 'center',
+          marginTop: '-8px',
+          marginBottom: '-8px',
+          marginLeft: '-16px',
+          marginRight: '-16px',
+        }}
+      >
+        <p style={{ fontSize: '14px', fontWeight: 'bold' }}>Restricted Access</p>
+      </MessageBox>
+    </div>
+  );
+};
+
+export default ErrorMessage;

src/App/Transfers/Dashboard/ErrorSummary.tsx

@@ -25,9 +25,10 @@ const dispatchProps = (dispatch: Dispatch) => ({
 interface ConnectorProps {
   filtersModel: TransfersFilter;
   onFilterChange: (field: string, value: FilterChangeValue | string) => void;
+  onError: (component: string, error: any) => void;
 }
 
-const ErrorSummary: FC<ConnectorProps> = ({ filtersModel }) => {
+const ErrorSummary: FC<ConnectorProps> = ({ filtersModel, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -39,7 +40,14 @@ const ErrorSummary: FC<ConnectorProps> = ({ filtersModel }) => {
   let content = null;
 
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+    onError('ErrorSummaryChart', error);
+    const isForbidden = status === 403;
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {

src/App/Transfers/Dashboard/ErrorsByErrorCodeChart.tsx

@@ -18,9 +18,10 @@ const dispatchProps = () => ({});
 
 interface ConnectorProps {
   filtersModel: TransfersFilter;
+  onError: (component: string, error: any) => void;
 }
 
-const ByCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
+const ErrorsByErrorCodeChart: FC<ConnectorProps> = ({ filtersModel, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -42,7 +43,16 @@ const ByCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
   let content = null;
 
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    // Check if the error is a 403
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+
+    const isForbidden = status === 403;
+    onError('ErrorsByErrorCodeChart', error);
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {
@@ -104,4 +114,6 @@ const ByCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
   return content;
 };
 
-export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(ByCurrencyChart);
+export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(
+  ErrorsByErrorCodeChart,
+);

src/App/Transfers/Dashboard/ErrorsByPayeeChart.tsx

@@ -24,9 +24,10 @@ const dispatchProps = (dispatch: Dispatch) => ({
 interface ConnectorProps {
   filtersModel: TransfersFilter;
   onFilterChange: (field: string, value: FilterChangeValue | string) => void;
+  onError: (component: string, error: any) => void;
 }
 
-const ByPayeeChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
+const ErrorsByPayeeChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY_BY_PAYEE, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -47,7 +48,15 @@ const ByPayeeChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
 
   let content = null;
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+    const isForbidden = status === 403;
+    onError('ErrorsByPayeeChart', error);
+
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {
@@ -114,7 +123,10 @@ const ByPayeeChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
       </PieChart>
     );
   }
+
   return content;
 };
 
-export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(ByPayeeChart);
+export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(
+  ErrorsByPayeeChart,
+);

src/App/Transfers/Dashboard/ErrorsByPayerChart.tsx

@@ -24,9 +24,10 @@ const dispatchProps = (dispatch: Dispatch) => ({
 interface ConnectorProps {
   filtersModel: TransfersFilter;
   onFilterChange: (field: string, value: FilterChangeValue | string) => void;
+  onError: (component: string, error: any) => void;
 }
 
-const ByPayerChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
+const ErrorsByPayerChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY_BY_PAYER, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -46,8 +47,17 @@ const ByPayerChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
   };
 
   let content = null;
+  // Check if the Error is a 403
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+    const isForbidden = status === 403;
+    onError('ErrorsByPayerChart', error);
+
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {
@@ -114,7 +124,10 @@ const ByPayerChart: FC<ConnectorProps> = ({ filtersModel, onFilterChange }) => {
       </PieChart>
     );
   }
+
   return content;
 };
 
-export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(ByPayerChart);
+export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(
+  ErrorsByPayerChart,
+);

src/App/Transfers/Dashboard/ErrorsBySourceCurrencyChart.tsx

@@ -14,10 +14,13 @@ const stateProps = (state: State) => ({
   filtersModel: selectors.getTransfersFilter(state),
 });
 const dispatchProps = () => ({});
+
 interface ConnectorProps {
   filtersModel: TransfersFilter;
+  onError: (component: string, error: any) => void;
 }
-const BySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
+
+const ErrorsBySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -32,9 +35,18 @@ const BySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
   const onPieLeave = () => {
     setActiveIndex(undefined);
   };
+
   let content = null;
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+
+    const isForbidden = status === 403;
+    onError('ErrorsBySourceCurrencyChart', error);
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {
@@ -91,5 +103,5 @@ const BySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
   return content;
 };
 export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(
-  BySourceCurrencyChart,
+  ErrorsBySourceCurrencyChart,
 );

src/App/Transfers/Dashboard/ErrorsByTargetCurrencyChart.tsx

@@ -13,29 +13,44 @@ import { RED_CHART_GRADIENT_COLORS, renderActiveShape, renderRedLegend } from '.
 const stateProps = (state: State) => ({
   filtersModel: selectors.getTransfersFilter(state),
 });
+
 const dispatchProps = () => ({});
+
 interface ConnectorProps {
   filtersModel: TransfersFilter;
+  onError: (component: string, error: any) => void;
 }
-const BySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
+
+const ErrorsByTargetCurrencyChart: FC<ConnectorProps> = ({ filtersModel, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY, {
     fetchPolicy: 'no-cache',
     variables: {
       startDate: filtersModel.from,
       endDate: filtersModel.to,
     },
   });
+
   const [activeIndex, setActiveIndex] = useState<number>();
   const onPieEnter = (_: any, index: number) => {
     setActiveIndex(index);
   };
+
   const onPieLeave = () => {
     setActiveIndex(undefined);
   };
   let content = null;
   if (error) {
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
-  } else if (loading) {
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+    const isForbidden = status === 403;
+    onError('ErrorsByTargetCurrencyChart', error);
+
+    return (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
+  }
+  if (loading) {
     content = <Spinner center />;
   } else {
     const summary = data.transferSummary
@@ -92,5 +107,5 @@ const BySourceCurrencyChart: FC<ConnectorProps> = ({ filtersModel }) => {
 };
 
 export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(
-  BySourceCurrencyChart,
+  ErrorsByTargetCurrencyChart,
 );

src/App/Transfers/Dashboard/TransferTotalSummary.tsx

@@ -6,8 +6,7 @@ import { MessageBox, Spinner } from 'components';
 import { useQuery } from '@apollo/client';
 import { TransferSummary } from 'apollo/types';
 import { Statistic, Typography } from 'antd';
-import { useRouteMatch, useHistory } from 'react-router-dom';
-import { ErrorMessage, FilterChangeValue, TransfersFilter } from '../types';
+import { FilterChangeValue, TransfersFilter } from '../types';
 import { actions } from '../slice';
 import * as selectors from '../selectors';
 
@@ -25,9 +24,10 @@ const dispatchProps = (dispatch: Dispatch) => ({
 interface ConnectorProps {
   filtersModel: TransfersFilter;
   onFilterChange: (field: string, value: FilterChangeValue | string) => void;
+  onError: (component: string, error: any) => void;
 }
 
-const TransferTotalSummary: FC<ConnectorProps> = ({ filtersModel }) => {
+const TransferTotalSummary: FC<ConnectorProps> = ({ filtersModel, onError }) => {
   const { loading, error, data } = useQuery(GET_TRANSFER_SUMMARY, {
     fetchPolicy: 'no-cache',
     variables: {
@@ -37,13 +37,15 @@ const TransferTotalSummary: FC<ConnectorProps> = ({ filtersModel }) => {
   });
   let content = null;
   if (error) {
-    if (error.message === ErrorMessage.NOT_ALLOWED) {
-      const match = useRouteMatch();
-      const history = useHistory();
-      const path = match.url === '/' ? '' : match.url;
-      history.push(`${path}/403`);
-    }
-    content = <MessageBox kind="danger">Error fetching transfers: {error.message}</MessageBox>;
+    const status = (error.networkError as { statusCode?: number })?.statusCode;
+
+    const isForbidden = status === 403;
+    onError('TransferTotalSummary', error);
+    content = (
+      <MessageBox kind={isForbidden ? 'default' : 'danger'}>
+        {isForbidden ? 'Restricted Access' : `Error fetching transfers: ${error.message}`}
+      </MessageBox>
+    );
   } else if (loading) {
     content = <Spinner center />;
   } else {