Dash suboptimal error messages indicating invalid input data

Here’s a minimal example based on (https://github.com/plotly/dash-recipes/blob/master/dash-table-conditional-formatting.py) which works perfectly fine:

#!/usr/bin/env python
import json

import dash
import dash_html_components as html
import pandas as pd

df = pd.read_json(json.dumps({"col1": {"1": 1, "2": 2, "3": 3}, "col2": {"1": 1, "2": 2, "3": 3}}))


def generate_table(dataframe, max_rows=100):
    rows = []
    for i in range(min(len(dataframe), max_rows)):
        row = []
        for col in dataframe.columns:
            value = dataframe.iloc[i][col]
            row.append(html.Td(value))
        rows.append(html.Tr(row))

    return html.Table(
        [html.Tr([html.Th(col) for col in dataframe.columns])] +
        rows)


app = dash.Dash()
app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})

app.layout = html.Div(children=[
    generate_table(df)
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8101, host="0.0.0.0")

However when the input data gets changed to

df = pd.read_json(json.dumps({"col1": {"1": 1, "2": 2, "3": 3}, "col2": {"1": {}, "2": 2, "3": 3}}))

The app fails. There is no debug information in the console and the browser sometimes displays “Error loading dependencies” and sometimes “Error loading layout”, seems like it picks one of these error messages by random.

In my opinion an error message such as “Invalid data” or even “Invalid data. No dicts in dataframe allowed” would be way better.

So the problem is that an html.Td component is being given a dictionary for the children prop. A more minimal example:

import dash
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(html.Tr(html.Td({})))

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

I think this error will get a nicer message when this PR implementing component validation is merged.