feat: detailed error handling

.husky/pre-commit

@@ -1,2 +1,2 @@
 pnpx lint-staged
-pnpm test -- --onlyChanged
+pnpm test -- --onlyChanged

README.md

@@ -88,7 +88,7 @@ Gitify is licensed under the MIT Open Source license. For more information, see
 [brew]: http://brew.sh/
 [homebrew-cask]: https://formulae.brew.sh/cask/gitify
 [coveralls]: https://coveralls.io/github/gitify-app/gitify
-[coveralls-badge]: https://img.shields.io/coverallsCoverage/github/gitify-app/gitify
+[coveralls-badge]: https://coveralls.io/repos/github/gitify-app/gitify/badge.svg
 [build-workflow-badge]: https://github.com/gitify-app/gitify/actions/workflows/build-app.yml/badge.svg
 [release-workflow-badge]: https://github.com/gitify-app/gitify/actions/workflows/release.yml/badge.svg
 [downloads-total-badge]: https://img.shields.io/github/downloads/gitify-app/gitify/total?label=downloads@all

src/components/Oops.test.tsx

@@ -1,16 +1,15 @@
 import * as TestRenderer from 'react-test-renderer';
 
-import { mockMathRandom } from './test-utils';
-
 import { Oops } from './Oops';
 
 describe('components/Oops.tsx', () => {
-  // The error emoji randomly rotates, but then the snapshots would never match
-  // Have to make it consistent so the emojis are always the same
-  mockMathRandom(0.1);
-
   it('should render itself & its children', () => {
-    const tree = TestRenderer.create(<Oops />);
+    const mockError = {
+      title: 'Error title',
+      description: 'Error description',
+      emojis: ['🔥'],
+    };
+    const tree = TestRenderer.create(<Oops error={mockError} />);
 
     expect(tree).toMatchSnapshot();
   });

src/components/Oops.tsx

@@ -1,12 +1,14 @@
-import { useMemo } from 'react';
-import { Constants } from '../utils/constants';
+import { type FC, useMemo } from 'react';
 
-export const Oops = () => {
+import type { GitifyError } from '../types';
+
+interface IProps {
+  error: GitifyError;
+}
+
+export const Oops: FC<IProps> = ({ error }) => {
   const emoji = useMemo(
-    () =>
-      Constants.ERROR_EMOJIS[
-        Math.floor(Math.random() * Constants.ERROR_EMOJIS.length)
-      ],
+    () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [],
   );
 
@@ -15,9 +17,9 @@ export const Oops = () => {
       <h1 className="text-5xl mb-5">{emoji}</h1>
 
       <h2 className="font-semibold text-xl mb-2 text-semibold">
-        Something went wrong.
+        {error.title}
       </h2>
-      <div>Couldn't get your notifications.</div>
+      <div>{error.description}</div>
     </div>
   );
 };

src/context/App.tsx

@@ -14,6 +14,7 @@ import {
   type AuthOptions,
   type AuthState,
   type AuthTokenOptions,
+  type GitifyError,
   type SettingsState,
   Theme,
 } from '../types';
@@ -56,6 +57,7 @@ interface AppContextState {
   notifications: AccountNotifications[];
   isFetching: boolean;
   requestFailed: boolean;
+  errorDetails: GitifyError;
   removeNotificationFromState: (id: string, hostname: string) => void;
   fetchNotifications: () => Promise<void>;
   markNotificationRead: (id: string, hostname: string) => Promise<void>;
@@ -80,6 +82,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     fetchNotifications,
     notifications,
     requestFailed,
+    errorDetails,
     isFetching,
     removeNotificationFromState,
     markNotificationRead,
@@ -238,6 +241,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         notifications,
         isFetching,
         requestFailed,
+        errorDetails,
         removeNotificationFromState,
         fetchNotifications: fetchNotificationsWithAccounts,
         markNotificationRead: markNotificationReadWithAccounts,