From 2c5c7f4b05f01d9c55281f56ca76058a979113ad Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Sun, 8 Dec 2024 18:07:24 +0100
Subject: [PATCH 01/15] 221: Add basic error boundries

---
 frontend/package-lock.json                       | 12 ++++++++++++
 frontend/package.json                            |  3 ++-
 .../src/components/fallbacks/MainFallback.tsx    |  9 +++++++++
 .../fallbacks/RateLimitStatusFallback.tsx        | 16 ++++++++++++++++
 frontend/src/components/navbar/Navbar.tsx        | 12 +++++++-----
 frontend/src/main.tsx                            | 10 +++++++---
 6 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/fallbacks/MainFallback.tsx
 create mode 100644 frontend/src/components/fallbacks/RateLimitStatusFallback.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 45835017..66343f98 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -28,6 +28,7 @@
         "prettier": "^3.3.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-error-boundary": "^4.1.2",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.26.2",
         "recharts": "^2.13.3",
@@ -5460,6 +5461,17 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b4de7d5c..9c58e8c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,11 +31,12 @@
     "framer-motion": "^11.9.0",
     "jotai": "^2.10.0",
     "js-cookie": "^3.0.5",
-    "mantine-form-zod-resolver": "^1.1.0",
     "jwt-decode": "^4.0.0",
+    "mantine-form-zod-resolver": "^1.1.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.1.2",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.26.2",
     "recharts": "^2.13.3",
diff --git a/frontend/src/components/fallbacks/MainFallback.tsx b/frontend/src/components/fallbacks/MainFallback.tsx
new file mode 100644
index 00000000..baa57482
--- /dev/null
+++ b/frontend/src/components/fallbacks/MainFallback.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const MainFallback = () => {
+  return (
+    <div>
+      <h1>MainFallback</h1>
+    </div>
+  );
+};
diff --git a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
new file mode 100644
index 00000000..5932b9a0
--- /dev/null
+++ b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
@@ -0,0 +1,16 @@
+import { HoverCard } from '@mantine/core';
+import { IconBrandReddit } from '@tabler/icons-react';
+import React from 'react';
+
+export const RateLimitStatusFallback = () => {
+  return (
+    <HoverCard>
+      <HoverCard.Target>
+        <IconBrandReddit size={24} />
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        Error occurred while fetching rate limit status
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+};
diff --git a/frontend/src/components/navbar/Navbar.tsx b/frontend/src/components/navbar/Navbar.tsx
index 49f90af4..8d6b9e70 100644
--- a/frontend/src/components/navbar/Navbar.tsx
+++ b/frontend/src/components/navbar/Navbar.tsx
@@ -3,6 +3,8 @@ import ThemeSwitch from './ThemeSwitch';
 import { Anchor, Card, Flex, Group } from '@mantine/core';
 import StatusIndicator from './StatusIndicator';
 import RateLimitStatus from './RateLimitStatus.tsx';
+import { ErrorBoundary } from 'react-error-boundary';
+import { RateLimitStatusFallback } from '../fallbacks/RateLimitStatusFallback.tsx';
 
 const LeftNavItems = () => {
   return (
@@ -17,7 +19,9 @@ const LeftNavItems = () => {
 const RightNavItems = () => {
   return (
     <Flex gap={10} justify={'right'} align="center">
-      <RateLimitStatus />
+      <ErrorBoundary fallback={<RateLimitStatusFallback />}>
+        <RateLimitStatus />
+      </ErrorBoundary>
       <StatusIndicator />
       <ThemeSwitch />
       <UserMenu />
@@ -30,11 +34,9 @@ const RightNavItems = () => {
  */
 const Navbar = () => {
   return (
-    <Card
-      style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}
-    >
+    <Card style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}>
       <nav>
-        <Group justify='space-between'>
+        <Group justify="space-between">
           <LeftNavItems />
           <RightNavItems />
         </Group>
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 80f74ee4..f26a8c73 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -6,11 +6,15 @@ import './index.css';
 import { RouterProvider } from 'react-router-dom';
 import router from './router.tsx';
 import Providers from './providers/Providers.tsx';
+import { ErrorBoundary } from 'react-error-boundary';
+import { MainFallback } from './components/fallbacks/MainFallback.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Providers>
-      <RouterProvider router={router} />
-    </Providers>
+    <ErrorBoundary fallback={<MainFallback />}>
+      <Providers>
+        <RouterProvider router={router} />
+      </Providers>
+    </ErrorBoundary>
   </StrictMode>
 );

From 13ba9739e2b42b96344ec1880ea164a86f45acf1 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Sun, 8 Dec 2024 19:32:10 +0100
Subject: [PATCH 02/15] 221: Add basic error boundary on pages and on elements
 that require connection to other sources

---
 .../fallbacks/ProfilePictureFallback.tsx      |  25 ++
 .../components/fallbacks/UserMenuFallback.tsx |   8 +
 .../src/components/navbar/RateLimitStatus.tsx |  20 +-
 frontend/src/components/navbar/UserMenu.tsx   |  40 ++-
 frontend/src/main.tsx                         |   2 +-
 frontend/src/routes/about/page.tsx            |  40 ++-
 frontend/src/routes/dashboard/page.tsx        |  54 +--
 .../fallbacks/MainFallback.tsx                |   0
 .../src/routes/fallbacks/PageFallback.tsx     |   7 +
 frontend/src/routes/login/page.tsx            |  10 +-
 frontend/src/routes/page.tsx                  |  16 +-
 frontend/src/routes/report/page.tsx           | 340 +++++++++---------
 frontend/src/routes/settings/page.tsx         |  10 +-
 frontend/src/routes/user/ProfilePicture.tsx   |  40 ++-
 frontend/src/routes/user/page.tsx             |  90 ++---
 15 files changed, 393 insertions(+), 309 deletions(-)
 create mode 100644 frontend/src/components/fallbacks/ProfilePictureFallback.tsx
 create mode 100644 frontend/src/components/fallbacks/UserMenuFallback.tsx
 rename frontend/src/{components => routes}/fallbacks/MainFallback.tsx (100%)
 create mode 100644 frontend/src/routes/fallbacks/PageFallback.tsx

diff --git a/frontend/src/components/fallbacks/ProfilePictureFallback.tsx b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
new file mode 100644
index 00000000..5b4a98d5
--- /dev/null
+++ b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
@@ -0,0 +1,25 @@
+import { Box, Image } from '@mantine/core';
+import React from 'react';
+
+export const ProfilePictureFallback = () => {
+  return (
+    <Box
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Image
+        src={'https://placehold.co/250x250?text=PfP'}
+        alt="default profile picture"
+        w={'250px'}
+        h={'250px'}
+        fit="contain"
+        radius="50%"
+        referrerPolicy="no-referrer"
+        style={{ objectFit: 'cover', display: 'block' }}
+      />
+    </Box>
+  );
+};
diff --git a/frontend/src/components/fallbacks/UserMenuFallback.tsx b/frontend/src/components/fallbacks/UserMenuFallback.tsx
new file mode 100644
index 00000000..8314efd0
--- /dev/null
+++ b/frontend/src/components/fallbacks/UserMenuFallback.tsx
@@ -0,0 +1,8 @@
+export const UserMenuFallback = () => {
+  return (
+    // will have to get more info how to handle UserMenu from the team
+    <div>
+      <h1>UserMenuFallback</h1>
+    </div>
+  );
+};
diff --git a/frontend/src/components/navbar/RateLimitStatus.tsx b/frontend/src/components/navbar/RateLimitStatus.tsx
index 1e74a456..85841569 100644
--- a/frontend/src/components/navbar/RateLimitStatus.tsx
+++ b/frontend/src/components/navbar/RateLimitStatus.tsx
@@ -6,6 +6,8 @@ import React, { useEffect } from 'react';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import duration from 'dayjs/plugin/duration';
+import { ErrorBoundary } from 'react-error-boundary';
+import { RateLimitStatusFallback } from '../fallbacks/RateLimitStatusFallback.tsx';
 
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
@@ -114,14 +116,16 @@ const RateLimitStatus = () => {
   client.setQueryData(['remainingRequests'], query.data);
 
   return (
-    <HoverCard>
-      <HoverCard.Target>
-        <IconBrandReddit size={24} />
-      </HoverCard.Target>
-      <HoverCard.Dropdown>
-        <RateLimitHoverCard ratelimit={query.data![0]} />
-      </HoverCard.Dropdown>
-    </HoverCard>
+    <ErrorBoundary fallback={<RateLimitStatusFallback />}>
+      <HoverCard>
+        <HoverCard.Target>
+          <IconBrandReddit size={24} />
+        </HoverCard.Target>
+        <HoverCard.Dropdown>
+          <RateLimitHoverCard ratelimit={query.data![0]} />
+        </HoverCard.Dropdown>
+      </HoverCard>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index 95352140..ea47f157 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/frontend/src/components/navbar/UserMenu.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
 import { jwtDecode } from 'jwt-decode';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import { changeDefaultGoogleProfilePictureSize } from '../../utility/changeDefaultGoogleProfilePictureSize.ts';
+import { ErrorBoundary } from 'react-error-boundary';
+import { UserMenuFallback } from '../fallbacks/UserMenuFallback.tsx';
 
 /**
  * User interface representing the user data.
@@ -66,23 +68,27 @@ const UserMenu = () => {
     ? changeDefaultGoogleProfilePictureSize(user.picture, size)
     : '';
   return (
-    <Menu id="user-dropdown">
-      <Menu.Target>
-        <Avatar
-          src={resizedPicture}
-          radius="xl"
-          size={size}
-          style={{ cursor: 'pointer' }}
-          imageProps={{ referrerPolicy: 'no-referrer' }}
-        />
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
-        <Menu.Item onClick={() => navigate('/dashboard')}>Dashboard</Menu.Item>
-        <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
-        <Menu.Item onClick={() => handleLogout()}>Log out</Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
+    <ErrorBoundary fallback={<UserMenuFallback />}>
+      <Menu id="user-dropdown">
+        <Menu.Target>
+          <Avatar
+            src={resizedPicture}
+            radius="xl"
+            size={size}
+            style={{ cursor: 'pointer' }}
+            imageProps={{ referrerPolicy: 'no-referrer' }}
+          />
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
+          <Menu.Item onClick={() => navigate('/dashboard')}>
+            Dashboard
+          </Menu.Item>
+          <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
+          <Menu.Item onClick={() => handleLogout()}>Log out</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index f26a8c73..b3fa7b59 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -7,7 +7,7 @@ import { RouterProvider } from 'react-router-dom';
 import router from './router.tsx';
 import Providers from './providers/Providers.tsx';
 import { ErrorBoundary } from 'react-error-boundary';
-import { MainFallback } from './components/fallbacks/MainFallback.tsx';
+import { MainFallback } from './routes/fallbacks/MainFallback.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/frontend/src/routes/about/page.tsx b/frontend/src/routes/about/page.tsx
index ae4775de..19184a9b 100644
--- a/frontend/src/routes/about/page.tsx
+++ b/frontend/src/routes/about/page.tsx
@@ -1,5 +1,7 @@
 import Section from './Section';
 import { Box } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * About page, contains information about the project and the team.
@@ -7,37 +9,39 @@ import { Box } from '@mantine/core';
  */
 const About = () => {
   return (
-    <Box>
-      <Section
-        title="Who Are We?"
-        content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Box>
+        <Section
+          title="Who Are We?"
+          content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
                     diverse backgrounds and expertise, all united by a common goal: to leverage the power of Natural Language Processing (NLP)
                     to analyze and derive insights from Reddit data. Our project aims to understand the dynamics of online communities and the
                     interactions within them. By applying advanced NLP techniques, we strive to uncover patterns and trends that can provide
                     valuable insights into user behavior and community engagement. We believe that our work can contribute to a deeper
                     understanding of social media and its impact on society."
-      />
-      <Section
-        title="Our Story"
-        content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
+        />
+        <Section
+          title="Our Story"
+          content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
                     Inspired by the growing influence of online communities, we decided to embark on a project that could provide
                     meaningful insights into user behavior and community interactions. This inspiration drove us to form a team
                     and start our project, aiming to make a difference in the field of data analysis."
-      />
-      <Section
-        title="Meet The Team"
-        content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
+        />
+        <Section
+          title="Meet The Team"
+          content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
                     Each of us brings unique skills and perspectives to the project, making our collaboration both dynamic and effective.
                     Together, we are committed to pushing the boundaries of what is possible with NLP and data analysis."
-      />
-      <Section
-        title="Our Evolution"
-        content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
+        />
+        <Section
+          title="Our Evolution"
+          content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
                     However, each challenge has been an opportunity for growth and improvement. Our project has evolved significantly,
                     with continuous enhancements to our NLP models and data analysis techniques. Today, we are proud of the progress we have
                     made and the insights we have uncovered."
-      />
-    </Box>
+        />
+      </Box>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/routes/dashboard/page.tsx b/frontend/src/routes/dashboard/page.tsx
index ed2bdde4..a5a7376c 100644
--- a/frontend/src/routes/dashboard/page.tsx
+++ b/frontend/src/routes/dashboard/page.tsx
@@ -1,4 +1,6 @@
 import { Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * Dashboard page, gets user info asynchonously
@@ -7,51 +9,53 @@ import { Title } from '@mantine/core';
 const Dashboard = () => {
   return (
     <>
-      <Title order={1}>Dashboard</Title>
-      {/*/!* Lorem ipsum added for testing purposes*!/purposes**/}
-      {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
+      <ErrorBoundary fallback={<PageFallback />}>
+        <Title order={1}>Dashboard</Title>
+        {/*/!* Lorem ipsum added for testing purposes*!/purposes**/}
+        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
 
-      {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
+        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
 
-      {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
+        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
 
-      {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
+        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
 
-      {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
+        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
 
-      {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
+        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
 
-      {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
+        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
 
-      {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
+        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
 
-      {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
+        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
 
-      {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
-      {/*Lorem impsum added for testing purposes*/}
-      {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
+        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
+        {/*Lorem impsum added for testing purposes*/}
+        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
 
-      {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
+        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
 
-      {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
+        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
 
-      {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
+        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
 
-      {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
-      {/**/}
+        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
+        {/**/}
 
-      {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
+        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
 
-      {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
+        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
 
-      {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
+        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
 
-      {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
+        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
 
-      {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada.malesuada*/}
-      {/* <LoggedUserInfo />
+        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada.malesuada*/}
+        {/* <LoggedUserInfo />
       <DebugRedditUserInfo />
       <DebugSubredditInfo /> */}
+      </ErrorBoundary>
     </>
   );
 };
diff --git a/frontend/src/components/fallbacks/MainFallback.tsx b/frontend/src/routes/fallbacks/MainFallback.tsx
similarity index 100%
rename from frontend/src/components/fallbacks/MainFallback.tsx
rename to frontend/src/routes/fallbacks/MainFallback.tsx
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
new file mode 100644
index 00000000..31d9562a
--- /dev/null
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -0,0 +1,7 @@
+export const PageFallback = () => {
+  return (
+    <div>
+      <h1>Trouble loading the page</h1>
+    </div>
+  );
+};
diff --git a/frontend/src/routes/login/page.tsx b/frontend/src/routes/login/page.tsx
index 03fea040..9584663d 100644
--- a/frontend/src/routes/login/page.tsx
+++ b/frontend/src/routes/login/page.tsx
@@ -6,6 +6,8 @@ import { userInfoAtom } from '../../atoms';
 import { useNavigate } from 'react-router-dom';
 import { Center, Paper, Stack, Title, Box } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * Login card with Google sign in button
@@ -78,9 +80,11 @@ const LoginCard = () => {
  */
 const Login = () => {
   return (
-    <Center>
-      <LoginCard />
-    </Center>
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Center>
+        <LoginCard />
+      </Center>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/routes/page.tsx b/frontend/src/routes/page.tsx
index a2841c2b..bb842759 100644
--- a/frontend/src/routes/page.tsx
+++ b/frontend/src/routes/page.tsx
@@ -1,14 +1,18 @@
 import Demo from '../components/Demo';
 import { Center, Container, Title } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from './fallbacks/PageFallback.tsx';
 
 const Root = () => {
   return (
-    <Container>
-      <Center>
-        <Title order={1}>RMoods Demo Content</Title>
-      </Center>
-      <Demo />
-    </Container>
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Container>
+        <Center>
+          <Title order={1}>RMoods Demo Content</Title>
+        </Center>
+        <Demo />
+      </Container>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/routes/report/page.tsx b/frontend/src/routes/report/page.tsx
index cdf414ee..456395f7 100644
--- a/frontend/src/routes/report/page.tsx
+++ b/frontend/src/routes/report/page.tsx
@@ -24,6 +24,8 @@ import {
 } from './types.ts';
 import { transformJson } from './transformJson.ts';
 import { RMoodsClient } from '../../rmoods/client/RMoodsClient.ts';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * Report component for creating a new report.
@@ -100,190 +102,192 @@ const Report = () => {
   };
 
   return (
-    <Box>
-      <Title order={1}>Create Report</Title>
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Box>
+        <Title order={1}>Create Report</Title>
 
-      <form
-        onSubmit={form.onSubmit((values) => {
-          void values;
-          const validationResult = form.validate();
-          if (!validationResult.hasErrors) {
-            console.log('Form is valid');
-          } else {
-            console.log('Form is invalid');
-          }
-          const transformedValues = transformJson(
-            form.values as ReportFormValues
-          );
-          console.log(transformedValues);
+        <form
+          onSubmit={form.onSubmit((values) => {
+            void values;
+            const validationResult = form.validate();
+            if (!validationResult.hasErrors) {
+              console.log('Form is valid');
+            } else {
+              console.log('Form is invalid');
+            }
+            const transformedValues = transformJson(
+              form.values as ReportFormValues
+            );
+            console.log(transformedValues);
 
-          RMoodsClient.requestReport(transformedValues)
-            .then((res: unknown) => {
-              console.log(res);
-            })
-            .catch((err: Error) => {
-              console.error(err);
-            });
-        })}
-      >
-        <TextInput
-          label="Report Name"
-          placeholder="Enter report name"
-          {...form.getInputProps('name')}
-        />
-        <SegmentedControl
-          data={[
-            { label: 'Public', value: 'true' },
-            { label: 'Private', value: 'false' },
-          ]}
-          {...form.getInputProps('isPublic')}
-        />
-        <Radio.Group
-          name="sourceType"
-          label="Select source type"
-          {...form.getInputProps('resourceKind')}
-          onClick={() => {
-            setRows([]);
-          }}
+            RMoodsClient.requestReport(transformedValues)
+              .then((res: unknown) => {
+                console.log(res);
+              })
+              .catch((err: Error) => {
+                console.error(err);
+              });
+          })}
         >
-          <Stack>
-            <Radio value="subredditPosts" label="Subreddit Posts" />
-            <Radio value="postComments" label="Post Comments" />
-            <Radio value="userPosts" label="User Posts" />
-          </Stack>
-        </Radio.Group>
-
-        <Radio.Group
-          name="sortBy"
-          label="Sort by"
-          {...form.getInputProps('sortBy')}
-          onClick={() => {
-            setRows([]);
-          }}
-        >
-          <Stack>
-            <Radio value="hot" label="Hot" />
-            <Radio value="new" label="New" />
-            <Radio value="rising" label="Rising" />
-            <Radio value="top" label="Top" />
-            <Radio value="controversial" label="Controversial" />
-          </Stack>
-        </Radio.Group>
-
-        {form.getInputProps('sortBy').value === 'top' ||
-        form.getInputProps('sortBy').value === 'controversial' ? (
+          <TextInput
+            label="Report Name"
+            placeholder="Enter report name"
+            {...form.getInputProps('name')}
+          />
+          <SegmentedControl
+            data={[
+              { label: 'Public', value: 'true' },
+              { label: 'Private', value: 'false' },
+            ]}
+            {...form.getInputProps('isPublic')}
+          />
           <Radio.Group
-            name="time"
-            label="Select time"
-            {...form.getInputProps('time')}
+            name="sourceType"
+            label="Select source type"
+            {...form.getInputProps('resourceKind')}
             onClick={() => {
               setRows([]);
             }}
           >
             <Stack>
-              <Radio value="day" label="Day" />
-              <Radio value="week" label="Week" />
-              <Radio value="month" label="Month" />
-              <Radio value="year" label="Year" />
-              <Radio value="all" label="All" />
+              <Radio value="subredditPosts" label="Subreddit Posts" />
+              <Radio value="postComments" label="Post Comments" />
+              <Radio value="userPosts" label="User Posts" />
             </Stack>
           </Radio.Group>
-        ) : (
-          <></>
-        )}
 
-        <Box>
-          <DataSourceTable
-            form={form}
-            rows={rows}
-            setRows={setRows}
-            deleteRow={deleteRow}
-            makeRowEditHandler={makeRowEditHandler}
-          />
-        </Box>
-        {form.errors.dataSources && (
-          <Input.Error
-            style={() => ({
-              marginTop: '6px',
-            })}
+          <Radio.Group
+            name="sortBy"
+            label="Sort by"
+            {...form.getInputProps('sortBy')}
+            onClick={() => {
+              setRows([]);
+            }}
           >
-            {form.errors.dataSources}
-          </Input.Error>
-        )}
+            <Stack>
+              <Radio value="hot" label="Hot" />
+              <Radio value="new" label="New" />
+              <Radio value="rising" label="Rising" />
+              <Radio value="top" label="Top" />
+              <Radio value="controversial" label="Controversial" />
+            </Stack>
+          </Radio.Group>
 
-        <Radio.Group
-          name="size"
-          label="Select size"
-          {...form.getInputProps('size')}
-        >
-          <Stack>
-            <Radio value="30" label="Small (30)" />
-            <Radio value="70" label="Medium (70)" />
-            <Radio value="100" label="Large (100)" />
-            <Radio value="custom" label="Custom" />
-          </Stack>
-        </Radio.Group>
-        {form.values.size === 'custom' && (
-          <NumberInput
-            label="Custom Size"
-            min={0}
-            max={500}
+          {form.getInputProps('sortBy').value === 'top' ||
+          form.getInputProps('sortBy').value === 'controversial' ? (
+            <Radio.Group
+              name="time"
+              label="Select time"
+              {...form.getInputProps('time')}
+              onClick={() => {
+                setRows([]);
+              }}
+            >
+              <Stack>
+                <Radio value="day" label="Day" />
+                <Radio value="week" label="Week" />
+                <Radio value="month" label="Month" />
+                <Radio value="year" label="Year" />
+                <Radio value="all" label="All" />
+              </Stack>
+            </Radio.Group>
+          ) : (
+            <></>
+          )}
+
+          <Box>
+            <DataSourceTable
+              form={form}
+              rows={rows}
+              setRows={setRows}
+              deleteRow={deleteRow}
+              makeRowEditHandler={makeRowEditHandler}
+            />
+          </Box>
+          {form.errors.dataSources && (
+            <Input.Error
+              style={() => ({
+                marginTop: '6px',
+              })}
+            >
+              {form.errors.dataSources}
+            </Input.Error>
+          )}
+
+          <Radio.Group
+            name="size"
+            label="Select size"
             {...form.getInputProps('size')}
-          />
-        )}
-        <Title order={3}>Analyses</Title>
-        <Checkbox
-          value={form.values.analyses.language}
-          label="Language"
-          {...form.getInputProps('analyses.language', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.sentiment}
-          label="Sentiment"
-          {...form.getInputProps('analyses.sentiment', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.sarcasm}
-          label="Sarcasm"
-          {...form.getInputProps('analyses.sarcasm', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.spam}
-          label="Spam"
-          {...form.getInputProps('analyses.spam', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.politics}
-          label="Politics"
-          {...form.getInputProps('analyses.politics', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.hateSpeech}
-          label="Hate Speech"
-          {...form.getInputProps('analyses.hateSpeech', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.clickbait}
-          label="Clickbait"
-          {...form.getInputProps('analyses.clickbait', { type: 'checkbox' })}
-        />
-        <Checkbox
-          value={form.values.analyses.trolling}
-          label="Trolling"
-          {...form.getInputProps('analyses.trolling', { type: 'checkbox' })}
-        />
-        <Group justify="flex-end">
-          <Button
-            type="submit"
-            // onClick={() => {
-            //   console.log(transformJson(form.values as ReportFormValues));
-            // }}
           >
-            Create Report
-          </Button>
-        </Group>
-      </form>
-    </Box>
+            <Stack>
+              <Radio value="30" label="Small (30)" />
+              <Radio value="70" label="Medium (70)" />
+              <Radio value="100" label="Large (100)" />
+              <Radio value="custom" label="Custom" />
+            </Stack>
+          </Radio.Group>
+          {form.values.size === 'custom' && (
+            <NumberInput
+              label="Custom Size"
+              min={0}
+              max={500}
+              {...form.getInputProps('size')}
+            />
+          )}
+          <Title order={3}>Analyses</Title>
+          <Checkbox
+            value={form.values.analyses.language}
+            label="Language"
+            {...form.getInputProps('analyses.language', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.sentiment}
+            label="Sentiment"
+            {...form.getInputProps('analyses.sentiment', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.sarcasm}
+            label="Sarcasm"
+            {...form.getInputProps('analyses.sarcasm', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.spam}
+            label="Spam"
+            {...form.getInputProps('analyses.spam', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.politics}
+            label="Politics"
+            {...form.getInputProps('analyses.politics', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.hateSpeech}
+            label="Hate Speech"
+            {...form.getInputProps('analyses.hateSpeech', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.clickbait}
+            label="Clickbait"
+            {...form.getInputProps('analyses.clickbait', { type: 'checkbox' })}
+          />
+          <Checkbox
+            value={form.values.analyses.trolling}
+            label="Trolling"
+            {...form.getInputProps('analyses.trolling', { type: 'checkbox' })}
+          />
+          <Group justify="flex-end">
+            <Button
+              type="submit"
+              // onClick={() => {
+              //   console.log(transformJson(form.values as ReportFormValues));
+              // }}
+            >
+              Create Report
+            </Button>
+          </Group>
+        </form>
+      </Box>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/routes/settings/page.tsx b/frontend/src/routes/settings/page.tsx
index 771aa3fe..8ea25089 100644
--- a/frontend/src/routes/settings/page.tsx
+++ b/frontend/src/routes/settings/page.tsx
@@ -1,7 +1,13 @@
 import { Box } from '@mantine/core';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 const Settings = () => {
-  return <Box>Work in progress</Box>
+  return (
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Box>Work in progress</Box>
+    </ErrorBoundary>
+  );
 };
 
-export default Settings;
\ No newline at end of file
+export default Settings;
diff --git a/frontend/src/routes/user/ProfilePicture.tsx b/frontend/src/routes/user/ProfilePicture.tsx
index 53198a47..cacc581f 100644
--- a/frontend/src/routes/user/ProfilePicture.tsx
+++ b/frontend/src/routes/user/ProfilePicture.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Image, Box } from '@mantine/core';
 import { changeDefaultGoogleProfilePictureSize } from '../../utility/changeDefaultGoogleProfilePictureSize.ts';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ProfilePictureFallback } from '../../components/fallbacks/ProfilePictureFallback.tsx';
 
 /**
  * Props for the ProfilePicture component.
@@ -21,24 +23,26 @@ const ProfilePicture: React.FC<ProfilePictureProps> = ({ src, alt }) => {
   const resizedSrc = changeDefaultGoogleProfilePictureSize(src, 250);
 
   return (
-    <Box
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Image
-        src={resizedSrc}
-        alt={alt}
-        w={'250px'}
-        h={'250px'}
-        fit="contain"
-        radius="50%"
-        referrerPolicy="no-referrer"
-        style={{ objectFit: 'cover', display: 'block' }}
-      />
-    </Box>
+    <ErrorBoundary fallback={<ProfilePictureFallback />}>
+      <Box
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Image
+          src={resizedSrc}
+          alt={alt}
+          w={'250px'}
+          h={'250px'}
+          fit="contain"
+          radius="50%"
+          referrerPolicy="no-referrer"
+          style={{ objectFit: 'cover', display: 'block' }}
+        />
+      </Box>
+    </ErrorBoundary>
   );
 };
 
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index a19b2f7d..f7da222e 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/frontend/src/routes/user/page.tsx
@@ -6,6 +6,8 @@ import UserCard from './UserCard';
 import StatisticItem from './StatisticItem';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import authFetch from '../../rmoods/client/authFetch.ts';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * User interface representing the user data.
@@ -65,52 +67,54 @@ const UserPage = () => {
   }
 
   return (
-    <Box
-      style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start'
-      }}
-    >
-      <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
-        <UserCard user={user} />
-      </Box>
-      <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
-        <Box style={{ flex: '1 1 50%', padding: '10px' }}>
-          <StatisticItem
-            label='Liked reports'
-            value={statistics.likedReports.join(', ')}
-          />
-          <StatisticItem
-            label='Latest report'
-            value={statistics.latestReportDate}
-          />
-          <StatisticItem
-            label='Number of created reports'
-            value={statistics.totalReports}
-          />
-          <StatisticItem
-            label='Top 3 subreddits'
-            value={statistics.topSubreddits.join(', ')}
-          />
+    <ErrorBoundary fallback={<PageFallback />}>
+      <Box
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+        }}
+      >
+        <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
+          <UserCard user={user} />
         </Box>
-        <Box style={{ flex: '1 1 50%', padding: '10px' }}>
-          <StatisticItem label='Karma' value={statistics.karma} />
-          <StatisticItem
-            label='Total cost of reports'
-            value={statistics.generatedCost}
-          />
-          <StatisticItem
-            label='Total used requests'
-            value={statistics.totalRequests}
-          />
-          <StatisticItem
-            label='Longest Report Time'
-            value={statistics.longestReportTime}
-          />
+        <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
+          <Box style={{ flex: '1 1 50%', padding: '10px' }}>
+            <StatisticItem
+              label="Liked reports"
+              value={statistics.likedReports.join(', ')}
+            />
+            <StatisticItem
+              label="Latest report"
+              value={statistics.latestReportDate}
+            />
+            <StatisticItem
+              label="Number of created reports"
+              value={statistics.totalReports}
+            />
+            <StatisticItem
+              label="Top 3 subreddits"
+              value={statistics.topSubreddits.join(', ')}
+            />
+          </Box>
+          <Box style={{ flex: '1 1 50%', padding: '10px' }}>
+            <StatisticItem label="Karma" value={statistics.karma} />
+            <StatisticItem
+              label="Total cost of reports"
+              value={statistics.generatedCost}
+            />
+            <StatisticItem
+              label="Total used requests"
+              value={statistics.totalRequests}
+            />
+            <StatisticItem
+              label="Longest Report Time"
+              value={statistics.longestReportTime}
+            />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </ErrorBoundary>
   );
 };
 

From d5a898b58391e79acadca970e389323fd7c2d5da Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Sun, 8 Dec 2024 23:10:18 +0100
Subject: [PATCH 03/15] 221: Remade error boundary so that it actually works
 this time

---
 .../fallbacks/RateLimitStatusFallback.tsx     |   4 +-
 frontend/src/components/navbar/Navbar.tsx     |   6 +-
 .../src/components/navbar/RateLimitStatus.tsx |  10 +-
 frontend/src/components/navbar/UserMenu.tsx   |  46 +--
 frontend/src/main.tsx                         |   8 +-
 frontend/src/routes/about/page.tsx            |  46 +--
 frontend/src/routes/dashboard/page.tsx        |  56 +--
 .../src/routes/fallbacks/PageFallback.tsx     |  11 +-
 frontend/src/routes/login/page.tsx            |  16 +-
 frontend/src/routes/page.tsx                  |  22 +-
 frontend/src/routes/report/page.tsx           | 346 +++++++++---------
 frontend/src/routes/settings/page.tsx         |  12 +-
 frontend/src/routes/user/page.tsx             |  96 ++---
 frontend/tsconfig.app.json                    |   4 +-
 frontend/tsconfig.vite.json                   |   2 +-
 15 files changed, 337 insertions(+), 348 deletions(-)

diff --git a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
index 5932b9a0..ead2610a 100644
--- a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
+++ b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
@@ -2,14 +2,14 @@ import { HoverCard } from '@mantine/core';
 import { IconBrandReddit } from '@tabler/icons-react';
 import React from 'react';
 
-export const RateLimitStatusFallback = () => {
+export const RateLimitStatusFallback = ({ error }: any) => {
   return (
     <HoverCard>
       <HoverCard.Target>
         <IconBrandReddit size={24} />
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        Error occurred while fetching rate limit status
+        Error occurred while fetching rate limit status: {error.message}
       </HoverCard.Dropdown>
     </HoverCard>
   );
diff --git a/frontend/src/components/navbar/Navbar.tsx b/frontend/src/components/navbar/Navbar.tsx
index 8d6b9e70..2458f02d 100644
--- a/frontend/src/components/navbar/Navbar.tsx
+++ b/frontend/src/components/navbar/Navbar.tsx
@@ -3,8 +3,6 @@ import ThemeSwitch from './ThemeSwitch';
 import { Anchor, Card, Flex, Group } from '@mantine/core';
 import StatusIndicator from './StatusIndicator';
 import RateLimitStatus from './RateLimitStatus.tsx';
-import { ErrorBoundary } from 'react-error-boundary';
-import { RateLimitStatusFallback } from '../fallbacks/RateLimitStatusFallback.tsx';
 
 const LeftNavItems = () => {
   return (
@@ -19,9 +17,7 @@ const LeftNavItems = () => {
 const RightNavItems = () => {
   return (
     <Flex gap={10} justify={'right'} align="center">
-      <ErrorBoundary fallback={<RateLimitStatusFallback />}>
-        <RateLimitStatus />
-      </ErrorBoundary>
+      <RateLimitStatus />
       <StatusIndicator />
       <ThemeSwitch />
       <UserMenu />
diff --git a/frontend/src/components/navbar/RateLimitStatus.tsx b/frontend/src/components/navbar/RateLimitStatus.tsx
index 85841569..a9af8795 100644
--- a/frontend/src/components/navbar/RateLimitStatus.tsx
+++ b/frontend/src/components/navbar/RateLimitStatus.tsx
@@ -116,7 +116,7 @@ const RateLimitStatus = () => {
   client.setQueryData(['remainingRequests'], query.data);
 
   return (
-    <ErrorBoundary fallback={<RateLimitStatusFallback />}>
+    <ErrorBoundary FallbackComponent={RateLimitStatusFallback}>
       <HoverCard>
         <HoverCard.Target>
           <IconBrandReddit size={24} />
@@ -129,4 +129,10 @@ const RateLimitStatus = () => {
   );
 };
 
-export default RateLimitStatus;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={RateLimitStatusFallback}>
+      <RateLimitStatus />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index ea47f157..59c64213 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/frontend/src/components/navbar/UserMenu.tsx
@@ -68,28 +68,30 @@ const UserMenu = () => {
     ? changeDefaultGoogleProfilePictureSize(user.picture, size)
     : '';
   return (
-    <ErrorBoundary fallback={<UserMenuFallback />}>
-      <Menu id="user-dropdown">
-        <Menu.Target>
-          <Avatar
-            src={resizedPicture}
-            radius="xl"
-            size={size}
-            style={{ cursor: 'pointer' }}
-            imageProps={{ referrerPolicy: 'no-referrer' }}
-          />
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
-          <Menu.Item onClick={() => navigate('/dashboard')}>
-            Dashboard
-          </Menu.Item>
-          <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
-          <Menu.Item onClick={() => handleLogout()}>Log out</Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    </ErrorBoundary>
+    <Menu id="user-dropdown">
+      <Menu.Target>
+        <Avatar
+          src={resizedPicture}
+          radius="xl"
+          size={size}
+          style={{ cursor: 'pointer' }}
+          imageProps={{ referrerPolicy: 'no-referrer' }}
+        />
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
+        <Menu.Item onClick={() => navigate('/dashboard')}>Dashboard</Menu.Item>
+        <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
+        <Menu.Item onClick={() => handleLogout()}>Log out</Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
   );
 };
 
-export default UserMenu;
+export default function () {
+  return (
+    <ErrorBoundary fallback={<UserMenuFallback />}>
+      <UserMenu />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index b3fa7b59..e9b1e283 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -11,10 +11,10 @@ import { MainFallback } from './routes/fallbacks/MainFallback.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ErrorBoundary fallback={<MainFallback />}>
-      <Providers>
+    <Providers>
+      <ErrorBoundary fallback={<MainFallback />}>
         <RouterProvider router={router} />
-      </Providers>
-    </ErrorBoundary>
+      </ErrorBoundary>
+    </Providers>
   </StrictMode>
 );
diff --git a/frontend/src/routes/about/page.tsx b/frontend/src/routes/about/page.tsx
index 19184a9b..5c89fe4d 100644
--- a/frontend/src/routes/about/page.tsx
+++ b/frontend/src/routes/about/page.tsx
@@ -9,40 +9,44 @@ import { PageFallback } from '../fallbacks/PageFallback.tsx';
  */
 const About = () => {
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Box>
-        <Section
-          title="Who Are We?"
-          content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
+    <Box>
+      <Section
+        title="Who Are We?"
+        content="We are a group of dedicated students passionate about technology and innovation. Our team is composed of individuals with
                     diverse backgrounds and expertise, all united by a common goal: to leverage the power of Natural Language Processing (NLP)
                     to analyze and derive insights from Reddit data. Our project aims to understand the dynamics of online communities and the
                     interactions within them. By applying advanced NLP techniques, we strive to uncover patterns and trends that can provide
                     valuable insights into user behavior and community engagement. We believe that our work can contribute to a deeper
                     understanding of social media and its impact on society."
-        />
-        <Section
-          title="Our Story"
-          content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
+      />
+      <Section
+        title="Our Story"
+        content="Our journey began when we realized the immense potential of NLP in understanding social media dynamics.
                     Inspired by the growing influence of online communities, we decided to embark on a project that could provide
                     meaningful insights into user behavior and community interactions. This inspiration drove us to form a team
                     and start our project, aiming to make a difference in the field of data analysis."
-        />
-        <Section
-          title="Meet The Team"
-          content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
+      />
+      <Section
+        title="Meet The Team"
+        content="Our team consists of Katarzyna Jabłońska, Sebastian Nowak, Michał Miłek, and Sebastian Jałoszyński.
                     Each of us brings unique skills and perspectives to the project, making our collaboration both dynamic and effective.
                     Together, we are committed to pushing the boundaries of what is possible with NLP and data analysis."
-        />
-        <Section
-          title="Our Evolution"
-          content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
+      />
+      <Section
+        title="Our Evolution"
+        content="Throughout our project, we have faced numerous challenges, from technical obstacles to data interpretation issues.
                     However, each challenge has been an opportunity for growth and improvement. Our project has evolved significantly,
                     with continuous enhancements to our NLP models and data analysis techniques. Today, we are proud of the progress we have
                     made and the insights we have uncovered."
-        />
-      </Box>
-    </ErrorBoundary>
+      />
+    </Box>
   );
 };
 
-export default About;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <About />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/dashboard/page.tsx b/frontend/src/routes/dashboard/page.tsx
index a5a7376c..1f73d93e 100644
--- a/frontend/src/routes/dashboard/page.tsx
+++ b/frontend/src/routes/dashboard/page.tsx
@@ -9,55 +9,15 @@ import { PageFallback } from '../fallbacks/PageFallback.tsx';
 const Dashboard = () => {
   return (
     <>
-      <ErrorBoundary fallback={<PageFallback />}>
-        <Title order={1}>Dashboard</Title>
-        {/*/!* Lorem ipsum added for testing purposes*!/purposes**/}
-        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
-
-        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
-
-        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
-
-        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
-
-        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
-
-        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
-
-        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
-
-        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
-
-        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
-
-        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
-        {/*Lorem impsum added for testing purposes*/}
-        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
-
-        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
-
-        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
-
-        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
-
-        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada. Integer pellentesque eu urna nec rutrum. Aenean ultrices dui id nunc fermentum sagittis. Nam tristique dolor risus, nec ullamcorper lectus gravida sit amet. Cras vitae ante et lacus suscipit egestas. Quisque molestie magna ligula, egestas finibus ante posuere sed.*/}
-        {/**/}
-
-        {/*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a ligula nec augue consequat venenatis. Fusce tellus sapien, dignissim non hendrerit at, auctor sed diam. Maecenas et lacus consequat, gravida orci vitae, accumsan ipsum. Duis imperdiet tellus sit amet imperdiet placerat. Phasellus tempor at odio at fermentum. Nunc non hendrerit dui. Nunc dapibus sed purus ut euismod. Phasellus mattis viverra velit et lacinia. Donec nec congue massa, finibus pretium turpis.*/}
-
-        {/*Quisque nec dolor eget risus varius pharetra. Ut tempor aliquet nisi sed pellentesque. Morbi faucibus dui at condimentum rhoncus. Quisque vehicula pharetra magna lacinia vestibulum. Aenean non purus tincidunt, cursus quam vitae, eleifend nibh. Aliquam tristique sem ut felis sagittis dignissim. Vestibulum bibendum auctor eros, ut viverra leo aliquam vel. Proin iaculis porta sollicitudin. Praesent quis sem posuere, suscipit nisi non, efficitur neque. Aenean imperdiet sollicitudin elementum. Etiam placerat dignissim elit nec sollicitudin. Suspendisse potenti. Donec luctus condimentum neque vitae molestie. Sed vehicula laoreet lectus, id aliquam dolor euismod in. Aliquam accumsan bibendum odio. Vivamus ac est quis turpis fringilla pharetra posuere id est.*/}
-
-        {/*Etiam sed iaculis dui. Integer lacinia laoreet orci, in dapibus diam tincidunt quis. Aenean laoreet nisi et dolor euismod, ac commodo urna imperdiet. Maecenas a tempor orci. Donec vehicula justo tristique metus posuere, at pellentesque dolor imperdiet. Donec aliquet gravida feugiat. Mauris dictum urna ac elit convallis varius. Phasellus nec varius massa. Mauris ultricies lacus quis est tempor, nec finibus arcu ornare. Quisque urna libero, luctus venenatis semper non, tincidunt nec felis. Quisque ultrices quam pellentesque tortor tempor rutrum. Aliquam rhoncus eros dui, sit amet sagittis elit semper non. Nullam iaculis elementum diam, ut ornare ipsum varius sed.*/}
-
-        {/*Aliquam pretium vehicula ipsum, nec venenatis turpis viverra elementum. Ut iaculis felis nec leo elementum, eget lobortis est mollis. Etiam tincidunt ligula pellentesque, pharetra diam ut, aliquam ex. Morbi urna massa, iaculis vel suscipit eu, facilisis in turpis. Donec nec lectus eu nibh elementum tincidunt. Duis vel felis metus. Nulla faucibus quam at congue tincidunt. Aliquam quis aliquam ipsum. Proin at lorem iaculis, dictum urna et, rhoncus diam. Sed molestie accumsan purus, at blandit sapien consequat sed. Sed felis magna, pulvinar in consequat sed, venenatis non elit. Vestibulum metus libero, aliquet a dolor quis, dignissim dictum est. Quisque consectetur blandit iaculis.*/}
-
-        {/*Etiam vehicula, erat a ullamcorper egestas, ante eros feugiat quam, sed ultricies quam tortor ac risus. Fusce blandit lorem non ultrices malesuada.malesuada*/}
-        {/* <LoggedUserInfo />
-      <DebugRedditUserInfo />
-      <DebugSubredditInfo /> */}
-      </ErrorBoundary>
+      <Title order={1}>Dashboard</Title>
     </>
   );
 };
 
-export default Dashboard;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <Dashboard />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
index 31d9562a..b94662fd 100644
--- a/frontend/src/routes/fallbacks/PageFallback.tsx
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -1,7 +1,10 @@
-export const PageFallback = () => {
+import { Center } from '@mantine/core';
+
+export const PageFallback = ({ error }: any) => {
   return (
-    <div>
-      <h1>Trouble loading the page</h1>
-    </div>
+    <Center role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: 'red' }}>{error.message}</pre>
+    </Center>
   );
 };
diff --git a/frontend/src/routes/login/page.tsx b/frontend/src/routes/login/page.tsx
index 9584663d..4968ed6f 100644
--- a/frontend/src/routes/login/page.tsx
+++ b/frontend/src/routes/login/page.tsx
@@ -80,12 +80,16 @@ const LoginCard = () => {
  */
 const Login = () => {
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Center>
-        <LoginCard />
-      </Center>
-    </ErrorBoundary>
+    <Center>
+      <LoginCard />
+    </Center>
   );
 };
 
-export default Login;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <Login />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/page.tsx b/frontend/src/routes/page.tsx
index bb842759..7f503a37 100644
--- a/frontend/src/routes/page.tsx
+++ b/frontend/src/routes/page.tsx
@@ -5,15 +5,19 @@ import { PageFallback } from './fallbacks/PageFallback.tsx';
 
 const Root = () => {
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Container>
-        <Center>
-          <Title order={1}>RMoods Demo Content</Title>
-        </Center>
-        <Demo />
-      </Container>
-    </ErrorBoundary>
+    <Container>
+      <Center>
+        <Title order={1}>RMoods Demo Content</Title>
+      </Center>
+      <Demo />
+    </Container>
   );
 };
 
-export default Root;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <Root />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/report/page.tsx b/frontend/src/routes/report/page.tsx
index 456395f7..1880f42b 100644
--- a/frontend/src/routes/report/page.tsx
+++ b/frontend/src/routes/report/page.tsx
@@ -102,193 +102,197 @@ const Report = () => {
   };
 
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Box>
-        <Title order={1}>Create Report</Title>
+    <Box>
+      <Title order={1}>Create Report</Title>
 
-        <form
-          onSubmit={form.onSubmit((values) => {
-            void values;
-            const validationResult = form.validate();
-            if (!validationResult.hasErrors) {
-              console.log('Form is valid');
-            } else {
-              console.log('Form is invalid');
-            }
-            const transformedValues = transformJson(
-              form.values as ReportFormValues
-            );
-            console.log(transformedValues);
+      <form
+        onSubmit={form.onSubmit((values) => {
+          void values;
+          const validationResult = form.validate();
+          if (!validationResult.hasErrors) {
+            console.log('Form is valid');
+          } else {
+            console.log('Form is invalid');
+          }
+          const transformedValues = transformJson(
+            form.values as ReportFormValues
+          );
+          console.log(transformedValues);
 
-            RMoodsClient.requestReport(transformedValues)
-              .then((res: unknown) => {
-                console.log(res);
-              })
-              .catch((err: Error) => {
-                console.error(err);
-              });
-          })}
+          RMoodsClient.requestReport(transformedValues)
+            .then((res: unknown) => {
+              console.log(res);
+            })
+            .catch((err: Error) => {
+              console.error(err);
+            });
+        })}
+      >
+        <TextInput
+          label="Report Name"
+          placeholder="Enter report name"
+          {...form.getInputProps('name')}
+        />
+        <SegmentedControl
+          data={[
+            { label: 'Public', value: 'true' },
+            { label: 'Private', value: 'false' },
+          ]}
+          {...form.getInputProps('isPublic')}
+        />
+        <Radio.Group
+          name="sourceType"
+          label="Select source type"
+          {...form.getInputProps('resourceKind')}
+          onClick={() => {
+            setRows([]);
+          }}
         >
-          <TextInput
-            label="Report Name"
-            placeholder="Enter report name"
-            {...form.getInputProps('name')}
-          />
-          <SegmentedControl
-            data={[
-              { label: 'Public', value: 'true' },
-              { label: 'Private', value: 'false' },
-            ]}
-            {...form.getInputProps('isPublic')}
-          />
-          <Radio.Group
-            name="sourceType"
-            label="Select source type"
-            {...form.getInputProps('resourceKind')}
-            onClick={() => {
-              setRows([]);
-            }}
-          >
-            <Stack>
-              <Radio value="subredditPosts" label="Subreddit Posts" />
-              <Radio value="postComments" label="Post Comments" />
-              <Radio value="userPosts" label="User Posts" />
-            </Stack>
-          </Radio.Group>
+          <Stack>
+            <Radio value="subredditPosts" label="Subreddit Posts" />
+            <Radio value="postComments" label="Post Comments" />
+            <Radio value="userPosts" label="User Posts" />
+          </Stack>
+        </Radio.Group>
+
+        <Radio.Group
+          name="sortBy"
+          label="Sort by"
+          {...form.getInputProps('sortBy')}
+          onClick={() => {
+            setRows([]);
+          }}
+        >
+          <Stack>
+            <Radio value="hot" label="Hot" />
+            <Radio value="new" label="New" />
+            <Radio value="rising" label="Rising" />
+            <Radio value="top" label="Top" />
+            <Radio value="controversial" label="Controversial" />
+          </Stack>
+        </Radio.Group>
 
+        {form.getInputProps('sortBy').value === 'top' ||
+        form.getInputProps('sortBy').value === 'controversial' ? (
           <Radio.Group
-            name="sortBy"
-            label="Sort by"
-            {...form.getInputProps('sortBy')}
+            name="time"
+            label="Select time"
+            {...form.getInputProps('time')}
             onClick={() => {
               setRows([]);
             }}
           >
             <Stack>
-              <Radio value="hot" label="Hot" />
-              <Radio value="new" label="New" />
-              <Radio value="rising" label="Rising" />
-              <Radio value="top" label="Top" />
-              <Radio value="controversial" label="Controversial" />
+              <Radio value="day" label="Day" />
+              <Radio value="week" label="Week" />
+              <Radio value="month" label="Month" />
+              <Radio value="year" label="Year" />
+              <Radio value="all" label="All" />
             </Stack>
           </Radio.Group>
+        ) : (
+          <></>
+        )}
 
-          {form.getInputProps('sortBy').value === 'top' ||
-          form.getInputProps('sortBy').value === 'controversial' ? (
-            <Radio.Group
-              name="time"
-              label="Select time"
-              {...form.getInputProps('time')}
-              onClick={() => {
-                setRows([]);
-              }}
-            >
-              <Stack>
-                <Radio value="day" label="Day" />
-                <Radio value="week" label="Week" />
-                <Radio value="month" label="Month" />
-                <Radio value="year" label="Year" />
-                <Radio value="all" label="All" />
-              </Stack>
-            </Radio.Group>
-          ) : (
-            <></>
-          )}
-
-          <Box>
-            <DataSourceTable
-              form={form}
-              rows={rows}
-              setRows={setRows}
-              deleteRow={deleteRow}
-              makeRowEditHandler={makeRowEditHandler}
-            />
-          </Box>
-          {form.errors.dataSources && (
-            <Input.Error
-              style={() => ({
-                marginTop: '6px',
-              })}
-            >
-              {form.errors.dataSources}
-            </Input.Error>
-          )}
+        <Box>
+          <DataSourceTable
+            form={form}
+            rows={rows}
+            setRows={setRows}
+            deleteRow={deleteRow}
+            makeRowEditHandler={makeRowEditHandler}
+          />
+        </Box>
+        {form.errors.dataSources && (
+          <Input.Error
+            style={() => ({
+              marginTop: '6px',
+            })}
+          >
+            {form.errors.dataSources}
+          </Input.Error>
+        )}
 
-          <Radio.Group
-            name="size"
-            label="Select size"
+        <Radio.Group
+          name="size"
+          label="Select size"
+          {...form.getInputProps('size')}
+        >
+          <Stack>
+            <Radio value="30" label="Small (30)" />
+            <Radio value="70" label="Medium (70)" />
+            <Radio value="100" label="Large (100)" />
+            <Radio value="custom" label="Custom" />
+          </Stack>
+        </Radio.Group>
+        {form.values.size === 'custom' && (
+          <NumberInput
+            label="Custom Size"
+            min={0}
+            max={500}
             {...form.getInputProps('size')}
-          >
-            <Stack>
-              <Radio value="30" label="Small (30)" />
-              <Radio value="70" label="Medium (70)" />
-              <Radio value="100" label="Large (100)" />
-              <Radio value="custom" label="Custom" />
-            </Stack>
-          </Radio.Group>
-          {form.values.size === 'custom' && (
-            <NumberInput
-              label="Custom Size"
-              min={0}
-              max={500}
-              {...form.getInputProps('size')}
-            />
-          )}
-          <Title order={3}>Analyses</Title>
-          <Checkbox
-            value={form.values.analyses.language}
-            label="Language"
-            {...form.getInputProps('analyses.language', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.sentiment}
-            label="Sentiment"
-            {...form.getInputProps('analyses.sentiment', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.sarcasm}
-            label="Sarcasm"
-            {...form.getInputProps('analyses.sarcasm', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.spam}
-            label="Spam"
-            {...form.getInputProps('analyses.spam', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.politics}
-            label="Politics"
-            {...form.getInputProps('analyses.politics', { type: 'checkbox' })}
           />
-          <Checkbox
-            value={form.values.analyses.hateSpeech}
-            label="Hate Speech"
-            {...form.getInputProps('analyses.hateSpeech', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.clickbait}
-            label="Clickbait"
-            {...form.getInputProps('analyses.clickbait', { type: 'checkbox' })}
-          />
-          <Checkbox
-            value={form.values.analyses.trolling}
-            label="Trolling"
-            {...form.getInputProps('analyses.trolling', { type: 'checkbox' })}
-          />
-          <Group justify="flex-end">
-            <Button
-              type="submit"
-              // onClick={() => {
-              //   console.log(transformJson(form.values as ReportFormValues));
-              // }}
-            >
-              Create Report
-            </Button>
-          </Group>
-        </form>
-      </Box>
-    </ErrorBoundary>
+        )}
+        <Title order={3}>Analyses</Title>
+        <Checkbox
+          value={form.values.analyses.language}
+          label="Language"
+          {...form.getInputProps('analyses.language', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.sentiment}
+          label="Sentiment"
+          {...form.getInputProps('analyses.sentiment', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.sarcasm}
+          label="Sarcasm"
+          {...form.getInputProps('analyses.sarcasm', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.spam}
+          label="Spam"
+          {...form.getInputProps('analyses.spam', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.politics}
+          label="Politics"
+          {...form.getInputProps('analyses.politics', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.hateSpeech}
+          label="Hate Speech"
+          {...form.getInputProps('analyses.hateSpeech', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.clickbait}
+          label="Clickbait"
+          {...form.getInputProps('analyses.clickbait', { type: 'checkbox' })}
+        />
+        <Checkbox
+          value={form.values.analyses.trolling}
+          label="Trolling"
+          {...form.getInputProps('analyses.trolling', { type: 'checkbox' })}
+        />
+        <Group justify="flex-end">
+          <Button
+            type="submit"
+            // onClick={() => {
+            //   console.log(transformJson(form.values as ReportFormValues));
+            // }}
+          >
+            Create Report
+          </Button>
+        </Group>
+      </form>
+    </Box>
   );
 };
 
-export default Report;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <Report />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/settings/page.tsx b/frontend/src/routes/settings/page.tsx
index 8ea25089..23e5c052 100644
--- a/frontend/src/routes/settings/page.tsx
+++ b/frontend/src/routes/settings/page.tsx
@@ -3,11 +3,13 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 const Settings = () => {
+  return <Box>Work in progress</Box>;
+};
+
+export default function () {
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Box>Work in progress</Box>
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <Settings />
     </ErrorBoundary>
   );
-};
-
-export default Settings;
+}
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index f7da222e..1c430c67 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/frontend/src/routes/user/page.tsx
@@ -67,55 +67,59 @@ const UserPage = () => {
   }
 
   return (
-    <ErrorBoundary fallback={<PageFallback />}>
-      <Box
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-        }}
-      >
-        <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
-          <UserCard user={user} />
+    <Box
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+      }}
+    >
+      <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
+        <UserCard user={user} />
+      </Box>
+      <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
+        <Box style={{ flex: '1 1 50%', padding: '10px' }}>
+          <StatisticItem
+            label="Liked reports"
+            value={statistics.likedReports.join(', ')}
+          />
+          <StatisticItem
+            label="Latest report"
+            value={statistics.latestReportDate}
+          />
+          <StatisticItem
+            label="Number of created reports"
+            value={statistics.totalReports}
+          />
+          <StatisticItem
+            label="Top 3 subreddits"
+            value={statistics.topSubreddits.join(', ')}
+          />
         </Box>
-        <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
-          <Box style={{ flex: '1 1 50%', padding: '10px' }}>
-            <StatisticItem
-              label="Liked reports"
-              value={statistics.likedReports.join(', ')}
-            />
-            <StatisticItem
-              label="Latest report"
-              value={statistics.latestReportDate}
-            />
-            <StatisticItem
-              label="Number of created reports"
-              value={statistics.totalReports}
-            />
-            <StatisticItem
-              label="Top 3 subreddits"
-              value={statistics.topSubreddits.join(', ')}
-            />
-          </Box>
-          <Box style={{ flex: '1 1 50%', padding: '10px' }}>
-            <StatisticItem label="Karma" value={statistics.karma} />
-            <StatisticItem
-              label="Total cost of reports"
-              value={statistics.generatedCost}
-            />
-            <StatisticItem
-              label="Total used requests"
-              value={statistics.totalRequests}
-            />
-            <StatisticItem
-              label="Longest Report Time"
-              value={statistics.longestReportTime}
-            />
-          </Box>
+        <Box style={{ flex: '1 1 50%', padding: '10px' }}>
+          <StatisticItem label="Karma" value={statistics.karma} />
+          <StatisticItem
+            label="Total cost of reports"
+            value={statistics.generatedCost}
+          />
+          <StatisticItem
+            label="Total used requests"
+            value={statistics.totalRequests}
+          />
+          <StatisticItem
+            label="Longest Report Time"
+            value={statistics.longestReportTime}
+          />
         </Box>
       </Box>
-    </ErrorBoundary>
+    </Box>
   );
 };
 
-export default UserPage;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <UserPage />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index c39a9d22..a89238e9 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -18,7 +18,7 @@
     "strict": true,
     "noUnusedLocals": false,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
   },
-  "include": ["src"]
+  "include": ["src"],
 }
diff --git a/frontend/tsconfig.vite.json b/frontend/tsconfig.vite.json
index 7247e79b..49e1d2b4 100644
--- a/frontend/tsconfig.vite.json
+++ b/frontend/tsconfig.vite.json
@@ -19,5 +19,5 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": false,
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts"],
 }

From 9cf8ceb9a30502196c5710f937f4dc0680de0cce Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Sun, 8 Dec 2024 23:15:51 +0100
Subject: [PATCH 04/15] 221: fix tsconfig to allow implicit any

---
 frontend/src/components/fallbacks/RateLimitStatusFallback.tsx | 2 +-
 frontend/src/routes/fallbacks/PageFallback.tsx                | 2 +-
 frontend/tsconfig.app.json                                    | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
index ead2610a..faeeb8a0 100644
--- a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
+++ b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
@@ -2,7 +2,7 @@ import { HoverCard } from '@mantine/core';
 import { IconBrandReddit } from '@tabler/icons-react';
 import React from 'react';
 
-export const RateLimitStatusFallback = ({ error }: any) => {
+export const RateLimitStatusFallback = ({ error }) => {
   return (
     <HoverCard>
       <HoverCard.Target>
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
index b94662fd..dd907378 100644
--- a/frontend/src/routes/fallbacks/PageFallback.tsx
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -1,6 +1,6 @@
 import { Center } from '@mantine/core';
 
-export const PageFallback = ({ error }: any) => {
+export const PageFallback = ({ error }) => {
   return (
     <Center role="alert">
       <p>Something went wrong:</p>
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index a89238e9..26c231e9 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -19,6 +19,7 @@
     "noUnusedLocals": false,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
   },
   "include": ["src"],
 }

From 827cecc536cfed6a12c003fa85be9cd827485b36 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 09:44:56 +0100
Subject: [PATCH 05/15] 221: Delete unnecessary error boundary

---
 .../src/components/navbar/RateLimitStatus.tsx  | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/navbar/RateLimitStatus.tsx b/frontend/src/components/navbar/RateLimitStatus.tsx
index a9af8795..a6a42588 100644
--- a/frontend/src/components/navbar/RateLimitStatus.tsx
+++ b/frontend/src/components/navbar/RateLimitStatus.tsx
@@ -116,16 +116,14 @@ const RateLimitStatus = () => {
   client.setQueryData(['remainingRequests'], query.data);
 
   return (
-    <ErrorBoundary FallbackComponent={RateLimitStatusFallback}>
-      <HoverCard>
-        <HoverCard.Target>
-          <IconBrandReddit size={24} />
-        </HoverCard.Target>
-        <HoverCard.Dropdown>
-          <RateLimitHoverCard ratelimit={query.data![0]} />
-        </HoverCard.Dropdown>
-      </HoverCard>
-    </ErrorBoundary>
+    <HoverCard>
+      <HoverCard.Target>
+        <IconBrandReddit size={24} />
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <RateLimitHoverCard ratelimit={query.data![0]} />
+      </HoverCard.Dropdown>
+    </HoverCard>
   );
 };
 

From 9610f3aba98bae7b7cebdb66d61a8c9dd9f0a794 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 11:42:52 +0100
Subject: [PATCH 06/15] 221: Fix up remaining error boundaries and make use of
 error message in every component

---
 frontend/src/components/DashboardLayout.tsx                  | 2 +-
 frontend/src/components/fallbacks/ProfilePictureFallback.tsx | 4 ++--
 frontend/src/components/fallbacks/UserMenuFallback.tsx       | 3 ++-
 frontend/src/components/navbar/UserMenu.tsx                  | 2 +-
 frontend/src/main.tsx                                        | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DashboardLayout.tsx b/frontend/src/components/DashboardLayout.tsx
index c8bb395b..1232644c 100644
--- a/frontend/src/components/DashboardLayout.tsx
+++ b/frontend/src/components/DashboardLayout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Navbar from './navbar/Navbar.tsx';
 import DashboardFooter from './footer/DashboardFooter';
 import { Box, Flex } from '@mantine/core';
-import { ScrollToTop } from '../components/ScrollToTop';
+import { ScrollToTop } from './ScrollToTop.tsx';
 
 const dashboardFlex = {
   flex: 'auto',
diff --git a/frontend/src/components/fallbacks/ProfilePictureFallback.tsx b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
index 5b4a98d5..6fbb84b8 100644
--- a/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
+++ b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
@@ -1,7 +1,7 @@
 import { Box, Image } from '@mantine/core';
 import React from 'react';
 
-export const ProfilePictureFallback = () => {
+export const ProfilePictureFallback = ({ error }) => {
   return (
     <Box
       style={{
@@ -12,7 +12,7 @@ export const ProfilePictureFallback = () => {
     >
       <Image
         src={'https://placehold.co/250x250?text=PfP'}
-        alt="default profile picture"
+        alt={`defaulting to placeholder: ${error.message}`}
         w={'250px'}
         h={'250px'}
         fit="contain"
diff --git a/frontend/src/components/fallbacks/UserMenuFallback.tsx b/frontend/src/components/fallbacks/UserMenuFallback.tsx
index 8314efd0..9674d4e8 100644
--- a/frontend/src/components/fallbacks/UserMenuFallback.tsx
+++ b/frontend/src/components/fallbacks/UserMenuFallback.tsx
@@ -1,4 +1,5 @@
-export const UserMenuFallback = () => {
+export const UserMenuFallback = ({ error }) => {
+  console.error(error);
   return (
     // will have to get more info how to handle UserMenu from the team
     <div>
diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index 59c64213..972e9a61 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/frontend/src/components/navbar/UserMenu.tsx
@@ -90,7 +90,7 @@ const UserMenu = () => {
 
 export default function () {
   return (
-    <ErrorBoundary fallback={<UserMenuFallback />}>
+    <ErrorBoundary FallbackComponent={UserMenuFallback}>
       <UserMenu />
     </ErrorBoundary>
   );
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e9b1e283..c34b2a3c 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -12,7 +12,7 @@ import { MainFallback } from './routes/fallbacks/MainFallback.tsx';
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Providers>
-      <ErrorBoundary fallback={<MainFallback />}>
+      <ErrorBoundary FallbackComponent={MainFallback}>
         <RouterProvider router={router} />
       </ErrorBoundary>
     </Providers>

From fad73e7bf54dd7eda7dc527d9848194a13d5319b Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 11:55:24 +0100
Subject: [PATCH 07/15] 221: Fix build errors

---
 frontend/src/routes/user/ProfilePicture.tsx | 46 +++++++++++----------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/routes/user/ProfilePicture.tsx b/frontend/src/routes/user/ProfilePicture.tsx
index cacc581f..1bcbed71 100644
--- a/frontend/src/routes/user/ProfilePicture.tsx
+++ b/frontend/src/routes/user/ProfilePicture.tsx
@@ -23,27 +23,31 @@ const ProfilePicture: React.FC<ProfilePictureProps> = ({ src, alt }) => {
   const resizedSrc = changeDefaultGoogleProfilePictureSize(src, 250);
 
   return (
-    <ErrorBoundary fallback={<ProfilePictureFallback />}>
-      <Box
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Image
-          src={resizedSrc}
-          alt={alt}
-          w={'250px'}
-          h={'250px'}
-          fit="contain"
-          radius="50%"
-          referrerPolicy="no-referrer"
-          style={{ objectFit: 'cover', display: 'block' }}
-        />
-      </Box>
-    </ErrorBoundary>
+    <Box
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Image
+        src={resizedSrc}
+        alt={alt}
+        w={'250px'}
+        h={'250px'}
+        fit="contain"
+        radius="50%"
+        referrerPolicy="no-referrer"
+        style={{ objectFit: 'cover', display: 'block' }}
+      />
+    </Box>
   );
 };
 
-export default ProfilePicture;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={ProfilePictureFallback}>
+      <ProfilePicture src="defaultSrc" alt="defaultAlt" />
+    </ErrorBoundary>
+  );
+}

From 634ade7ae4967c9bd635cfabf313a486c25e6cf3 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 12:28:38 +0100
Subject: [PATCH 08/15] 221: Fix function export with arguments

---
 frontend/src/routes/user/ProfilePicture.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/user/ProfilePicture.tsx b/frontend/src/routes/user/ProfilePicture.tsx
index 1bcbed71..f387465a 100644
--- a/frontend/src/routes/user/ProfilePicture.tsx
+++ b/frontend/src/routes/user/ProfilePicture.tsx
@@ -44,10 +44,10 @@ const ProfilePicture: React.FC<ProfilePictureProps> = ({ src, alt }) => {
   );
 };
 
-export default function () {
+export default function ({ src, alt }) {
   return (
     <ErrorBoundary FallbackComponent={ProfilePictureFallback}>
-      <ProfilePicture src="defaultSrc" alt="defaultAlt" />
+      <ProfilePicture src={src} alt={alt} />
     </ErrorBoundary>
   );
 }

From d2f47c977b21c52f99a6a243faae2e667ccd0992 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 13:38:47 +0100
Subject: [PATCH 09/15] 221: Add better main and page fallbacks

---
 .../src/routes/fallbacks/MainFallback.tsx     | 32 ++++++++++++++++---
 .../src/routes/fallbacks/PageFallback.tsx     | 27 +++++++++++++---
 2 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/fallbacks/MainFallback.tsx b/frontend/src/routes/fallbacks/MainFallback.tsx
index baa57482..846e5de2 100644
--- a/frontend/src/routes/fallbacks/MainFallback.tsx
+++ b/frontend/src/routes/fallbacks/MainFallback.tsx
@@ -1,9 +1,33 @@
 import React from 'react';
+import { Card, Center, Stack, Text, Title } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
 
-export const MainFallback = () => {
+export const MainFallback = ({ error }) => {
   return (
-    <div>
-      <h1>MainFallback</h1>
-    </div>
+    <Center>
+      <Card shadow="xs" p="xl" withBorder radius={20}>
+        <Stack>
+          <Center>
+            <IconAlertCircle size={48} color="red" />
+          </Center>
+          <Center>
+            <Title order={2}>
+              Critical failure! Something went seriously wrong
+            </Title>
+          </Center>
+          <Center>
+            <Text>
+              The app crashed. The devs will be notified and investigate the
+              issue.
+            </Text>
+          </Center>
+          <Center>
+            <Text size="sm" color="red">
+              {error.message}
+            </Text>
+          </Center>
+        </Stack>
+      </Card>
+    </Center>
   );
 };
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
index dd907378..1855dede 100644
--- a/frontend/src/routes/fallbacks/PageFallback.tsx
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -1,10 +1,29 @@
-import { Center } from '@mantine/core';
+import { Center, Stack, Title, Text, Paper, Card } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
 
 export const PageFallback = ({ error }) => {
   return (
-    <Center role="alert">
-      <p>Something went wrong:</p>
-      <pre style={{ color: 'red' }}>{error.message}</pre>
+    <Center>
+      <Card shadow="xs" p="xl" withBorder radius={20}>
+        <Stack>
+          <Center>
+            <IconAlertCircle size={48} color="red" />
+          </Center>
+          <Center>
+            <Title order={2}>Oops! Something went wrong</Title>
+          </Center>
+          <Center>
+            <Text>
+              The page encountered an error and couldn't be displayed.
+            </Text>
+          </Center>
+          <Center>
+            <Text size="sm" color="red">
+              {error.message}
+            </Text>
+          </Center>
+        </Stack>
+      </Card>
     </Center>
   );
 };

From 77e2641a18bd0faa07f4a0a857edf06ba9506269 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 14:05:50 +0100
Subject: [PATCH 10/15] 221: Fallbacks console.errors their errors with their
 name

---
 frontend/src/components/fallbacks/ProfilePictureFallback.tsx  | 1 +
 frontend/src/components/fallbacks/RateLimitStatusFallback.tsx | 1 +
 frontend/src/components/fallbacks/UserMenuFallback.tsx        | 2 +-
 frontend/src/routes/fallbacks/MainFallback.tsx                | 1 +
 frontend/src/routes/fallbacks/PageFallback.tsx                | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/fallbacks/ProfilePictureFallback.tsx b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
index 6fbb84b8..404be7f2 100644
--- a/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
+++ b/frontend/src/components/fallbacks/ProfilePictureFallback.tsx
@@ -2,6 +2,7 @@ import { Box, Image } from '@mantine/core';
 import React from 'react';
 
 export const ProfilePictureFallback = ({ error }) => {
+  console.error('ProfilePictureFallback:', error.message);
   return (
     <Box
       style={{
diff --git a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
index faeeb8a0..7100e39a 100644
--- a/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
+++ b/frontend/src/components/fallbacks/RateLimitStatusFallback.tsx
@@ -3,6 +3,7 @@ import { IconBrandReddit } from '@tabler/icons-react';
 import React from 'react';
 
 export const RateLimitStatusFallback = ({ error }) => {
+  console.error('RateLimitStatusFallback:', error.message);
   return (
     <HoverCard>
       <HoverCard.Target>
diff --git a/frontend/src/components/fallbacks/UserMenuFallback.tsx b/frontend/src/components/fallbacks/UserMenuFallback.tsx
index 9674d4e8..f3f0f41b 100644
--- a/frontend/src/components/fallbacks/UserMenuFallback.tsx
+++ b/frontend/src/components/fallbacks/UserMenuFallback.tsx
@@ -1,5 +1,5 @@
 export const UserMenuFallback = ({ error }) => {
-  console.error(error);
+  console.error('UserMenuFallback:', error.message);
   return (
     // will have to get more info how to handle UserMenu from the team
     <div>
diff --git a/frontend/src/routes/fallbacks/MainFallback.tsx b/frontend/src/routes/fallbacks/MainFallback.tsx
index 846e5de2..dc941954 100644
--- a/frontend/src/routes/fallbacks/MainFallback.tsx
+++ b/frontend/src/routes/fallbacks/MainFallback.tsx
@@ -3,6 +3,7 @@ import { Card, Center, Stack, Text, Title } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 
 export const MainFallback = ({ error }) => {
+  console.error('MainFallback:', error.message);
   return (
     <Center>
       <Card shadow="xs" p="xl" withBorder radius={20}>
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
index 1855dede..aca30d25 100644
--- a/frontend/src/routes/fallbacks/PageFallback.tsx
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -2,6 +2,7 @@ import { Center, Stack, Title, Text, Paper, Card } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 
 export const PageFallback = ({ error }) => {
+  console.error('PageFallback:', error.message);
   return (
     <Center>
       <Card shadow="xs" p="xl" withBorder radius={20}>

From f73288b2a86624ec4c6e480fac62b724adfb9519 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 15:55:40 +0100
Subject: [PATCH 11/15] 221: Fix styling, add more error boundaries

---
 frontend/src/Layout.tsx                       |  6 ++-
 .../components/fallbacks/UserMenuFallback.tsx | 12 +++---
 frontend/src/components/navbar/UserMenu.tsx   | 38 ++++++++++++-------
 .../src/routes/fallbacks/PageFallback.tsx     |  4 +-
 frontend/src/routes/user/page.tsx             | 29 ++++++++------
 frontend/src/utility/logout.ts                |  7 ++++
 6 files changed, 62 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/utility/logout.ts

diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
index 88ecebf7..840ffff8 100644
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -13,13 +13,15 @@ const Layout = () => {
       }}
     >
       <DefaultNavbar />
-      <Box
+      <Flex
         style={{
+          // flex 1 to fill the entire available space
+          flex: '1',
           padding: '2rem 15%',
         }}
       >
         <Outlet />
-      </Box>
+      </Flex>
       <Footer />
     </Flex>
   );
diff --git a/frontend/src/components/fallbacks/UserMenuFallback.tsx b/frontend/src/components/fallbacks/UserMenuFallback.tsx
index f3f0f41b..5f319341 100644
--- a/frontend/src/components/fallbacks/UserMenuFallback.tsx
+++ b/frontend/src/components/fallbacks/UserMenuFallback.tsx
@@ -1,9 +1,11 @@
-export const UserMenuFallback = ({ error }) => {
+import { logout } from '../../utility/logout.ts';
+import { useNavigate } from 'react-router-dom';
+
+export const UserMenuFallback = ({ error, resetErrorBoundary }) => {
+  resetErrorBoundary();
   console.error('UserMenuFallback:', error.message);
   return (
-    // will have to get more info how to handle UserMenu from the team
-    <div>
-      <h1>UserMenuFallback</h1>
-    </div>
+    // TODO: will have to get more info how to handle UserMenu from the team
+    <></>
   );
 };
diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index 45f9d885..e2edbcd8 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/frontend/src/components/navbar/UserMenu.tsx
@@ -6,6 +6,9 @@ import { jwtDecode } from 'jwt-decode';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import { changeDefaultGoogleProfilePictureSize } from '../../utility/changeDefaultGoogleProfilePictureSize.ts';
 import { useQuery } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+import { UserMenuFallback } from '../fallbacks/UserMenuFallback.tsx';
+import { logout } from '../../utility/logout.ts';
 
 /**
  * User interface representing the user data.
@@ -35,7 +38,6 @@ const fetchUserData = async (): Promise<User> => {
   return response.json();
 };
 
-
 /**
  * UserMenu component that displays the user menu.
  * @returns {JSX.Element} The UserMenu component.
@@ -46,14 +48,8 @@ const UserMenu = () => {
   const { data, error } = useQuery<User, Error>({
     queryKey: ['userData'],
     queryFn: fetchUserData,
-    refetchInterval: 5000,
   });
 
-  const handleLogout = () => {
-    Cookies.remove('RMOODS_JWT');
-    navigate('/login');
-  };
-
   if (error) {
     throw new Error('Failed to fetch user data');
   }
@@ -73,15 +69,29 @@ const UserMenu = () => {
           style={{ cursor: 'pointer' }}
           imageProps={{ referrerPolicy: 'no-referrer' }}
         />
+        <Menu.Dropdown>
+          <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
+          <Menu.Item onClick={() => navigate('/dashboard')}>
+            Dashboard
+          </Menu.Item>
+          <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
+          <Menu.Item onClick={() => logout(navigate)}>Log out</Menu.Item>
+        </Menu.Dropdown>
       </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
-        <Menu.Item onClick={() => navigate('/dashboard')}>Dashboard</Menu.Item>
-        <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
-        <Menu.Item onClick={() => handleLogout()}>Log out</Menu.Item>
-      </Menu.Dropdown>
     </Menu>
   );
 };
 
-export default UserMenu;
+export default function () {
+  const navigate = useNavigate();
+  return (
+    <ErrorBoundary
+      FallbackComponent={UserMenuFallback}
+      onReset={() => {
+        logout(navigate);
+      }}
+    >
+      <UserMenu />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/routes/fallbacks/PageFallback.tsx b/frontend/src/routes/fallbacks/PageFallback.tsx
index aca30d25..81740c16 100644
--- a/frontend/src/routes/fallbacks/PageFallback.tsx
+++ b/frontend/src/routes/fallbacks/PageFallback.tsx
@@ -1,10 +1,10 @@
-import { Center, Stack, Title, Text, Paper, Card } from '@mantine/core';
+import { Center, Stack, Title, Text, Card } from '@mantine/core';
 import { IconAlertCircle } from '@tabler/icons-react';
 
 export const PageFallback = ({ error }) => {
   console.error('PageFallback:', error.message);
   return (
-    <Center>
+    <Center style={{ flex: 1 }}>
       <Card shadow="xs" p="xl" withBorder radius={20}>
         <Stack>
           <Center>
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index 8e49e1f8..b43c2446 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/frontend/src/routes/user/page.tsx
@@ -6,6 +6,8 @@ import StatisticItem from './StatisticItem';
 import { JwtClaims } from '../../rmoods/jwt.ts';
 import authFetch from '../../rmoods/client/authFetch.ts';
 import { useQuery } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+import { PageFallback } from '../fallbacks/PageFallback.tsx';
 
 /**
  * User interface representing the user data.
@@ -59,7 +61,6 @@ const UserPage = () => {
   const { data, error, isLoading } = useQuery<User, Error>({
     queryKey: ['userData'],
     queryFn: fetchUserData,
-    refetchInterval: 5000,
   });
 
   if (isLoading) {
@@ -86,7 +87,7 @@ const UserPage = () => {
       style={{
         display: 'flex',
         justifyContent: 'space-between',
-        alignItems: 'flex-start'
+        alignItems: 'flex-start',
       }}
     >
       <Box style={{ flex: '0 0 350px', marginRight: '20px' }}>
@@ -95,34 +96,34 @@ const UserPage = () => {
       <Box style={{ flex: '1', display: 'flex', flexWrap: 'wrap' }}>
         <Box style={{ flex: '1 1 50%', padding: '10px' }}>
           <StatisticItem
-            label='Liked reports'
+            label="Liked reports"
             value={statistics.likedReports.join(', ')}
           />
           <StatisticItem
-            label='Latest report'
+            label="Latest report"
             value={statistics.latestReportDate}
           />
           <StatisticItem
-            label='Number of created reports'
+            label="Number of created reports"
             value={statistics.totalReports}
           />
           <StatisticItem
-            label='Top 3 subreddits'
+            label="Top 3 subreddits"
             value={statistics.topSubreddits.join(', ')}
           />
         </Box>
         <Box style={{ flex: '1 1 50%', padding: '10px' }}>
-          <StatisticItem label='Karma' value={statistics.karma} />
+          <StatisticItem label="Karma" value={statistics.karma} />
           <StatisticItem
-            label='Total cost of reports'
+            label="Total cost of reports"
             value={statistics.generatedCost}
           />
           <StatisticItem
-            label='Total used requests'
+            label="Total used requests"
             value={statistics.totalRequests}
           />
           <StatisticItem
-            label='Longest Report Time'
+            label="Longest Report Time"
             value={statistics.longestReportTime}
           />
         </Box>
@@ -131,4 +132,10 @@ const UserPage = () => {
   );
 };
 
-export default UserPage;
+export default function () {
+  return (
+    <ErrorBoundary FallbackComponent={PageFallback}>
+      <UserPage />
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/utility/logout.ts b/frontend/src/utility/logout.ts
new file mode 100644
index 00000000..ed3aa072
--- /dev/null
+++ b/frontend/src/utility/logout.ts
@@ -0,0 +1,7 @@
+import { NavigateFunction } from 'react-router-dom';
+import Cookies from 'js-cookie';
+
+export const logout = (navigate: NavigateFunction) => {
+  Cookies.remove('RMOODS_JWT');
+  navigate('/login');
+};

From 7ffc672a7e8c7c533c4aa48b86c2f42fac50277e Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 20:25:11 +0100
Subject: [PATCH 12/15] 221: Fix login card

---
 frontend/src/router.tsx            |  1 -
 frontend/src/routes/login/page.tsx | 28 +++++++++++++---------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 0f4d2b53..f5781bbd 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -50,7 +50,6 @@ const router = createBrowserRouter([
         path: 'about',
         element: <About />,
       },
-
       {
         path: 'login',
         element: <Login />,
diff --git a/frontend/src/routes/login/page.tsx b/frontend/src/routes/login/page.tsx
index 4968ed6f..f3fbeecd 100644
--- a/frontend/src/routes/login/page.tsx
+++ b/frontend/src/routes/login/page.tsx
@@ -1,10 +1,10 @@
 import { useGoogleLogin } from '@react-oauth/google';
 import GoogleSignInButton from './GoogleSignInButton';
-import { useAtom, useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai';
 import Cookies from 'js-cookie';
 import { userInfoAtom } from '../../atoms';
 import { useNavigate } from 'react-router-dom';
-import { Center, Paper, Stack, Title, Box } from '@mantine/core';
+import { Center, Paper, Stack, Title, Box, Card } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { ErrorBoundary } from 'react-error-boundary';
 import { PageFallback } from '../fallbacks/PageFallback.tsx';
@@ -59,18 +59,16 @@ const LoginCard = () => {
   });
 
   return (
-    <Center p="xl" h="70vh">
-      <Paper radius="md" w="540" p="xl" withBorder shadow="md">
-        <Stack gap="md" align="center">
-          <Box>
-            <Title order={1} ta="center">
-              Welcome to RMoods!
-            </Title>
-          </Box>
-          <GoogleSignInButton onClick={googleLogin} />
-        </Stack>
-      </Paper>
-    </Center>
+    <Card radius="md" p="xl" withBorder shadow="md">
+      <Stack gap="md" align="center">
+        <Box>
+          <Title order={1} ta="center">
+            Welcome to RMoods!
+          </Title>
+        </Box>
+        <GoogleSignInButton onClick={googleLogin} />
+      </Stack>
+    </Card>
   );
 };
 
@@ -80,7 +78,7 @@ const LoginCard = () => {
  */
 const Login = () => {
   return (
-    <Center>
+    <Center flex={1}>
       <LoginCard />
     </Center>
   );

From 308a6f77288d1b09042b655c1f36991660a747c2 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 20:52:53 +0100
Subject: [PATCH 13/15] 221: Fix types naming, fix menu error

---
 frontend/src/components/navbar/UserMenu.tsx | 14 ++++++--------
 frontend/src/rmoods/client/types.ts         | 14 +++++++-------
 frontend/src/routes/user/page.tsx           |  2 +-
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/navbar/UserMenu.tsx b/frontend/src/components/navbar/UserMenu.tsx
index e2edbcd8..ee6e81e3 100644
--- a/frontend/src/components/navbar/UserMenu.tsx
+++ b/frontend/src/components/navbar/UserMenu.tsx
@@ -69,15 +69,13 @@ const UserMenu = () => {
           style={{ cursor: 'pointer' }}
           imageProps={{ referrerPolicy: 'no-referrer' }}
         />
-        <Menu.Dropdown>
-          <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
-          <Menu.Item onClick={() => navigate('/dashboard')}>
-            Dashboard
-          </Menu.Item>
-          <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
-          <Menu.Item onClick={() => logout(navigate)}>Log out</Menu.Item>
-        </Menu.Dropdown>
       </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item onClick={() => navigate('/user')}>Profile</Menu.Item>
+        <Menu.Item onClick={() => navigate('/dashboard')}>Dashboard</Menu.Item>
+        <Menu.Item onClick={() => navigate('/settings')}>Settings</Menu.Item>
+        <Menu.Item onClick={() => logout(navigate)}>Log out</Menu.Item>
+      </Menu.Dropdown>
     </Menu>
   );
 };
diff --git a/frontend/src/rmoods/client/types.ts b/frontend/src/rmoods/client/types.ts
index 7adb9d56..074bfc1b 100644
--- a/frontend/src/rmoods/client/types.ts
+++ b/frontend/src/rmoods/client/types.ts
@@ -54,11 +54,11 @@ export const DataSourceSchema = z.object({
 const GoogleUserInfoSchema = z.object({
   sub: z.string(),
   name: z.string(),
-  given_name: z.string(),
-  family_name: z.string().nullable(),
+  givenName: z.string(),
+  familyName: z.string().nullable(),
   picture: z.string().url(),
   email: z.string().email(),
-  email_verified: z.boolean(),
+  emailVerified: z.boolean(),
 });
 
 const LanguageResponseSchema = z.object({
@@ -67,7 +67,7 @@ const LanguageResponseSchema = z.object({
 });
 
 const NlpMetadataSchema = z.object({
-  generated_in: z.number(),
+  generatedIn: z.number(),
 });
 
 const NlpAnalysisSchema = z.object({
@@ -76,9 +76,9 @@ const NlpAnalysisSchema = z.object({
 });
 
 const ReportMetadataSchema = z.object({
-  created_at: z.number(),
-  user_info: GoogleUserInfoSchema,
-  is_public: z.boolean(),
+  createdAt: z.number(),
+  userInfo: GoogleUserInfoSchema,
+  isPublic: z.boolean(),
 });
 
 const ReportResponseSchema = z.object({
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index b43c2446..b60c0ae9 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/frontend/src/routes/user/page.tsx
@@ -14,7 +14,7 @@ import { PageFallback } from '../fallbacks/PageFallback.tsx';
  */
 export interface User {
   name: string;
-  given_name: string;
+  givenName: string;
   email: string;
   picture: string;
 }

From 7ba94a2db6fac5ef180c247e79d47074dfe4eed2 Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 22:43:00 +0100
Subject: [PATCH 14/15] 221: Fix issues raised in review

---
 frontend/src/components/DefaultNavbar.tsx | 8 +++-----
 frontend/src/routes/user/page.tsx         | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DefaultNavbar.tsx b/frontend/src/components/DefaultNavbar.tsx
index 5f1a4ef8..a72a8c27 100644
--- a/frontend/src/components/DefaultNavbar.tsx
+++ b/frontend/src/components/DefaultNavbar.tsx
@@ -13,7 +13,7 @@ const LeftNavItems = () => {
 
 const RightNavItems = () => {
   return (
-    <Flex gap={10} justify={'right'} align="center">
+    <Flex gap={10} justify="right" align="center">
       <ThemeSwitch />
     </Flex>
   );
@@ -24,11 +24,9 @@ const RightNavItems = () => {
  */
 const DefaultNavbar = () => {
   return (
-    <Card
-      style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}
-    >
+    <Card style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}>
       <nav>
-        <Group justify='space-between'>
+        <Group justify="space-between">
           <LeftNavItems />
           <RightNavItems />
         </Group>
diff --git a/frontend/src/routes/user/page.tsx b/frontend/src/routes/user/page.tsx
index b60c0ae9..b43c2446 100644
--- a/frontend/src/routes/user/page.tsx
+++ b/frontend/src/routes/user/page.tsx
@@ -14,7 +14,7 @@ import { PageFallback } from '../fallbacks/PageFallback.tsx';
  */
 export interface User {
   name: string;
-  givenName: string;
+  given_name: string;
   email: string;
   picture: string;
 }

From f015218361270c85d4db93996bb34a9ede52df8d Mon Sep 17 00:00:00 2001
From: Sebastian Nowak <sebnow91@gmail.com>
Date: Mon, 9 Dec 2024 22:45:47 +0100
Subject: [PATCH 15/15] 221: Fix build issues

---
 frontend/src/routes/user/UserCard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/routes/user/UserCard.tsx b/frontend/src/routes/user/UserCard.tsx
index 66fe8899..c0f9df02 100644
--- a/frontend/src/routes/user/UserCard.tsx
+++ b/frontend/src/routes/user/UserCard.tsx
@@ -30,11 +30,11 @@ const UserCard: React.FC<UserCardProps> = ({ user }) => {
         <Title order={2} style={{ marginTop: '10px', fontSize: '22px' }}>
           {user.name}
         </Title>
-        <Text size='sm' c='dimmed' style={{ fontSize: '18px' }}>
-          {user.givenName}
+        <Text size="sm" c="dimmed" style={{ fontSize: '18px' }}>
+          {user.given_name}
         </Text>
-        <Divider my='sm' />
-        <Text size='sm' c='dimmed' style={{ fontSize: '18px' }}>
+        <Divider my="sm" />
+        <Text size="sm" c="dimmed" style={{ fontSize: '18px' }}>
           {user.email}
         </Text>
       </Box>