Retool Crashes after loading query displaying stack trace

[Webster_Wing]

Typically, when I write incorrect Javascript into a Retool, it is able to run the rest of the app. However, in this case, I'm encountering a bug which causes my entire app to crash in some cases, which is making debugging difficult. The crash happens after a query runs for some amount of time, and I have no idea how to fix it. I cannot find my own call to .substring(), which shows up in the stack trace.

Here's a screenshot an the entire contents of the trace:

TypeError: Cannot read properties of undefined (reading 'substring')
    at l.render (https://retool-edge.com/widgets.21d2e6694bd204d794db.js:1:318022)
    at Ja (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3384314)
    at $a (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3384096)
    at tu (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3428558)
    at Bu (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3412228)
    at Uu (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3412073)
    at Fu (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3411906)
    at Iu (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3408739)
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3357440
    at t.unstable_runWithPriority (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3584317)
    at Zo (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3357217)
    at $o (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3357385)
    at Yo (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3357320)
    at Du (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3409060)
    at Object.notify (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1239820)
    at t.notifyNestedSubs (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1239390)
    at t.handleChangeWrapper (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1239458)
    at g (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3557392)
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750820
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750090
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750096
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:675346
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750266
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1751180
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3513641
    at b (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525428)
    at Generator._invoke (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525208)
    at forEach.e.<computed> [as next] (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525608)
    at b (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525428)
    at t (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525690)
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3526056
    at new Promise (<anonymous>)
    at new t (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3529176)
    at o (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3526035)
    at T._invoke (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3526093)
    at forEach.e.<computed> [as next] (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3525608)
    at p.async (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3522075)
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3513530
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1090692
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1090538
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:939533
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750696
    at https://retool-edge.com/app.21d2e6694bd204d794db.js:2:3545541
    at Object.dispatch (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1750316)
    at s (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:896134)
    at E (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:403981)
    at Object.commitModelOperations (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:404180)
    at e.value (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:1864983)
    at p.handleMessageEventWithData (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:412410)
    at messageListener (https://retool-edge.com/app.21d2e6694bd204d794db.js:2:401318)

[Kabirdas]

Hey @Webster_Wing!

Does this happen particularly when the query finishes or as it's running? It might be helpful to see a screenshot of the query itself along with any components it updates or queries that run in parallel with it

[Webster_Wing]

@Kabirdas
Here's a screenshot of the query which causes the app to crash after it finishes:

The query is referenced by a chart component:

Here's a picture of the chart in question:

And the "inspect" section in the sidebar:

The puzzling thing is that there is a selector at the top of the tool with all of our campaigns in it, and there's only one option, which upon selecting, causes the app to crash. Very strange bug

[Kabirdas]

It might be worth disconnecting the query from the chart and then inspecting the data that comes back from that particular option. Some questions to ask might be:

• Can you hardcode the data into the chart and have it function?
• Does only passing dataset1 or dataset2 work?
• If you create a new chart and pass the data in does it behave properly?

I don't see any obvious cause here either so taking a more general approach of sectioning things off and narrowing down what's causing the problem is the way I'd go here!

[Webster_Wing]

Turns out, when I was referencing budgetChart.data.hour in the label section, I had mis-spelled the key. Changing it to budgetChart.data.HOUR prevents the app from crashing, but I am still confused as to why it crashed in the first place.

[Kabirdas]

Glad you were able to find the issue! Do you know when this chart was first created? From the screenshots you posted it looks like you may be using a deprecated version of the component.