feat(log): add debug mode

Pkcarreno · Oct 11, 2024 · c3f1765 · c3f1765
1 parent 798d1c9
commit c3f1765
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 9 deletions.
diff --git a/src/features/editor/providers/settings-dialog-provider/development/debug-mode-settings.tsx b/src/features/editor/providers/settings-dialog-provider/development/debug-mode-settings.tsx
@@ -0,0 +1,16 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { useSettingsStore } from '@/features/editor/stores/settings';
+
+export const DebugModeSettings = () => {
+  const { debugMode, updateDebugMode } = useSettingsStore();
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex items-center justify-between gap-2">
+        <Label>Logs</Label>
+        <Switch onCheckedChange={updateDebugMode} checked={debugMode} />
+      </div>
+    </div>
+  );
+};
diff --git a/src/features/editor/providers/settings-dialog-provider/development/index.tsx b/src/features/editor/providers/settings-dialog-provider/development/index.tsx
@@ -0,0 +1,13 @@
+import { DebugModeSettings } from './debug-mode-settings';
+
+export const DevelopmentSettings = () => {
+  return (
+    <div className="grid gap-4">
+      <h3 className="font-medium leading-none">Development</h3>
+      <small className="text-muted text-sm">
+        <b>Note:</b> These settings are intended for debugging purpose
+      </small>
+      <DebugModeSettings />
+    </div>
+  );
+};
diff --git a/src/features/editor/providers/settings-dialog-provider/index.tsx b/src/features/editor/providers/settings-dialog-provider/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/dialog';
 import { Separator } from '@/components/ui/separator';
 
+import { DevelopmentSettings } from './development';
 import { EditorSettings } from './editor';
 import { RuntimeSettings } from './runtime-settings';
 
@@ -51,6 +52,8 @@ export const SettingsDialogProvider: React.FC<Props> = ({ children }) => {
           <RuntimeSettings />
           <Separator />
           <EditorSettings />
+          <Separator />
+          <DevelopmentSettings />
         </DialogContent>
       </Dialog>
     </SettingsDialogContext.Provider>

diff --git a/src/features/editor/stores/settings/index.ts b/src/features/editor/stores/settings/index.ts
@@ -13,6 +13,7 @@ export interface SettingsState {
   layout_direction: PanelGroupProps['direction'];
   isFirstTime: boolean;
   vimMode: boolean;
+  debugMode: boolean;
   updateAutoRun: (value: boolean) => void;
   updateAutoRunTimeout: (value: number) => void;
   updateLoopSafeguardThreshold: (value: number) => void;
@@ -21,6 +22,7 @@ export interface SettingsState {
   updateLayoutDirection: (value: PanelGroupProps['direction']) => void;
   updateIsFirstTime: (value: boolean) => void;
   updateVimMode: (value: boolean) => void;
+  updateDebugMode: (value: boolean) => void;
 }
 
 const _useSettingsStore = create<SettingsState>()(
@@ -34,6 +36,7 @@ const _useSettingsStore = create<SettingsState>()(
       layout_direction: 'horizontal',
       isFirstTime: true,
       vimMode: false,
+      debugMode: false,
       updateAutoRun: (value) => set({ auto_run: value }),
       updateAutoRunTimeout: (value) => set({ auto_run_timeout: value }),
       updateLoopSafeguardThreshold: (value) =>
@@ -44,13 +47,15 @@ const _useSettingsStore = create<SettingsState>()(
       updateLayoutDirection: (value) => set({ layout_direction: value }),
       updateIsFirstTime: (value) => set({ isFirstTime: value }),
       updateVimMode: (value) => set({ vimMode: value }),
+      updateDebugMode: (value) => set({ debugMode: value }),
     }),
     {
       name: 'settings-storage',
       version: 1,
       migrate: (persistedState, version) => {
         if (version === 0) {
           (persistedState as SettingsState).vimMode = false;
+          (persistedState as SettingsState).debugMode = false;
           (persistedState as SettingsState).loop_safeguard_threshold = 1000;
         }
 
@@ -66,3 +71,4 @@ export const SettingsLoopSafeguardThreshold = () =>
   _useSettingsStore.getState().loop_safeguard_threshold;
 export const SettingsLoopSafeguardTimeout = () =>
   _useSettingsStore.getState().loop_safeguard_timeout;
+export const SettingsDebugMode = () => _useSettingsStore.getState().debugMode;
diff --git a/src/features/editor/types/index.ts b/src/features/editor/types/index.ts
@@ -69,6 +69,7 @@ export type remoteControlerOutsideWorker =
 
 export type remoteControlerInsideWorkerOptions = {
   loopThreshold: number;
+  debugMode: boolean;
 };
 
 export type remoteControlerInsideWorker =

diff --git a/src/features/editor/utils/debug.ts b/src/features/editor/utils/debug.ts
@@ -0,0 +1,5 @@
+export const DebugLog = (...args: unknown[]) => {
+  console.debug('DEBUG: ', ...args);
+};
+
+export const DebugLogVoid = (..._: unknown[]) => {};
diff --git a/src/features/editor/utils/engine/controller.ts b/src/features/editor/utils/engine/controller.ts
@@ -7,18 +7,22 @@ import type {
 
 import { appendLogs } from '../../stores/editor';
 import {
+  SettingsDebugMode,
   SettingsLoopSafeguardThreshold,
   SettingsLoopSafeguardTimeout,
 } from '../../stores/settings';
+import { DebugLog, DebugLogVoid } from '../debug';
 
 let workerRef: Worker | undefined = undefined;
 let timeoutIdRef: ReturnType<typeof setInterval> | undefined = undefined;
+let DEBUG = DebugLogVoid;
 
 const workerPostMessage: () => (params: remoteControlerInsideWorker) => void =
   () => (params) =>
     workerRef && (workerRef as Worker).postMessage(params);
 
 export function stopJs() {
+  DEBUG('stop execution');
   if (workerRef) {
     workerPostMessage()({ command: 'dispose' });
     workerRef.terminate();
@@ -30,8 +34,12 @@ export function stopJs() {
   return true;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export function runJs(code: string) {
   const startTime = Date.now();
+  const debugMode = SettingsDebugMode();
+
+  DEBUG = debugMode ? DebugLog : DebugLogVoid;
 
   return new Promise((resolve, reject) => {
     const worker = new Worker(
@@ -80,7 +88,12 @@ export function runJs(code: string) {
           logger(data.data);
           break;
         case 'error':
-          console.log('data:', data.data, 'duration:', data.duration);
+          DEBUG(
+            'returning error. data:',
+            data.data,
+            'duration:',
+            data.duration,
+          );
           logError(data.data, data.duration);
           stopJs();
           reject(data.data);
@@ -92,12 +105,13 @@ export function runJs(code: string) {
       }
     };
 
-    console.log('apunto de ejecutar al worker');
+    DEBUG('Start Execution');
     workerPostMessage()({
       command: 'run',
       code: code,
       options: {
         loopThreshold: SettingsLoopSafeguardThreshold(),
+        debugMode,
       },
     });
   });

diff --git a/src/features/editor/utils/engine/execution-manager.ts b/src/features/editor/utils/engine/execution-manager.ts
@@ -7,10 +7,12 @@ import type {
   SystemError,
 } from '@/features/editor/types';
 
+import { DebugLog, DebugLogVoid } from '../debug';
 import { rfdc } from './../rfdc';
 import { disposeQuickJS, executeCode } from './runtime';
 
 let startTimeRef: number | undefined;
+let DEBUG = DebugLogVoid;
 
 const startTimer = () => {
   startTimeRef = Date.now();
@@ -85,6 +87,7 @@ const exposeGlobals = {
   URL: UrlHandler,
 };
 
+// eslint-disable-next-line max-lines-per-function
 self.onmessage = async function ({
   data,
 }: {
@@ -94,28 +97,33 @@ self.onmessage = async function ({
     case 'run':
       try {
         const userCode = data.code;
+        DEBUG = data.options.debugMode ? DebugLog : DebugLogVoid;
         if (userCode.trim().length > 0) {
           const evaluationResult = await executeCode({
             code: userCode.trim(),
             options: {
               exposeGlobals: exposeGlobals,
               startTimer: startTimer,
               loopThreshold: data.options.loopThreshold,
+              debugMode: data.options.debugMode,
             },
           });
 
           switch (evaluationResult.status) {
             case 'success':
+              DEBUG('execution successful');
               postMessage({ command: 'result', data: evaluationResult.data });
               break;
             case 'error':
+              DEBUG('execution failed');
               postMessage({
                 command: 'error',
                 data: evaluationResult.data,
                 duration: getTimeSinceExecutionBegan(),
               });
               break;
             default:
+              DEBUG('execution failed: unknown error');
               postMessage({
                 command: 'error',
                 data: 'evaluation response unhandled',
@@ -124,6 +132,7 @@ self.onmessage = async function ({
               break;
           }
         } else {
+          DEBUG('No code to be executed');
           postMessage({
             command: 'error',
             data: 'There is no code that can be evaluated.',
@@ -142,9 +151,11 @@ self.onmessage = async function ({
       }
       break;
     case 'dispose':
+      DEBUG('dispose worker order');
       disposeQuickJS();
       break;
     default:
+      DEBUG('unknown command');
       postMessage({ command: 'error', data: 'Not valid execution command.' });
       break;
   }

diff --git a/src/features/editor/utils/engine/runtime.ts b/src/features/editor/utils/engine/runtime.ts
@@ -7,13 +7,16 @@ import type {
   remoteControlerInsideWorkerOptions,
   SystemError,
 } from '../../types';
+import { DebugLog, DebugLogVoid } from '../debug';
 import { getQuickJS } from '../quick-js';
 
 let arenaRef: Arena;
 let ctxRef: QuickJSContext;
 
+let DEBUG = DebugLogVoid;
+
 export const disposeQuickJS = () => {
-  console.log('dispose arena and ctx');
+  DEBUG('dispose arena and ctx');
   if (arenaRef) {
     arenaRef.dispose();
   }
@@ -74,11 +77,13 @@ interface executeCodeProps {
 export const executeCode: (
   data: executeCodeProps,
 ) => Promise<executeCodeOutputTypes> = async ({ code, options }) => {
-  const { exposeGlobals, startTimer, loopThreshold } = options;
+  const { exposeGlobals, startTimer, loopThreshold, debugMode } = options;
+
+  DEBUG = debugMode ? DebugLog : DebugLogVoid;
 
   return new Promise(async (resolve, reject) => {
     try {
-      console.log('start eval');
+      DEBUG('start eval');
       const ctx = await getQuickJS().then((deps) => {
         return deps.newContext();
       });
@@ -90,6 +95,7 @@ export const executeCode: (
       ctx.runtime.setMemoryLimit(1024 * 640);
       ctx.runtime.setMaxStackSize(1024 * 320);
       ctx.runtime.setInterruptHandler(() => {
+        DEBUG('interrupt handler triggered. time: ', interruptCycles);
         return ++interruptCycles > loopThreshold;
       });
 
@@ -98,20 +104,20 @@ export const executeCode: (
       });
       arenaRef = arena;
 
-      console.log('expose functions');
+      DEBUG('expose functions');
       arena.expose(exposeGlobals);
 
-      console.log('eval the code');
+      DEBUG('eval the code');
       startTimer();
       const result = await arena.evalCode(code);
 
-      console.log('execute pending jobs');
+      DEBUG('execute pending jobs');
       arena.executePendingJobs();
 
       let error = undefined;
       let success = undefined;
 
-      console.log('check output status', result);
+      DEBUG('check output status', result);
       if (result) {
         if (result.error) {
           error = ctx.dump(result.error);