运行Dash应用时出现「r is null」错误该如何解决？

报错根因定位 #

从错误栈的首条报错记录async-graph.js:1:7832可以确认，该r is null报错由dcc.Graph组件渲染触发，本质是前端解析组件属性时读取了空值字段。

排查思路 #

• 检查所有dcc.Graph对应的回调返回值：重点确认回调返回的figure对象是否合法，是否存在输入参数为空时返回None、空值，或者缺失data、layout必填字段的情况。
• 检查dcc.Graph的所有配置属性：确认style、config、animate等非必填属性是否传入了不合法空值，比如本该传字典的字段传了None，本该传布尔值的字段传了空字符串。
• 排查回调执行时序：是否存在多个回调同时修改同一个dcc.Graph的属性，前一个回调未完成赋值就触发后一个回调更新，导致中间态出现空值。
• 检查依赖版本兼容性：确认当前使用的dash、dash-core-components、plotly版本是否匹配，跨大版本混用会出现组件属性解析异常。

解决建议 #

• 给figure属性添加兜底逻辑：回调返回前先校验输入参数合法性，参数异常时返回合法的空figure结构{'data': [], 'layout': {}}，禁止直接返回None。
• 给修改Graph属性的回调添加prevent_initial_call=True参数，避免页面初始化时参数未就绪就触发回调返回空值。
• 若使用了Graph的动画能力，确认layout中transition相关配置字段值合法，不要给动画属性传空值。
• 升级依赖到匹配的稳定版本：执行pip install --upgrade dash plotly更新到最新正式版，消除版本兼容问题。

内容的提问来源于stack exchange，提问作者Ziv