[Unconfirmed] Classifier crashes on The American Soldier

[shaunanoordin]

Major Bug

Ticket: https://zooniverse.freshdesk.com/a/tickets/4257

A user has reported that the Classifier will crash when trying to work on The American Solider - but only Firefox, and (possibly) only on certain workflows.

• Error occurs when user types a significant amount of text into the textarea
• Error is identified as https://reactjs.org/docs/error-decoder.html/?invariant=185 - "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

• The error has only been confirmed by user on the workflow "Omnibus study of attitudes (Roll 18) VT-HIST3544" (Workflow 14690) and "Attitudes of Officers and Enlisted en in 8th and 9th Air Force (Roll 26) VT-HIST3544" (Workflow 14604)

❗ I have not yet been able to reproduce the error myself on Firefox, nor on Chrome.

Status

This error is now classified as unconfirmed. Investigation has now paused, until new developments arise.

[eatyourgreens]

We've had another report of this.

In working on identifying sound clips for the Filk Archive project, in annotating two of the three clips I've started on today, while typing text on my Android phone I was suddenly thrown to an error page. I copied part of the 2nd one, below. I have NFI (no idea whatsoever) what triggered this. Was my note overflowing an allowed length? I saw nothing in the project's data entry pages about such a limit.

There was an error retrieving project wingkitty/filk-archive. Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. https://zooniverse.freshdesk.com/a/tickets/5168

[eatyourgreens]

The text task calls setState from componentWillUpdate via handleResize. That could trigger an infinite loop since each state change will trigger componentDidUpdate, which will trigger handleResize. https://github.com/zooniverse/Panoptes-Front-End/blob/4b66bf3992a63af18b7b8b9832a6f8437c6f2b5a/app/classifier/tasks/text/index.jsx#L88-L96

[eatyourgreens]

I think the solution to this is that the call to handleResize() should be wrapped in an explicit check for changes in the text value. We only want to resize the block if the text value has increased or decreased.

https://github.com/zooniverse/Panoptes-Front-End/blob/4b66bf3992a63af18b7b8b9832a6f8437c6f2b5a/app/classifier/tasks/text/index.jsx#L37-L39

[eatyourgreens]

Alternatively, remove componentDidUpdate and handle resizing inside handleChange, which is only called after adding or deleting text.