Comfy-Org / Comfy-Org/ComfyUI_frontend

Huge node makes frontend irresponsive and confused: "Canvas exceeds max size", "Too much recursion", "Canvas is already in error state"

Open
#8,545 3 comments 1 reaction 0 assignees View on GitHub
area:ui has repro perf:speed Potential Bug
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

### Prerequisites

- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))

### What happened?

The following simple workflow completely breaks the frontend across sessions

Image

What will happen is that the `Show Text` makes 2048 entries, increase the node size and everything becomes irresponsive. When I reload the tab, the node still has the same huge size with many entries. All of this is expected. However, when I hit close workflow again, it looks normal, but nothing works anymore. I cannot close the workflow, open a new workflow or delete the node. Even when I close and reload again and again, nothing works anymore.

The only way to fix it is to delete the site histroy (History -> 127.0.0.1 -> Forget about this site)

### Steps to Reproduce

1. Hit run and reload
2. Close the workflow
3. Try to close the workflow again, open a new workflow or delete the faulty node

### How is this affecting you?

Crashes ComfyUI completely

### ComfyUI Frontend Version

1.37.11

### Browser

Firefox

### Console Errors

```javascript
Uncaught InternalError: too much recursion
useChainCallback useChainCallback.ts:31
useChainCallback useChainCallback.ts:32
useChainCallback useChainCallback.ts:32
useChainCallback useChainCallback.ts:32
...

Uncaught DOMException: CanvasRenderingContext2D.scale: Canvas exceeds max size.
resizeCanvas app.ts:880
setup app.ts:854

Uncaught DOMException: CanvasRenderingContext2D.scale: Canvas exceeds max size.
resizeCanvas app.ts:880
setup app.ts:854
c index.mjs:2613
gy runtime-core.esm-bundler.js:199
bo runtime-core.esm-bundler.js:206
call runtime-core.esm-bundler.js:6193
v reactivity.esm-bundler.js:1813
iie reactivity.esm-bundler.js:1849
bE runtime-core.esm-bundler.js:6221
Jt runtime-core.esm-bundler.js:6154
YV index.mjs:2609
setup app.ts:852
setup GraphCanvas.vue:432
Il runtime-core.esm-bundler.js:2815
gy runtime-core.esm-bundler.js:199
bo runtime-core.esm-bundler.js:206
__weh runtime-core.esm-bundler.js:2795
WU runtime-core.esm-bundler.js:385
HU runtime-core.esm-bundler.js:427
promise callback*jU runtime-core.esm-bundler.js:322
U_ runtime-core.esm-bundler.js:336
toe runtime-core.esm-bundler.js:7321
scheduler runtime-core.esm-bundler.js:6197
scheduler reactivity.esm-bundler.js:1830
trigger reactivity.esm-bundler.js:253
JI reactivity.esm-bundler.js:311
notify reactivity.esm-bundler.js:597
trigger reactivity.esm-bundler.js:571
set value reactivity.esm-bundler.js:1456
ne vue-router.mjs:3460
D vue-router.mjs:3325
promise callback*D vue-router.mjs:3292
V vue-router.mjs:3217
install vue-router.mjs:3659
use runtime-core.esm-bundler.js:3863
main.ts:66

Uncaught DOMException: CanvasRenderingContext2D.setTransform: Canvas is already in error state.
drawBackCanvas LGraphCanvas.ts:5104
draw LGraphCanvas.ts:4683
drawBackCanvas LGraphCanvas.ts:5139
drawBackCanvas LGraphCanvas.ts:5138
draw LGraphCanvas.ts:4683
Iw useLitegraphSettings.ts:22
gy runtime-core.esm-bundler.js:199
bo runtime-core.esm-bundler.js:206
call runtime-core.esm-bundler.js:6193
h reactivity.esm-bundler.js:1764
run reactivity.esm-bundler.js:225
v reactivity.esm-bundler.js:1823
gy runtime-core.esm-bundler.js:199
HU runtime-core.esm-bundler.js:408
promise callback*jU runtime-core.esm-bundler.js:322
n3 runtime-core.esm-bundler.js:317
scheduler runtime-core.esm-bundler.js:6205
scheduler reactivity.esm-bundler.js:1830
trigger reactivity.esm-bundler.js:253
JI reactivity.esm-bundler.js:311
notify reactivity.esm-bundler.js:597
trigger reactivity.esm-bundler.js:571
set value reactivity.esm-bundler.js:1456
set reactivity.esm-bundler.js:991
setup GraphCanvas.vue:433
Il runtime-core.esm-bundler.js:2815
gy runtime-core.esm-bundler.js:199
bo runtime-core.esm-bundler.js:206
__weh runtime-core.esm-bundler.js:2795
WU runtime-core.esm-bundler.js:385
HU runtime-core.esm-bundler.js:427
promise callback*jU runtime-core.esm-bundler.js:322
U_ runtime-core.esm-bundler.js:336
toe runtime-core.esm-bundler.js:7321
scheduler runtime-core.esm-bundler.js:6197
scheduler reactivity.esm-bundler.js:1830
trigger reactivity.esm-bundler.js:253
JI reactivity.esm-bundler.js:311
notify reactivity.esm-bundler.js:597
trigger reactivity.esm-bundler.js:571
set value reactivity.esm-bundler.js:1456
ne vue-router.mjs:3460
D vue-router.mjs:3325
promise callback*D vue-router.mjs:3292
V vue-router.mjs:3217
install vue-router.mjs:3659
use runtime-core.esm-bundler.js:3863
main.ts:66
```

### Logs

```shell

```

### Additional Context

_No response_

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-8545-Huge-node-makes-frontend-irresponsive-and-confused-Canvas-exceeds-max-size-Too-mu-2fb6d73d3650811d94b9e4ec86ac2c59) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.