Prune console.log() (#5867)

Introduce a no-console rule in ESLint configuration and remove existing
console log statements throughout the codebase, replacing some with
warnings or comments.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5867-Prune-console-log-27e6d73d365081bcbad8c36cfb5b258c)
by [Unito](https://www.unito.io)

Author: Myestery

eslint.config.ts

@@ -90,6 +90,7 @@ export default defineConfig([
         }
       ],
       'unused-imports/no-unused-imports': 'error',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
@@ -207,5 +208,11 @@ export default defineConfig([
         }
       ]
     }
+  },
+  {
+    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
+    rules: {
+      'no-console': 'off'
+    }
   }
 ])

src/App.vue

@@ -44,7 +44,6 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   // @ts-expect-error fixme ts strict error
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
-  console.log('ComfyUI Front-end version:', config.app_version)
 
   if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)

src/components/widget/SampleModelSelector.vue

@@ -127,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -202,12 +202,4 @@ const selectedSort = ref<string>('popular')
 const selectedNavItem = ref<string | null>('installed')
 
 const gridStyle = computed(() => createGridStyle())
-
-watch(searchText, (newQuery) => {
-  console.log('searchText:', searchText.value, newQuery)
-})
-
-watch(searchQuery, (newQuery) => {
-  console.log('searchQuery:', searchQuery.value, newQuery)
-})
 </script>

src/components/widget/layout/BaseModalLayout.stories.ts

@@ -86,7 +86,7 @@ const createStoryTemplate = (args: StoryArgs) => ({
     const t = (k: string) => k
 
     const onClose = () => {
-      console.log('OnClose invoked')
+      // OnClose handler for story
     }
     provide(OnCloseKey, onClose)
 

src/composables/node/useNodePricing.ts

@@ -300,9 +300,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         const modeValue = String(modeWidget.value)
         const durationValue = String(durationWidget.value)
         const modelValue = String(modelWidget.value)
-        console.log('modelValue', modelValue)
-        console.log('modeValue', modeValue)
-        console.log('durationValue', durationValue)
 
         // Same pricing matrix as KlingTextToVideoNode
         if (modelValue.includes('v1-6') || modelValue.includes('v1-5')) {
@@ -356,9 +353,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         const modeValue = String(modeWidget.value)
         const durationValue = String(durationWidget.value)
         const modelValue = String(modelWidget.value)
-        console.log('modelValue', modelValue)
-        console.log('modeValue', modeValue)
-        console.log('durationValue', durationValue)
 
         // Same pricing matrix as KlingTextToVideoNode
         if (
@@ -564,9 +558,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         const model = String(modelWidget.value)
         const resolution = String(resolutionWidget.value).toLowerCase()
         const duration = String(durationWidget.value)
-        console.log('model', model)
-        console.log('resolution', resolution)
-        console.log('duration', duration)
 
         if (model.includes('ray-flash-2')) {
           if (duration.includes('5s')) {

src/lib/litegraph/src/LGraph.ts

@@ -274,8 +274,6 @@ export class LGraph
    * @param o data from previous serialization [optional]
    */
   constructor(o?: ISerialisedGraph | SerialisableGraph) {
-    if (LiteGraph.debug) console.log('Graph created')
-
     /** @see MapProxyHandler */
     const links = this._links
     MapProxyHandler.bindAllMethods(links)
@@ -532,7 +530,7 @@ export class LGraph
         this.errors_in_execution = true
         if (LiteGraph.throw_errors) throw error
 
-        if (LiteGraph.debug) console.log('Error during execution:', error)
+        if (LiteGraph.debug) console.error('Error during execution:', error)
         this.stop()
       }
     }
@@ -1167,7 +1165,7 @@ export class LGraph
       const ctor = LiteGraph.registered_node_types[node.type]
       if (node.constructor == ctor) continue
 
-      console.log('node being replaced by newer version:', node.type)
+      console.warn('node being replaced by newer version:', node.type)
       const newnode = LiteGraph.createNode(node.type)
       if (!newnode) continue
       _nodes[i] = newnode
@@ -1229,9 +1227,6 @@ export class LGraph
 
   /* Called when something visually changed (not the graph!) */
   change(): void {
-    if (LiteGraph.debug) {
-      console.log('Graph changed')
-    }
     this.canvasAction((c) => c.setDirty(true, true))
     this.on_change?.(this)
   }
@@ -1626,12 +1621,6 @@ export class LGraph
         } else {
           throw new TypeError('Subgraph input node is not a SubgraphInput')
         }
-        console.debug(
-          'Reconnect input links in parent graph',
-          { ...link },
-          this.links.get(link.id),
-          this.links.get(link.id) === link
-        )
 
         for (const resolved of others) {
           resolved.link.disconnect(this)
@@ -2233,7 +2222,7 @@ export class LGraph
           let node = LiteGraph.createNode(String(n_info.type), n_info.title)
           if (!node) {
             if (LiteGraph.debug)
-              console.log('Node not found or has errors:', n_info.type)
+              console.warn('Node not found or has errors:', n_info.type)
 
             // in case of error we create a replacement node to avoid losing info
             node = new LGraphNode('')

src/lib/litegraph/src/LGraphCanvas.ts

@@ -6406,7 +6406,7 @@ export class LGraphCanvas
 
           return true
         }
-        console.log(`failed creating ${nodeNewType}`)
+        console.error(`failed creating ${nodeNewType}`)
       }
     }
     return false

src/lib/litegraph/src/LGraphNode.ts

@@ -1950,7 +1950,7 @@ export class LGraphNode
     try {
       this.removeWidget(widget)
     } catch (error) {
-      console.debug('Failed to remove widget', error)
+      console.error('Failed to remove widget', error)
     }
   }
 
@@ -2583,12 +2583,7 @@ export class LGraphNode
     if (slotIndex !== undefined)
       return this.connect(slot, target_node, slotIndex, optsIn?.afterRerouteId)
 
-    console.debug(
-      '[connectByType]: no way to connect type:',
-      target_slotType,
-      'to node:',
-      target_node
-    )
+    // No compatible slot found - connection not possible
     return null
   }
 
@@ -2621,7 +2616,7 @@ export class LGraphNode
     if (slotIndex !== undefined)
       return source_node.connect(slotIndex, this, slot, optsIn?.afterRerouteId)
 
-    console.debug(
+    console.error(
       '[connectByType]: no way to connect type:',
       source_slotType,
       'to node:',
@@ -2661,7 +2656,7 @@ export class LGraphNode
     if (!graph) {
       // could be connected before adding it to a graph
       // due to link ids being associated with graphs
-      console.log(
+      console.error(
         "Connect: Error, node doesn't belong to any graph. Nodes must be added first to a graph before connecting them."
       )
       return null
@@ -2672,11 +2667,12 @@ export class LGraphNode
       slot = this.findOutputSlot(slot)
       if (slot == -1) {
         if (LiteGraph.debug)
-          console.log(`Connect: Error, no slot of name ${slot}`)
+          console.error(`Connect: Error, no slot of name ${slot}`)
         return null
       }
     } else if (!outputs || slot >= outputs.length) {
-      if (LiteGraph.debug) console.log('Connect: Error, slot number not found')
+      if (LiteGraph.debug)
+        console.error('Connect: Error, slot number not found')
       return null
     }
 
@@ -2696,7 +2692,7 @@ export class LGraphNode
       targetIndex = target_node.findInputSlot(target_slot)
       if (targetIndex == -1) {
         if (LiteGraph.debug)
-          console.log(`Connect: Error, no slot of name ${targetIndex}`)
+          console.error(`Connect: Error, no slot of name ${targetIndex}`)
         return null
       }
     } else if (target_slot === LiteGraph.EVENT) {
@@ -2728,7 +2724,8 @@ export class LGraphNode
       !target_node.inputs ||
       targetIndex >= target_node.inputs.length
     ) {
-      if (LiteGraph.debug) console.log('Connect: Error, slot number not found')
+      if (LiteGraph.debug)
+        console.error('Connect: Error, slot number not found')
       return null
     }
 
@@ -2955,11 +2952,12 @@ export class LGraphNode
       slot = this.findOutputSlot(slot)
       if (slot == -1) {
         if (LiteGraph.debug)
-          console.log(`Connect: Error, no slot of name ${slot}`)
+          console.error(`Connect: Error, no slot of name ${slot}`)
         return false
       }
     } else if (!this.outputs || slot >= this.outputs.length) {
-      if (LiteGraph.debug) console.log('Connect: Error, slot number not found')
+      if (LiteGraph.debug)
+        console.error('Connect: Error, slot number not found')
       return false
     }
 
@@ -3075,19 +3073,19 @@ export class LGraphNode
       slot = this.findInputSlot(slot)
       if (slot == -1) {
         if (LiteGraph.debug)
-          console.log(`Connect: Error, no slot of name ${slot}`)
+          console.error(`Connect: Error, no slot of name ${slot}`)
         return false
       }
     } else if (!this.inputs || slot >= this.inputs.length) {
       if (LiteGraph.debug) {
-        console.log('Connect: Error, slot number not found')
+        console.error('Connect: Error, slot number not found')
       }
       return false
     }
 
     const input = this.inputs[slot]
     if (!input) {
-      console.debug('disconnectInput: input not found', slot, this.inputs)
+      console.error('disconnectInput: input not found', slot, this.inputs)
       return false
     }
 
@@ -3116,19 +3114,16 @@ export class LGraphNode
 
         const target_node = graph.getNodeById(link_info.origin_id)
         if (!target_node) {
-          console.debug(
-            'disconnectInput: target node not found',
-            link_info.origin_id
+          console.error(
+            'disconnectInput: output not found',
+            link_info.origin_slot
           )
           return false
         }
 
         const output = target_node.outputs[link_info.origin_slot]
         if (!output?.links?.length) {
-          console.debug(
-            'disconnectInput: output not found',
-            link_info.origin_slot
-          )
+          // Output not found - may have been removed
           return false
         }
 

src/lib/litegraph/src/LiteGraphGlobal.ts

@@ -398,8 +398,6 @@ export class LiteGraphGlobal {
       throw 'Cannot register a simple object, it must be a class with a prototype'
     base_class.type = type
 
-    if (this.debug) console.log('Node registered:', type)
-
     const classname = base_class.name
 
     const pos = type.lastIndexOf('/')
@@ -415,7 +413,7 @@ export class LiteGraphGlobal {
 
     const prev = this.registered_node_types[type]
     if (prev && this.debug) {
-      console.log('replacing node type:', type)
+      console.warn('replacing node type:', type)
     }
 
     this.registered_node_types[type] = base_class
@@ -524,7 +522,7 @@ export class LiteGraphGlobal {
   ): LGraphNode | null {
     const base_class = this.registered_node_types[type]
     if (!base_class) {
-      if (this.debug) console.log(`GraphNode type "${type}" not registered.`)
+      if (this.debug) console.warn(`GraphNode type "${type}" not registered.`)
       return null
     }
 
@@ -637,19 +635,16 @@ export class LiteGraphGlobal {
         continue
 
       try {
-        if (this.debug) console.log('Reloading:', src)
         const dynamicScript = document.createElement('script')
         dynamicScript.type = 'text/javascript'
         dynamicScript.src = src
         docHeadObj.append(dynamicScript)
         script_file.remove()
       } catch (error) {
         if (this.throw_errors) throw error
-        if (this.debug) console.log('Error while reloading', src)
+        if (this.debug) console.error('Error while reloading', src)
       }
     }
-
-    if (this.debug) console.log('Nodes reloaded')
   }
 
   // separated just to improve if it doesn't work
@@ -749,7 +744,7 @@ export class LiteGraphGlobal {
     // convert pointerevents to touch event when not available
     if (sMethod == 'pointer' && !window.PointerEvent) {
       console.warn("sMethod=='pointer' && !window.PointerEvent")
-      console.log(
+      console.warn(
         `Converting pointer[${sEvent}] : down move up cancel enter TO touchstart touchmove touchend, etc ..`
       )
       switch (sEvent) {
@@ -774,7 +769,7 @@ export class LiteGraphGlobal {
           break
         }
         case 'enter': {
-          console.log('debug: Should I send a move event?') // ???
+          // TODO: Determine if a move event should be sent
           break
         }
         // case "over": case "out": not used at now

src/lib/litegraph/src/canvas/LinkConnector.ts

@@ -906,7 +906,6 @@ export class LinkConnector {
     if (connectingTo === 'output') {
       // Dropping new output link
       const output = node.findOutputByType(firstLink.fromSlot.type)?.slot
-      console.debug('out', node, output, firstLink.fromSlot)
       if (output === undefined) {
         console.warn(
           `Could not find slot for link type: [${firstLink.fromSlot.type}].`
@@ -918,7 +917,6 @@ export class LinkConnector {
     } else if (connectingTo === 'input') {
       // Dropping new input link
       const input = node.findInputByType(firstLink.fromSlot.type)?.slot
-      console.debug('in', node, input, firstLink.fromSlot)
       if (input === undefined) {
         console.warn(
           `Could not find slot for link type: [${firstLink.fromSlot.type}].`