Archived Workflows UI error: `Failed to execute 'setItem' on 'Storage'`

[ltartarini]

Pre-requisites

• [X] I have double-checked my configuration
• [ ] I can confirm the issues exists when I tested with :latest
• [ ] I'd like to contribute the fix myself (see contributing guide)

What happened/what you expected to happen?

When opening the tab "Archived Workflows" in the web UI I got the following error:

Failed to execute 'setItem' on 'Storage': Setting the value of 'ArchiveListOptions/options' exceeded the quota.

In particular, I am using a Postgres storage backend to archive the workflows and I already tried to increase resources for both workflow-controller and argo-server.

Any idea?

Version

v3.3.5

Paste a small workflow that reproduces the issue. We must be able to run the workflow; don't enter a workflows that uses private images.

Cannot view any workflow in the UI.

[sarabala1979]

@ltartarini Thanks for fixing this bug. Please submit the PR. We are happy to review.

[tooptoop4]

@sarabala1979 i don't think anyone fixed. i am getting same issue on v3.3.9 stack trace:

react-dom.production.min.js:198 DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'ArchiveListOptions/options' exceeded the quota.
    at e.setItem (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:30:1302229)
    at t.saveHistory (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:577:704485)
    at oa (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:72729)
    at ra (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:72479)
    at Ha (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:82493)
    at Va (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:84967)
    at https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:98147
    at t.unstable_runWithPriority (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:555:3194)
    at Ts (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:98082)
    at Os (https://redactmyhost/main.7aa35a5a4bfeac381af7.js:546:97858)
fa @ react-dom.production.min.js:198
Ma.i.componentDidCatch.n.callback @ react-dom.production.min.js:211
oa @ react-dom.production.min.js:193
ra @ react-dom.production.min.js:193
Ha @ react-dom.production.min.js:216
Va @ react-dom.production.min.js:220
(anonymous) @ react-dom.production.min.js:250
t.unstable_runWithPriority @ scheduler.production.min.js:18
Ts @ react-dom.production.min.js:250
Os @ react-dom.production.min.js:249
Es @ react-dom.production.min.js:248
xs @ react-dom.production.min.js:245
$a @ react-dom.production.min.js:243
enqueueSetState @ react-dom.production.min.js:130
w.setState @ react.production.min.js:13
(anonymous) @ archived-workflow-list.tsx:194
Promise.then (async)
t.fetchArchivedWorkflows @ archived-workflow-list.tsx:193
t.changeFilters @ archived-workflow-list.tsx:142
onChange @ archived-workflow-list.tsx:99
onChange @ archived-workflow-filters.tsx:144
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-datepicker.min.js:1
(anonymous) @ react-dom.production.min.js:14
f @ react-dom.production.min.js:15
(anonymous) @ react-dom.production.min.js:15
k @ react-dom.production.min.js:17
E @ react-dom.production.min.js:18
L @ react-dom.production.min.js:18
T @ react-dom.production.min.js:21
xn @ react-dom.production.min.js:84
Ns @ react-dom.production.min.js:250
Ie @ react-dom.production.min.js:39
En @ react-dom.production.min.js:86
(anonymous) @ react-dom.production.min.js:251
t.unstable_runWithPriority @ scheduler.production.min.js:18
js @ react-dom.production.min.js:251
Cn @ react-dom.production.min.js:85

i wonder if its related to too many workflows which fill up the browser storage? i have over 35k in that month range

below is the javascript:

var r=this.scope+"/"+e,o=JSON.stringify(t);JSON.stringify(n)!==o?localStorage.setItem(r,o):localStorage.removeItem(r)

i guess it is not paginating by doing a new request to server every 500 rows but instead storing ALL workflows for the month in the browser in one go

https://github.com/argoproj/argo-workflows/issues/9570 maybe related

any idea @terrytangyuan ?

[alexec]

The bug is on this line of code:

https://github.com/argoproj/argo-workflows/blob/365b6df1641217d1b21b77bb1c2fcb41115dd439/ui/src/app/archived-workflows/components/archived-workflow-list/archived-workflow-list.tsx#L185

It should not save state to local storage.

[athityakumar]

@alexec - Is the scope of the solution for this issue about not saving the state at all for archived workflows into the browser's local storage, or to store the state to the browser's local storage with a pagination/max limit?

[alexec]

The code is saving more into the state that is needed. The line needs to be changed to something like

this.storage.setItem('options', {this.state.pagination}, {});

[athityakumar]

Just to confirm: Basically all the state variables (this.state.*) - except the this.state.workflows; can be stored to the browser in this line right?

[alexec]

That is correct.

[athityakumar]

Awesome. Can I work on the patch for this as part of Hacktoberfest, if no one is already working on it?

[athityakumar]

Opened a PR here: https://github.com/argoproj/argo-workflows/pull/9846

[juliev0]

@alexec Regarding @athityakumar 's question above: this PR does not save workflows to local storage at all (as opposed to paginating them). Do you feel that's okay?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is a mentoring request, please provide an update here. Thank you for your contributions.

[drpebcak]

Not stale