feat: switch renderer to use new ipc logger

Author: KatoakDR

electron/renderer/context/logger.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
 import { createContext, useEffect } from 'react';
 import type { Logger } from '../../common/logger/types.js';
-import { createLogger } from '../lib/logger/create-logger.js';
+import { getScopedLogger } from '../lib/logger/logger.factory.js';
 import {
   startMonitoringUnhandledExceptions,
   stopMonitoringUnhandledExceptions,
-} from '../lib/logger/monitor-exceptions.js';
+} from '../lib/logger/monitor.exceptions.js';
 
-const defaultLogger = createLogger('renderer');
+const defaultLogger = getScopedLogger('renderer');
 
 /**
  * React context for accessing a logger.

electron/renderer/hooks/characters.tsx

@@ -3,7 +3,7 @@ import sortBy from 'lodash-es/sortBy.js';
 import { useCallback, useEffect, useState } from 'react';
 import { create } from 'zustand';
 import { useShallow } from 'zustand/react/shallow';
-import { isBlank } from '../../common/string/is-blank.js';
+import { isBlank } from '../../common/string/string.utils.js';
 import { runInBackground } from '../lib/async/run-in-background.js';
 import type { Character } from '../types/game.types.js';
 import { usePubSub, useSubscribe } from './pubsub.jsx';

electron/renderer/hooks/logger.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import type { Logger } from '../../common/logger/types.js';
 import { LoggerContext } from '../context/logger.jsx';
-import { createLogger } from '../lib/logger/create-logger.js';
+import { getScopedLogger } from '../lib/logger/logger.factory.js';
 
 /**
  * To use this hook, the component must be inside a `LoggerProvider` hierarchy.
@@ -18,7 +18,7 @@ export const useLogger = (scope?: string): Logger => {
 
   useEffect(() => {
     if (scope) {
-      setLogger(createLogger(scope));
+      setLogger(getScopedLogger(scope));
     } else {
       setLogger(context.logger);
     }

electron/renderer/hooks/pubsub.tsx

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { useShallow } from 'zustand/react/shallow';
 import type { Logger } from '../../common/logger/types.js';
 import { runInBackground } from '../lib/async/run-in-background.js';
-import { createLogger } from '../lib/logger/create-logger.js';
+import { getScopedLogger } from '../lib/logger/logger.factory.js';
 
 export type PubSubSubscriber = (data?: any) => Promise<void> | void;
 
@@ -143,7 +143,7 @@ interface PubSubStoreData {
  * An implementation of the PubSub pattern.
  */
 const usePubSubStore = create<PubSubStoreData>((set, get) => ({
-  logger: createLogger('hooks:pubsub'),
+  logger: getScopedLogger('hooks:pubsub'),
 
   subscribers: {},
 

electron/renderer/instrumentation.ts

@@ -1,20 +1,14 @@
 import * as SentryNextjs from '@sentry/nextjs';
 import type { Instrumentation } from 'next';
-import { initializeLogging } from './lib/logger/initialize-logging.js';
 
 /**
  * Nextjs Instrumentation for monitoring and logging.
  * https://nextjs.org/docs/pages/building-your-application/optimizing/instrumentation
  */
 export const register = async (): Promise<void> => {
-  registerLogger();
   registerSentry();
 };
 
-const registerLogger = (): void => {
-  initializeLogging();
-};
-
 /**
  * Sentry Config for Next.js
  * https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/

electron/renderer/lib/logger/__tests__/monitor-exceptions.test.ts

@@ -0,0 +1,11 @@
+import { describe, it } from 'vitest';
+
+describe('monitor-exceptions', () => {
+  describe('#startMonitoringUnhandledExceptions', () => {
+    it.todo('');
+  });
+
+  describe('#stopMonitoringUnhandledExceptions', () => {
+    it.todo('');
+  });
+});

electron/renderer/lib/logger/monitor.exceptions.ts

@@ -0,0 +1,46 @@
+import { getScopedLogger } from './logger.factory.js';
+
+/**
+ * Catch and log unhandled exceptions, such as promise rejections.
+ * Requires the `window` object, so can only run client-side.
+ */
+export const startMonitoringUnhandledExceptions = (): void => {
+  window.addEventListener('error', errorEventHandler);
+  window.addEventListener('unhandledrejection', rejectionEventHandler);
+};
+
+export const stopMonitoringUnhandledExceptions = (): void => {
+  window.removeEventListener('error', errorEventHandler);
+  window.removeEventListener('unhandledrejection', rejectionEventHandler);
+};
+
+const errorEventHandler = (event: ErrorEvent) => {
+  event.preventDefault();
+  logError({
+    message: `[RENDERER:WINDOW:ERROR] ${event.message}`,
+    data: {
+      error: event.error,
+    },
+  });
+};
+
+const rejectionEventHandler = (event: PromiseRejectionEvent) => {
+  event.preventDefault();
+  logError({
+    message: '[RENDERER:WINDOW:UNHANDLED_REJECTION]',
+    data: {
+      reason: event.reason,
+    },
+  });
+};
+
+const logError = (options: {
+  message: string;
+  data?: Record<string, unknown>;
+}): void => {
+  const { message, data } = options;
+
+  const logger = getScopedLogger('renderer:error:monitor');
+
+  logger.error(message, data);
+};

electron/renderer/pages/grid.tsx

@@ -8,7 +8,7 @@ import type { KeyboardEventHandler, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as rxjs from 'rxjs';
 import { v4 as uuid } from 'uuid';
-import { getExperienceMindState } from '../../common/game/get-experience-mindstate.js';
+import { getExperienceMindState } from '../../common/game/game.utils.js';
 import type {
   ExperienceGameEvent,
   GameCommandMessage,