TypeError: r.*.destroy is not a function

[slishak]

I've recently updated all my Dash/Plotly depenendices to their latest versions:

dash==0.27.0
dash-core-components==0.30.2
dash-html-components==0.13.2
dash-renderer==0.14.1
plotly==3.2.1

I have a Dash app where the number and layout of subplots in one of my figures (consisting of lots of Scattergl traces) changes depending on user inputs. When the number/layout of subplots changes, sometimes I get the following errors in the Chrome console:

After this, the subplots seem to be drawn incorrectly (missing elements, incorrect sizes). If I trigger another redraw after this happens the figure is eventually drawn correctly. Unfortunately I can't share the app code but will see if I can reproduce it.

I was previously on the following, and had never seen this issue before (although despite this problem, in general drawing performance with my Dash apps is a lot better now):

dash==0.22.0
dash-core-components==0.26.0
dash-html-components==0.11.0
dash-renderer==0.13.0
plotly==3.1.0

[T4rk1n]

Can you set app.run_server(debug=True) and app.scripts.config.serve_locally=True and rerun the app so you can have the dev bundles and a better stacktrace (with the latest version you listed first).

If you can't share the code, maybe try to make a minimal example showing the behavior.

[slishak]

Thanks! I have now enabled the options you suggested, and will update this issue when I manage to capture this issue again (it's quite intermittent, which is also why I've had difficulty creating a reproducible example).

[slishak]

Have managed to trigger it again.

Uncaught (in promise) TypeError: r.line2d.destroy is not a function
    at Object.L.e._scene.r.destroy (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:132249)
    at Object.r.clean (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:102915)
    at Object.v.cleanPlot (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:110328)
    at e (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:97362)
    at Object.l.syncOrAsync (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:94533)
    at r.plot (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:97388)
    at Object.l.syncOrAsync (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:94533)
    at Object.r.react (plotly-1.41.0.min.js?v=0.30.2&m=1537860736:formatted:98097)
    at PlotlyGraph.plot (Graph.react.js?2a5f:80)
    at PlotlyGraph.componentWillReceiveProps (Graph.react.js?2a5f:168)


  | L.e._scene.r.destroy | @ | plotly-1.41.0.min.js…36:formatted:132249
  | r.clean | @ | plotly-1.41.0.min.js…36:formatted:102915
  | v.cleanPlot | @ | plotly-1.41.0.min.js…36:formatted:110328
  | e | @ | plotly-1.41.0.min.js…736:formatted:97362
  | l.syncOrAsync | @ | plotly-1.41.0.min.js…736:formatted:94533
  | r.plot | @ | plotly-1.41.0.min.js…736:formatted:97388
  | l.syncOrAsync | @ | plotly-1.41.0.min.js…736:formatted:94533
  | r.react | @ | plotly-1.41.0.min.js…736:formatted:98097
  | plot | @ | Graph.react.js?2a5f:80
  | componentWillReceiveProps | @ | Graph.react.js?2a5f:168
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateDOMChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateDOMChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateDOMChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _reconcilerUpdateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | updateChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateDOMChildren | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | receiveComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | _updateRenderedComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | _performComponentUpdate | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | updateComponent | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | performUpdateIfNecessary | @ | react-dom@15.4.2.min…4.1&m=1537860738:13
  | performUpdateIfNecessary | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | s | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | perform | @ | react-dom@15.4.2.min…4.1&m=1537860738:15
  | perform | @ | react-dom@15.4.2.min…4.1&m=1537860738:15
  | perform | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | T | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | closeAll | @ | react-dom@15.4.2.min…4.1&m=1537860738:15
  | perform | @ | react-dom@15.4.2.min…4.1&m=1537860738:15
  | batchedUpdates | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | u | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | r | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | enqueueSetState | @ | react-dom@15.4.2.min…4.1&m=1537860738:14
  | r.setState | @ | react@15.4.2.min.js?…4.1&m=1537860738:12
  | handleChange | @ | connect.js?55bc:302
  | dispatch | @ | createStore.js?61ed:173
  | (anonymous) | @ | index.js?d595:104
  | (anonymous) | @ | index.js?4dd3:14
  | dispatch | @ | applyMiddleware.js?05f2:35
  | handleJson | @ | index.js?f40b:586

Images from formatted plotly.js for the top few frames in the stack trace:

[slishak]

Turns out this was actually very easy to reproduce - it seems like any figure containing Scattergl traces and a variable subplot layout will cause this issue.

In the app below, moving any sliders will cause the figure to crash. Using add_scatter instead of add_scattergl removes the problem and the app runs as expected.

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
from plotly import tools
import random

app = dash.Dash()

sx = dcc.Slider(id='sx', min=1, max=5, value=1)
sy = dcc.Slider(id='sy', min=1, max=5, value=1)

app.layout = html.Div(children=[
    sx, sy,
    dcc.Graph(
        id='graph',
    )
])


@app.callback(
    Output('graph', 'figure'),
    [Input('sx', 'value'),
     Input('sy', 'value')]
)
def callback(nx, ny):
    fig = tools.make_subplots(ny, nx)
    for ix in range(nx):
        for iy in range(ny):
            fig.add_scattergl(x=[random.random() for i in range(20)],
                              y=[random.random() for i in range(20)],
                              mode='markers',
                              row=iy+1, col=ix+1)
    return fig


if __name__ == '__main__':
    app.scripts.config.serve_locally = True
    app.run_server(debug=True)

Versions:

dash==0.28.2
dash-core-components==0.33.0
dash-html-components==0.13.2
dash-renderer==0.14.1
plotly==3.3.0

[slishak]

For further info, the issue is still present when updating to:

dash==0.28.3
dash-core-components==0.34.0
dash-renderer==0.14.3

And for more interest, when the figure starts throwing errors and stops responding, you can sometimes coax the plot back into life by double clicking on a subplot and then clicking on a slider to redraw with the same layout - but it can end up looking pretty funky (see below)! It also generally seems to be more likely to work when reducing the number of subplots instead of increasing.

[slishak]

Fixed in plotly.js 1.42.0