Hello there
If outputs are not in the initial dash layout, but inputs are, does Dash still execute these callbacks, or not?
I’m trying to debug my app which crashes randomly, sometimes throwing an error in the console about a 3D scatter line graph, which is not even on the page that I am currently reading…the app is online so if someone is a real bug hunter, feel free…
I’ve been trying to isolate what triggers the crash without success for several hours. Sometimes it crashes when I press “CTRL” and click on a graph. Sometimes it’s when I click on a button which is the input of a callback based on dcc.location, that is, it crashes when I change the page I’m reading. Sometimes it’s when datapoint are missing. It looks like something stays pending or stuck somewhere, but i can’t find out what.
So, back to the basis: Is it possible for a callback whose Output is not in the layout, to be the cause of a crash? Would the content of this callback be executed when Inputs are triggered?
This issue doesnt relate to the [‘suppress_callback_exceptions’], which is set to True. When I write “crash”, I mean that i have to force the refresh of the app in my browser to have the app reactive again. The server (even in localhost) does not crash. It’s the app itself which doesnt respond to anything anymore
Ok, I can describe what cause the app to freeze but I dont know why it freezes. It seems like witchcraft 
- I’m on the main page of my app
- I click on a tab, this loads the content, display the graph. Everything works fine and relatively smoothly. No problem, no warning in the console
- I click on a dcc.Link which displays another page. So far so good. This page must be empty, there is just a html.Div([])
- I press on CTRL without doing anything else, and the app freeze. The console throws an error for the graph which was on the previous page, 3 sec earlier. No reason.
Why ??? Does anyone ever had to deal with something similar?? @chriddyp perhaps?
Yikes, that’s bad! Seems like there’s an event handler that’s not getting cleaned up, and is trying to execute with no target. I tried to reproduce from your description though, with no luck. Can you provide app code that shows the problem? Also what OS, browser, and Dash version are you using?
server is on Ubuntu 18.04.2 LTS ;
dash==1.1.1
dash-core-components==1.1.1
dash-daq==0.1.5
dash-html-components==1.0.0
dash-renderer==1.0.0
dash-table==4.1.0
decorator==4.3.0
Flask==1.0.2
Flask-Compress==1.4.0
gunicorn==19.9.0
On my PC, OS is Windows 10, browser is Chrome Version 76.0.3809.100 (Build officiel) (64 bits)
Perhaps should I add that in my tab, 4 div are loaded;
The first one contains a “controle panel”, with a range sliders, buttons, dropdown
the second one contains a figure, type bar, and a toggle to switch to type line
the third one contains a figure, type line3d
the fourth one contains a pie chart
The error message which pops up in the console when i press CTRL after i either change the page (click on dcc.Link) or change the tab (click on another tab) is:
react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:117 Error: An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:
{
"props": {
"children": [
null,
{
"props": {
"children": [
null,
{
"props": {
"children": {
"props": {
"children": [
{
"props": {
"children": [
null,
{
"props": {
"children": [
{
"props": {
"children": [
{
"props": {
"children": [
{
"props": {
"hoverData": {
"points": [
{
"x": "Model 3",
"y": "30-Jun-2019",
"z": 34044,
"curveNumber": 0,
"pointNumber": 25
}
]
}
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
}
}
}
]
}
}
]
}
}
at B (TreeContainer.js:46)
at q (TreeContainer.js:225)
at G (TreeContainer.js:263)
at TreeContainer.js:303
at connect.js:110
at i.updateMergedPropsIfNeeded (connect.js:224)
at i.render (connect.js:348)
at ce (react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:98)
at qg (react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:97)
at hi (react-dom@16.8.6.min.js?v=1.0.0&m=1558624993:104)
Alright, I’ve reproduced this in a simple form. Thanks for the report @David22 - we’ll track it down.
app.layout = html.Div([
html.Button('toggle children', id='tog'),
html.Div(id='out')
])
@app.callback(
Output('out', 'children'),
[Input('tog', 'n_clicks')]
)
def show_output(num):
if (num or 0) % 2:
return dcc.Graph(figure=dict(data=[dict(
type='scatter3d', x=[1, 2], y=[3, 4], z=[5, 6]
)]))
else:
return 'Nope, no graphs here...'
(Run this, click the button until the graph appears and then disappears, then press <ctrl> - essentially the same error you observed happens.)
2 Likes
This issue is fixed in https://github.com/plotly/dash-core-components/pull/604 and will be included in the dash 1.2 release, expected some time next week.
2 Likes
Thank you very much! But what exactly happens when user presses on CTRL ? What does it trigger?
Honestly I don’t fully understand why it’s happening, but somehow CTRL is triggering a rerender of the 3D scene and making it think a new point was hovered on - generating an event from this line: https://github.com/plotly/plotly.js/blob/11c9879d3ec0edfd0597e6f8303682f8014c3ecc/src/plots/gl3d/scene.js#L186
I guess maybe it rerenders because CTRL changes the mouse interaction mode, from rotate to pan?
1 Like
Oh yes, it makes sense, CTRL changes the rotation/translation mode. That might be the cause, indeed!