OV-7: error handling

frontend/src/bundles/common/helpers/helpers.ts

@@ -1 +1,2 @@
+export { stringToReactNode } from './string-to-react-node.js';
 export { configureString } from 'shared';

frontend/src/bundles/common/helpers/string-to-react-node.tsx

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+
+const stringToReactNode = (message: string): ReactNode => {
+    return message.split('\n').map((line, index) => (
+        <div key={index} style={{ whiteSpace: 'pre-wrap' }}>
+            {line}
+        </div>
+    ));
+};
+
+export { stringToReactNode };

frontend/src/bundles/common/middlewares/error-handling.middleware.ts

@@ -0,0 +1,47 @@
+import { createStandaloneToast } from '@chakra-ui/react';
+import {
+    type Middleware,
+    isRejected,
+    isRejectedWithValue,
+} from '@reduxjs/toolkit';
+import { type ServerValidationErrorResponse } from 'shared';
+
+import { theme } from '~/framework/theme/theme.js';
+
+import { stringToReactNode } from '../helpers/helpers.js';
+
+const { toast } = createStandaloneToast({ theme: theme });
+const toastId = 'redux-store-error';
+
+const errorMiddleware: Middleware = () => {
+    return (next) => (action) => {
+        let message: string = '';
+        if (isRejectedWithValue(action)) {
+            message += JSON.stringify(action.payload);
+        } else if (isRejected(action)) {
+            const error = action.error as ServerValidationErrorResponse;
+            message += `${error.message}\n`;
+            if (error.details) {
+                for (const errorDetail of error.details) {
+                    message += `\t- ${errorDetail.message}\n`;
+                }
+            }
+        }
+
+        if (message !== '' && !toast.isActive(toastId)) {
+            toast({
+                id: toastId,
+                title: 'An error occurred.',
+                description: stringToReactNode(message),
+                status: 'error',
+                duration: 7000,
+                isClosable: true,
+                position: 'top-right',
+            });
+        }
+
+        return next(action);
+    };
+};
+
+export { errorMiddleware };

frontend/src/bundles/common/middlewares/middlewares.ts

@@ -0,0 +1 @@
+export { errorMiddleware } from './error-handling.middleware.js';

frontend/src/framework/store/store.package.ts

@@ -12,6 +12,8 @@ import { reducer as usersReducer } from '~/bundles/users/store/users.js';
 import { userApi } from '~/bundles/users/users.js';
 import { type Config } from '~/framework/config/config.js';
 
+import { errorMiddleware } from '../../bundles/common/middlewares/error-handling.middleware.js';
+
 type RootReducer = {
     auth: ReturnType<typeof authReducer>;
     users: ReturnType<typeof usersReducer>;
@@ -39,11 +41,12 @@ class Store {
                 users: usersReducer,
             },
             middleware: (getDefaultMiddleware) => {
-                return getDefaultMiddleware({
+                const middlewares = getDefaultMiddleware({
                     thunk: {
                         extraArgument: this.extraArguments,
                     },
                 });
+                return [...middlewares, errorMiddleware] as Tuple;
             },
         });
     }