fix(logging): improve remote logging and debug mode support

- Add debug log level support and corresponding console.debug override
- Introduce enableDebug method to activate debug logging via UI button
- Fix console method argument spreading to handle empty arguments properly
- Add new bug icon button in settings page to toggle debug logging mode
- Implement toast notification on enabling debug mode
- Update logging write function to respect debug activation flag
- Change default cache state in @analogjs/trpc from active to inactive
- Change console.log to console.info for device linking success messages
- Add CSS classes for responsive element visibility (.hidden, .mobile-hidden)
- Replace hidden class usage to hide text on mobile for web navigation items
- Add cache-control header to disable caching in trpc server responses
- Remove stray trailing whitespace and unnecessary blank lines in code files

Author: EndyKaufman

mobile/patches/@analogjs+trpc+0.4.0.patch

@@ -1,7 +1,16 @@
 diff --git a/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs b/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
-index fd3f2b7..564f690 100644
+index fd3f2b7..ac5dcd8 100644
 --- a/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
 +++ b/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
+@@ -9,7 +9,7 @@ import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
+ const tRPC_CACHE_STATE = new InjectionToken('TRPC_HTTP_TRANSFER_STATE_CACHE_STATE');
+ const provideTrpcCacheState = () => ({
+     provide: tRPC_CACHE_STATE,
+-    useValue: { isCacheActive: new BehaviorSubject(true) },
++    useValue: { isCacheActive: new BehaviorSubject(false) },
+ });
+ const provideTrpcCacheStateStatusManager = () => ({
+     provide: APP_BOOTSTRAP_LISTENER,
 @@ -269,7 +269,7 @@ const createTrpcClient = ({ url, options, batchLinkOptions, }) => {
                              headers() {
                                  return TrpcHeaders();

mobile/src/app/dashboard/dashboard.page.ts

@@ -219,6 +219,7 @@ export class DashboardPage {
       // Fetch dashboard info using deviceId
       // Using a simple approach to avoid type issues
       const response = await this.deviceService.info();
+
       this.dashboardInfo$.next(response);
     } catch (err) {
       this.dashboardInfo$.next(null);

mobile/src/app/qr-code/qr-code.page.ts

@@ -302,7 +302,7 @@ export class QrCodePage {
           );
         }),
         tap((data) => {
-          console.log('Device linked successfully:', data);
+          console.info('Device linked successfully:', data);
           if (data && typeof data === 'object' && 'id' in data) {
             this.scanResultQrData$.next(data);
             // Navigate to the dashboard tab after successful linking
@@ -395,7 +395,7 @@ export class QrCodePage {
       .pipe(
         first(),
         tap((data: any) => {
-          console.log('Device linked successfully:', data);
+          console.info('Device linked successfully:', data);
           if (data && typeof data === 'object' && 'id' in data) {
             this.scanResultQrData$.next(data);
             // Navigate to the dashboard tab after successful linking

mobile/src/app/remote-log.ts

@@ -4,26 +4,32 @@ let _log: Function;
 let _warn: Function;
 let _error: Function;
 let _info: Function;
+let _debug: Function;
 let _pending: Array<LogItem> | undefined = undefined;
 let _callback: (data: any) => void;
 interface LogItem {
   message: string;
   level: string;
 }
 
+export function activateSendLoggerMessageToServer() {
+  (window as any).debug = true;
+}
 /**
  * Initialize logging will override window.console and send to the serverUrl
  * @param  {string} serverUrl The servername and port number of the remote server (eg 192.168.1.1:9000)
  */
 export function initLogger(callback: (data: any) => void) {
   _log = window.console.log;
-  _warn = window.console.error;
+  _warn = window.console.warn;
   _error = window.console.error;
   _info = window.console.info;
+  _debug = window.console.debug;
   _callback = callback;
   window.console.log = consoleLog;
   window.console.warn = consoleWarn;
   window.console.error = consoleError;
+  window.console.debug = consoleDebug;
   (window.console as any).hiddenError = hiddenError;
   window.console.info = consoleInfo;
 
@@ -43,6 +49,9 @@ export function initLogger(callback: (data: any) => void) {
 }
 
 function write(message: any, _arguments: any, level: string) {
+  if (!(window as any).debug) {
+    return;
+  }
   const args = Array.prototype.slice.call(_arguments);
   let msg = message;
   args.forEach((element) => {
@@ -92,17 +101,17 @@ function post(data: any) {
 }
 
 function consoleLog(message: any, ...args: any) {
-  _log(message, ...args);
+  _log(message, ...(args || []));
   write(message, args, 'log');
 }
 
 function consoleWarn(message: any, ...args: any) {
-  _warn(message, ...args);
+  _warn(message, ...(args || []));
   write(message, args, 'warn');
 }
 
 function consoleError(message: any, ...args: any) {
-  _error(message, ...args);
+  _error(message, ...(args || []));
   write(message, args, 'error');
 }
 
@@ -111,6 +120,11 @@ function hiddenError(message: any, ...args: any) {
 }
 
 function consoleInfo(message: any, ...args: any) {
-  _info(message, ...args);
+  _info(message, ...(args || []));
   write(message, args, 'info');
 }
+
+function consoleDebug(message: any, ...args: any) {
+  _debug(message, ...(args || []));
+  write(message, args, 'debug');
+}

mobile/src/app/services/device.service.ts

@@ -14,9 +14,11 @@ export class DeviceService {
 
   info() {
     return firstValueFrom(
-      this.trpc.device.info
-        .query()
-        .pipe(tap((info) => this.setDarkTheme(!!info.isBlackTheme)))
+      this.trpc.device.info.query().pipe(
+        tap((info) => {
+          this.setDarkTheme(!!info.isBlackTheme);
+        })
+      )
     );
   }
 

mobile/src/app/settings/settings.page.ts

@@ -29,6 +29,7 @@ import {
   refreshOutline,
   saveOutline,
   unlinkOutline,
+  bugOutline,
 } from 'ionicons/icons';
 import { BehaviorSubject } from 'rxjs';
 import { X_DEVICE_ID } from '../../../../web/src/server/constants';
@@ -37,6 +38,7 @@ import { DeviceService } from '../services/device.service';
 import { ErrorHandlerService } from '../services/error-handler.service';
 import { TrpcHeaders } from '../trpc-client';
 import { TrpcPureHeaders } from '../trpc-pure-client';
+import { activateSendLoggerMessageToServer } from '../remote-log';
 
 @Component({
   selector: 'app-settings',
@@ -49,6 +51,9 @@ import { TrpcPureHeaders } from '../trpc-pure-client';
       <ion-toolbar>
         <ion-title> Settings </ion-title>
         <ion-buttons slot="end">
+          <ion-button (click)="enableDebug()">
+            <ion-icon name="bug-outline"></ion-icon>
+          </ion-button>
           <ion-button (click)="loadDashboardInfo()" [disabled]="loading">
             <ion-icon name="refresh-outline"></ion-icon>
           </ion-button>
@@ -194,7 +199,13 @@ export class SettingsPage {
   loading$ = new BehaviorSubject(false);
 
   constructor() {
-    addIcons({ refreshOutline, saveOutline, qrCodeOutline, unlinkOutline });
+    addIcons({
+      refreshOutline,
+      saveOutline,
+      qrCodeOutline,
+      unlinkOutline,
+      bugOutline,
+    });
     // Initialize the error handler with the toast controller
     this.errorHandler.initialize(this.toastController);
   }
@@ -203,6 +214,17 @@ export class SettingsPage {
     await this.loadDashboardInfo();
   }
 
+  enableDebug() {
+    activateSendLoggerMessageToServer();
+    this.toastController
+      .create({
+        message: 'Debug mode enabled',
+        duration: 2000,
+        color: 'success',
+      })
+      .then((toast) => toast.present());
+  }
+
   async loadDashboardInfo() {
     // Set loading state to true when starting to load data
     this.loading$.next(true);

mobile/src/app/trpc-client.ts

@@ -63,7 +63,7 @@ function customFetch(
   });
 }
 
-export const { provideTrpcClient, TrpcClient, TrpcHeaders } =
+export const { provideTrpcClient, TrpcClient, TrpcHeaders} =
   createTrpcClient<AppRouter>({
     url: `${environment.apiUrl}/api/trpc`,
     options: { transformer: superjson },

mobile/src/global.scss

@@ -402,6 +402,16 @@ a {
   background-color: #1e3a8a;
 }
 
+.hidden {
+  display: none;
+}
+
+.mobile-hidden {
+  @media (max-width: 1023px) {
+    display: none;
+  }
+}
+
 ion-title {
   padding: 20px;
 }

web/patches/@analogjs+trpc+0.4.0.patch

@@ -1,7 +1,16 @@
 diff --git a/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs b/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
-index fd3f2b7..564f690 100644
+index fd3f2b7..ac5dcd8 100644
 --- a/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
 +++ b/node_modules/@analogjs/trpc/fesm2022/analogjs-trpc.mjs
+@@ -9,7 +9,7 @@ import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
+ const tRPC_CACHE_STATE = new InjectionToken('TRPC_HTTP_TRANSFER_STATE_CACHE_STATE');
+ const provideTrpcCacheState = () => ({
+     provide: tRPC_CACHE_STATE,
+-    useValue: { isCacheActive: new BehaviorSubject(true) },
++    useValue: { isCacheActive: new BehaviorSubject(false) },
+ });
+ const provideTrpcCacheStateStatusManager = () => ({
+     provide: APP_BOOTSTRAP_LISTENER,
 @@ -269,7 +269,7 @@ const createTrpcClient = ({ url, options, batchLinkOptions, }) => {
                              headers() {
                                  return TrpcHeaders();

web/src/app/app.ts

@@ -64,7 +64,7 @@ export const routeMeta: RouteMeta = {
             name="layout-dashboard"
             class="w-8 h-8 lg:mr-2 inline-block align-middle"
           ></i-lucide>
-          <span class="hidden lg:inline align-middle">My Dashboards</span>
+          <span class="mobile-hidden lg:inline align-middle">My Dashboards</span>
         </a>
 
         <nav class="flex flex-col space-y-4 w-full">
@@ -73,7 +73,7 @@ export const routeMeta: RouteMeta = {
             class="flex items-center p-3 rounded-xl bg-pastel-blue/10 text-pastel-blue font-semibold transition-all duration-300 hover:bg-pastel-blue/20"
           >
             <i-lucide name="grid-3x3" class="w-6 h-6 mr-0 lg:mr-3"></i-lucide>
-            <span class="hidden lg:inline">Dashboards</span>
+            <span class="mobile-hidden lg:inline">Dashboards</span>
           </a>
 
           <a
@@ -84,15 +84,15 @@ export const routeMeta: RouteMeta = {
               name="chart-bar-big"
               class="w-6 h-6 mr-0 lg:mr-3"
             ></i-lucide>
-            <span class="hidden lg:inline">Analytics</span>
+            <span class="mobile-hidden lg:inline">Analytics</span>
           </a>
 
           <a
             href="/settings"
             class="flex items-center p-3 rounded-xl text-gray-600 font-medium transition-all duration-300 hover:bg-gray-100 hover:text-gray-800"
           >
             <i-lucide name="settings" class="w-6 h-6 mr-0 lg:mr-3"></i-lucide>
-            <span class="hidden lg:inline">Settings</span>
+            <span class="mobile-hidden lg:inline">Settings</span>
           </a>
         </nav>
 
@@ -105,7 +105,7 @@ export const routeMeta: RouteMeta = {
               class="mt-2 text-red-500 font-medium hover:text-red-700 transition-colors flex items-center"
             >
               <i-lucide name="log-out" class="w-5 h-5 mr-0 lg:mr-2"></i-lucide>
-              <span class="hidden lg:inline">Sign Out</span>
+              <span class="mobile-hidden lg:inline">Sign Out</span>
             </button>
             <color-scheme-switcher class="flex items-center" />
           </div>