[BUG] RangeError: Maximum call stack size exceeded in callback graph with circular dependencies

[samlishak-artemis]

Describe your context

dash                          1.20.0
dash-bootstrap-components     0.12.2
dash-core-components          1.16.0
dash-html-components          1.1.3
dash-renderer                 1.9.1
dash-table                    4.11.3

• if frontend related, tell us your Browser, Version and OS

  • OS: macOS Big Sur
  • Browser: Chrome
  • Version: 90.0.4430.212 (Official Build) (x86_64)

Describe the bug

When clicking the green box in the callback graph for a specific callback with circular dependencies, the callback graph crashes with the following stack trace:

RangeError: Maximum call stack size exceeded

    at RegExp.exec (<anonymous>)
    at RegExp.[Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at cleanMetaChars (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:16216:14)
    at Object.populate (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:16315:14)
    at Selector.parse (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:16723:31)
    at new Selector (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:17209:15)
    at Collection.filter (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:19727:14)
    at getEdgeTypes (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:97032:21)
    at ascend (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617985068.dev.js:97057:19)

The above error occurred in the <CallbackGraph> component:
    in CallbackGraph (created by UnconnectedCallbackGraphContainer)
    in UnconnectedCallbackGraphContainer (created by ConnectFunction)
    in ConnectFunction (created by DebugMenu)
    in div (created by DebugMenu)
    in div (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by withRadiumContexts(UnconnectedGlobalErrorContainer))
    in withRadiumContexts(UnconnectedGlobalErrorContainer) (created by ConnectFunction)
    in ConnectFunction (created by UnconnectedContainer)
    in UnconnectedContainer (created by ConnectFunction)
    in ConnectFunction (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by ConnectFunction)
    in ConnectFunction (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

React will try to recreate this component tree from scratch using the error boundary you provided, UnconnectedCallbackGraphContainer.

So far I haven't reproduced this bug individually so I don't know if it's caused by the circular dependency - I will update this issue with more information if I manage to reproduce it.
Confirmed that it is reproducible with the simple circular callback example from the Dash docs.

Expected behavior

Should show stats for that callback when clicking the box.

Screenshots

[samlishak-artemis]

This issue can be reproduced using the standard "Circular callbacks" example from the docs:

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

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        dcc.Slider(
            id="slider-circular", min=0, max=20, 
            marks={i: str(i) for i in range(21)}, 
            value=3
        ),
        dcc.Input(
            id="input-circular", type="number", min=0, max=20, value=3
        ),
    ]
)
@app.callback(
    Output("input-circular", "value"),
    Output("slider-circular", "value"),
    Input("input-circular", "value"),
    Input("slider-circular", "value"),
)
def callback(input_value, slider_value):
    ctx = dash.callback_context
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]
    value = input_value if trigger_id == "input-circular" else slider_value
    return value, value

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

[kravitsjacob]

Did you ever figure out a solution or a workaround for this? I am running into the same issue.

[samlishak-artemis]

Unfortunately not!

[nathan-chan-brt]

I also ran into this and posted on the plotly community https://community.plotly.com/t/callback-graph-throws-maximum-call-stack-size-exceeded-error-on-circular-callback-example/63480

[emilhe]

One possible workaround could be to use the CycleBreaker transform from dash-extensions,

https://www.dash-extensions.com/pages/transforms/cycle-breaker-transform

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson

[cbadams2]

Hi @gvwilson, I would like to request that this issue remain open. It remains unresolved in 2.18.1, and is a challenge for debugging.

[erklem]

I see this issue in dash 3.0.4. I have one callback that updates the traces of figure and one that updates the shape positions on that figure.

TraceCallback has inputs A, B, and output y
ShapeCallback has inputs B, C, D, E, and output y.

I get this error when trying to view the ShapeCallback in the callback graph. The callbacks are properly configured with allow_duplicate, prevent_initial_call, etc. so the app functions properly - I just can't view this callback in the callback graph.