refactor: render logger utility (#2181)

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/__mocks__/notifications-mocks.ts

@@ -3,6 +3,7 @@ import type { StateType, Subject, SubjectType } from '../typesGitHub';
 import {
   mockEnterpriseNotifications,
   mockGitHubNotifications,
+  mockSingleNotification,
 } from '../utils/api/__mocks__/response-mocks';
 import {
   mockGitHubCloudAccount,
@@ -25,7 +26,7 @@ export const mockAccountNotifications: AccountNotifications[] = [
 export const mockSingleAccountNotifications: AccountNotifications[] = [
   {
     account: mockGitHubCloudAccount,
-    notifications: [mockGitHubNotifications[0]],
+    notifications: [mockSingleNotification],
     error: null,
   },
 ];

src/renderer/hooks/useNotifications.test.ts

@@ -3,8 +3,6 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import axios, { AxiosError } from 'axios';
 import nock from 'nock';
 
-import * as logger from '../../shared/logger';
-
 import {
   mockAuth,
   mockGitHubCloudAccount,
@@ -16,16 +14,19 @@ import {
   mockSingleNotification,
 } from '../utils/api/__mocks__/response-mocks';
 import { Errors } from '../utils/errors';
+import * as logger from '../utils/logger';
 import { useNotifications } from './useNotifications';
 
 describe('renderer/hooks/useNotifications.ts', () => {
-  const logErrorSpy = jest.spyOn(logger, 'logError').mockImplementation();
+  const rendererLogErrorSpy = jest
+    .spyOn(logger, 'rendererLogError')
+    .mockImplementation();
 
   beforeEach(() => {
     // axios will default to using the XHR adapter which can't be intercepted
     // by nock. So, configure axios to use the node adapter.
     axios.defaults.adapter = 'http';
-    logErrorSpy.mockReset();
+    rendererLogErrorSpy.mockReset();
   });
 
   const id = mockSingleNotification.id;
@@ -300,7 +301,7 @@ describe('renderer/hooks/useNotifications.ts', () => {
       });
 
       expect(result.current.globalError).toBe(Errors.BAD_CREDENTIALS);
-      expect(logErrorSpy).toHaveBeenCalledTimes(4);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(4);
     });
 
     it('should fetch notifications with different failures', async () => {
@@ -343,7 +344,7 @@ describe('renderer/hooks/useNotifications.ts', () => {
       });
 
       expect(result.current.globalError).toBeNull();
-      expect(logErrorSpy).toHaveBeenCalledTimes(4);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(4);
     });
   });
 
@@ -386,7 +387,7 @@ describe('renderer/hooks/useNotifications.ts', () => {
       });
 
       expect(result.current.notifications.length).toBe(0);
-      expect(logErrorSpy).toHaveBeenCalledTimes(1);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -429,7 +430,7 @@ describe('renderer/hooks/useNotifications.ts', () => {
       });
 
       expect(result.current.notifications.length).toBe(0);
-      expect(logErrorSpy).toHaveBeenCalledTimes(1);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -521,7 +522,7 @@ describe('renderer/hooks/useNotifications.ts', () => {
       });
 
       expect(result.current.notifications.length).toBe(0);
-      expect(logErrorSpy).toHaveBeenCalledTimes(1);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(1);
     });
   });
 });

src/renderer/hooks/useNotifications.ts

@@ -1,7 +1,5 @@
 import { useCallback, useState } from 'react';
 
-import { logError } from '../../shared/logger';
-
 import type {
   Account,
   AccountNotifications,
@@ -17,6 +15,7 @@ import {
 } from '../utils/api/client';
 import { updateTrayIcon } from '../utils/comms';
 import { isMarkAsDoneFeatureSupported } from '../utils/features';
+import { rendererLogError } from '../utils/logger';
 import { triggerNativeNotifications } from '../utils/notifications/native';
 import {
   getAllNotifications,
@@ -129,7 +128,7 @@ export const useNotifications = (): NotificationsState => {
         setNotifications(updatedNotifications);
         setTrayIconColor(updatedNotifications);
       } catch (err) {
-        logError(
+        rendererLogError(
           'markNotificationsAsRead',
           'Error occurred while marking notifications as read',
           err,
@@ -167,7 +166,7 @@ export const useNotifications = (): NotificationsState => {
         setNotifications(updatedNotifications);
         setTrayIconColor(updatedNotifications);
       } catch (err) {
-        logError(
+        rendererLogError(
           'markNotificationsAsDone',
           'Error occurred while marking notifications as done',
           err,
@@ -196,7 +195,7 @@ export const useNotifications = (): NotificationsState => {
           await markNotificationsAsRead(state, [notification]);
         }
       } catch (err) {
-        logError(
+        rendererLogError(
           'unsubscribeNotification',
           'Error occurred while unsubscribing from notification thread',
           err,

src/renderer/routes/Accounts.tsx

@@ -22,8 +22,6 @@ import {
   Text,
 } from '@primer/react';
 
-import { logError } from '../../shared/logger';
-
 import { AvatarWithFallback } from '../components/avatars/AvatarWithFallback';
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
@@ -44,6 +42,7 @@ import {
   openDeveloperSettings,
   openHost,
 } from '../utils/links';
+import { rendererLogError } from '../utils/logger';
 import { saveState } from '../utils/storage';
 
 export const AccountsRoute: FC = () => {
@@ -98,7 +97,7 @@ export const AccountsRoute: FC = () => {
     try {
       await loginWithGitHubApp();
     } catch (err) {
-      logError('loginWithGitHub', 'failed to login with GitHub', err);
+      rendererLogError('loginWithGitHub', 'failed to login with GitHub', err);
     }
   }, []);
 

src/renderer/routes/Login.tsx

@@ -4,13 +4,12 @@ import { useNavigate } from 'react-router-dom';
 import { KeyIcon, MarkGithubIcon, PersonIcon } from '@primer/octicons-react';
 import { Button, Heading, Stack, Text } from '@primer/react';
 
-import { logError } from '../../shared/logger';
-
 import { LogoIcon } from '../components/icons/LogoIcon';
 import { Centered } from '../components/layout/Centered';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
 import { showWindow } from '../utils/comms';
+import { rendererLogError } from '../utils/logger';
 
 export const LoginRoute: FC = () => {
   const navigate = useNavigate();
@@ -27,7 +26,11 @@ export const LoginRoute: FC = () => {
     try {
       await loginWithGitHubApp();
     } catch (err) {
-      logError('loginWithGitHubApp', 'failed to login with GitHub', err);
+      rendererLogError(
+        'loginWithGitHubApp',
+        'failed to login with GitHub',
+        err,
+      );
     }
   }, [loginWithGitHubApp]);
 

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -18,8 +18,6 @@ import {
 } from '@primer/react';
 import { Banner } from '@primer/react/experimental';
 
-import { logError } from '../../shared/logger';
-
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
 import { Footer } from '../components/primitives/Footer';
@@ -35,6 +33,7 @@ import {
 } from '../utils/auth/utils';
 import { openExternalLink } from '../utils/comms';
 import { Constants } from '../utils/constants';
+import { rendererLogError } from '../utils/logger';
 
 interface IFormData {
   hostname?: Hostname;
@@ -120,7 +119,11 @@ export const LoginWithOAuthAppRoute: FC = () => {
         await loginWithOAuthApp(data as LoginOAuthAppOptions);
         navigate(-1);
       } catch (err) {
-        logError('loginWithOAuthApp', 'Failed to login with OAuth App', err);
+        rendererLogError(
+          'loginWithOAuthApp',
+          'Failed to login with OAuth App',
+          err,
+        );
         setErrors({
           invalidCredentialsForHost: `Failed to validate provided Client ID and Secret against ${data.hostname}`,
         });

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -18,8 +18,6 @@ import {
 } from '@primer/react';
 import { Banner } from '@primer/react/experimental';
 
-import { logError } from '../../shared/logger';
-
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';
 import { Footer } from '../components/primitives/Footer';
@@ -35,6 +33,7 @@ import {
 } from '../utils/auth/utils';
 import { openExternalLink } from '../utils/comms';
 import { Constants } from '../utils/constants';
+import { rendererLogError } from '../utils/logger';
 
 interface IFormData {
   token?: Token;
@@ -112,7 +111,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
         );
         navigate(-1);
       } catch (err) {
-        logError(
+        rendererLogError(
           'loginWithPersonalAccessToken',
           'Failed to login with PAT',
           err,

src/renderer/utils/api/client.test.ts

@@ -1,13 +1,12 @@
 import axios, { type AxiosPromise, type AxiosResponse } from 'axios';
 
-import * as logger from '../../../shared/logger';
-
 import {
   mockGitHubCloudAccount,
   mockGitHubEnterpriseServerAccount,
   mockToken,
 } from '../../__mocks__/state-mocks';
 import type { Hostname, Link, SettingsState, Token } from '../../types';
+import * as logger from '../../utils/logger';
 import {
   getAuthenticatedUser,
   getHtmlUrl,
@@ -322,7 +321,9 @@ describe('renderer/utils/api/client.ts', () => {
     });
 
     it('should handle error', async () => {
-      const logErrorSpy = jest.spyOn(logger, 'logError').mockImplementation();
+      const rendererLogErrorSpy = jest
+        .spyOn(logger, 'rendererLogError')
+        .mockImplementation();
 
       const apiRequestAuthMock = jest.spyOn(apiRequests, 'apiRequestAuth');
 
@@ -335,7 +336,7 @@ describe('renderer/utils/api/client.ts', () => {
         '123' as Token,
       );
 
-      expect(logErrorSpy).toHaveBeenCalledTimes(1);
+      expect(rendererLogErrorSpy).toHaveBeenCalledTimes(1);
     });
   });
 });

src/renderer/utils/api/client.ts

@@ -1,8 +1,6 @@
 import type { AxiosPromise } from 'axios';
 import { print } from 'graphql/language/printer';
 
-import { logError } from '../../../shared/logger';
-
 import type {
   Account,
   Hostname,
@@ -25,6 +23,7 @@ import type {
   UserDetails,
 } from '../../typesGitHub';
 import { isAnsweredDiscussionFeatureSupported } from '../features';
+import { rendererLogError } from '../logger';
 import { QUERY_SEARCH_DISCUSSIONS } from './graphql/discussions';
 import { formatAsGitHubSearchSyntax } from './graphql/utils';
 import { apiRequestAuth } from './request';
@@ -219,7 +218,7 @@ export async function getHtmlUrl(url: Link, token: Token): Promise<string> {
     const response = (await apiRequestAuth(url, 'GET', token)).data;
     return response.html_url;
   } catch (err) {
-    logError(
+    rendererLogError(
       'getHtmlUrl',
       `error occurred while fetching html url for ${url}`,
       err,
@@ -274,7 +273,7 @@ export async function getLatestDiscussion(
       )[0] ?? null
     );
   } catch (err) {
-    logError(
+    rendererLogError(
       'getLatestDiscussion',
       'failed to fetch latest discussion for notification',
       err,

src/renderer/utils/api/request.ts

@@ -4,10 +4,9 @@ import axios, {
   type Method,
 } from 'axios';
 
-import { logError } from '../../../shared/logger';
-
 import type { Link, Token } from '../../types';
 import { decryptValue } from '../comms';
+import { rendererLogError } from '../logger';
 import { getNextURLFromLinkHeader } from './utils';
 
 /**
@@ -70,7 +69,7 @@ export async function apiRequestAuth(
       nextUrl = getNextURLFromLinkHeader(response);
     }
   } catch (err) {
-    logError('apiRequestAuth', 'API request failed:', err);
+    rendererLogError('apiRequestAuth', 'API request failed:', err);
 
     throw err;
   }