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"
- 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
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
Assessment
This issue has not been assessed yet.