Black Lives Matter. Please consider donating to Black Girls Code today.

UI when app crashes & Auto-generating React Components

When the dash server crashes or there’s an unhandled exception, is there a way to trigger a UI message that anyone can suggest.

I’m assuming this would need to be handled in dash or dash-renderer

To replicate, run this app, open it in browser, kill the server, switch back to the browser & change selection - the loading cursor will just keep spinning:

With dash hot reload, I put an alert if the reload hash request has failed more than 6 times (configurable), meaning the server has crashed on reload.

Hadn’t seen hot reload, nice.

Can you think of anything I could do to achieve this though in prod, ideally a user message dialog/notification …?

Ideally, I would use a SSE/WebSocket connection to the server in a custom component, when the connection dies the server has crashed and display an alert. Without SSE/WebSocket, you would need to poll the server like I do in the Reloader component of dash-renderer:

You can use the component cookiecutter to create a dash component:

$ cookiecutter https://github.com/plotly/dash-component-boilerplate

Ok - that makes sense. Have just created my first component - a wrapper around https://www.ag-grid.com, so should be straight forward.

You might also know this as well @Philippe - how hard would it be to take an existing react library & simply generate plotly dash components for it, eg. https://material-ui.com
https://github.com/StratoDem/sd-material-ui looks decent, however every property is manually mapped, so any new prop would need to be added/maintained, and there’s a couple of key components missing.

It depends on the library, if it’s mostly a prop based component library it should be easy to just wrap the component and it’s props and add props for the state and setProps handlers.

You can see an attempt I made to wrap react-mentions (2h work):

There was limitations to what I could do with that lib, so I decided to make my own component (2-3 days work):

Cheers. I was thinking more along the lines of whether i could modify extract-meta with the existing react material library, without writing an another js/react wrapper, and generate a Plotly dash component from there. Obviously my params would then have camel case styling rather than snake case, but it would be a fairly big win to effectively be able to use any react component in dash without writing any js.

For pure presentational components, this might be possible, but most components have some type of event handlers / dynamic properties, which will necessarily require a wrapper to get that data back into the python side, it can’t be done automatically.

Yep, of course, and I definitely needed one for ag-grid.com (eg. setRowData), however at a quick browse of https://material-ui.com it seems to be purely props-driven - and you would hope that there are other react components out there that are developed in the ‘react way’ & avoid the need for a non-prop extra api. Maybe I’m being optimistic.