build(ui): add vite plugin to add relative file path to logger context

invokeai/frontend/web/package.json

@@ -138,6 +138,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",
     "knip": "^5.61.3",
+    "magic-string": "^0.30.17",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^7.6.1",
     "prettier": "^3.5.3",

invokeai/frontend/web/pnpm-lock.yaml

@@ -288,6 +288,9 @@ importers:
       knip:
         specifier: ^5.61.3
         version: 5.61.3(@types/node@22.16.0)(typescript@5.8.3)
+      magic-string:
+        specifier: ^0.30.17
+        version: 0.30.17
       openapi-types:
         specifier: ^12.1.3
         version: 12.1.3

invokeai/frontend/web/tsconfig.node.json

@@ -5,5 +5,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.mts"]
+  "include": ["vite.config.mts", "vite-plugin-logger-context.ts"]
 }

invokeai/frontend/web/vite-plugin-logger-context.ts

@@ -0,0 +1,51 @@
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+
+/**
+ * A Vite plugin that automatically adds file path context to logger calls.
+ */
+export function loggerContextPlugin(): Plugin {
+  return {
+    name: 'logger-context',
+    transform(code: string, id: string) {
+      // Only process TypeScript/JavaScript files in src directory
+      if (!id.includes('/src/') || !id.match(/\.(ts|tsx|js|jsx)$/)) {
+        return null;
+      }
+
+      // Check if the file imports logger
+      if (!code.includes("from 'app/logging/logger'") && !code.includes('from "app/logging/logger"')) {
+        return null;
+      }
+
+      const s = new MagicString(code);
+
+      // Extract relative path from src/
+      const srcIndex = id.indexOf('/src/');
+      const relativePath = srcIndex !== -1 ? id.substring(srcIndex + 5) : id.split('/').pop() || 'unknown';
+
+      // Match logger calls: logger('namespace')
+      const loggerRegex = /\blogger\s*\(\s*['"`](\w+)['"`]\s*\)/g;
+      let match;
+
+      while ((match = loggerRegex.exec(code)) !== null) {
+        const fullMatch = match[0];
+        const namespace = match[1];
+        const startIndex = match.index;
+        const endIndex = startIndex + fullMatch.length;
+
+        // Replace with logger('namespace').child({ filePath: 'path/to/file.ts' })
+        s.overwrite(startIndex, endIndex, `logger('${namespace}').child({ filePath: '${relativePath}' })`);
+      }
+
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true }),
+        };
+      }
+
+      return null;
+    },
+  };
+}

invokeai/frontend/web/vite.config.mts

@@ -8,6 +8,7 @@ import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 import dts from 'vite-plugin-dts';
 import eslint from 'vite-plugin-eslint';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { loggerContextPlugin } from './vite-plugin-logger-context';
 
 export default defineConfig(({ mode }) => {
   if (mode === 'package') {
@@ -17,6 +18,7 @@ export default defineConfig(({ mode }) => {
         react(),
         eslint(),
         tsconfigPaths(),
+        loggerContextPlugin(),
         visualizer(),
         dts({
           insertTypesEntry: true,
@@ -70,6 +72,7 @@ export default defineConfig(({ mode }) => {
       react(),
       mode !== 'test' && eslint({ failOnError: mode === 'production', failOnWarning: mode === 'production' }),
       tsconfigPaths(),
+      loggerContextPlugin(),
       visualizer(),
     ],
     build: {