Charts component crashes with TypeError during streaming: null data passed to Recharts

Aperta
  • Qualcosa non va?
#355 5 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@ankit-thesys ci sta già lavorando.

Dal 15/6/2026.

  • #487 di @Sh-dheeraj — chiusa senza merge
  • #569 di @MD-Mushfiqur123 — chiusa senza merge
  • #651 di @serhiizghama — chiusa senza merge
  • #760 di @AliMahmoudDev — chiusa senza merge

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

bug good first issue

Bug Description

The built-in Charts component in @openuidev/react-ui throws a TypeError: Cannot read properties of null (reading 'map') during streaming rendering. The error originates from Recharts' CategoricalChartWrapper.render() when the OpenUI Renderer passes partial/incomplete data to the chart component before the full dataset has streamed in.

Steps to Reproduce

  1. Scaffold a new project: npx @openuidev/cli@latest create --name test-app
  2. Configure an LLM provider (OpenRouter with Claude Sonnet 4 in my case)
  3. Send a prompt that generates a chart, e.g.: "Show me a CEO dashboard with quarterly revenue data for 4 regions"
  4. Observe the console error during streaming

Error Stack Trace

TypeError: Cannot read properties of null (reading 'map')
    at CategoricalChartWrapper.render (recharts/es6/chart/...)
    at renderByOrder (recharts/es6/util/...)
    at RenderNode (@openuidev/...)
    at renderDeep (@openuidev/...)
    at Charts component (@openuidev/react-ui/dist/genui-lib/...)
    at GenUIAssistantMessage (...)

Expected Behavior

The Charts component should guard against null/undefined data during progressive streaming. A simple data ?? [] fallback before passing to Recharts would prevent this.

Actual Behavior

The chart eventually renders correctly after streaming completes, but the console error fires during the streaming phase when the chart structure arrives before its data array.

Environment

  • @openuidev/react-ui: latest (installed 2026-03-18)
  • @openuidev/react-lang: latest
  • @openuidev/react-headless: latest
  • Next.js 16.1.6 (Turbopack)
  • React 19.2.3
  • LLM: Claude Sonnet 4 via OpenRouter
  • OS: Windows 11

Suggested Fix

In the Charts genui-lib component, add a null guard before passing data to Recharts:

// Before passing to <BarChart data={data}>
const safeData = data ?? [];

Additional Note

The FullScreen component also defaults logoUrl to https://crayonai.org/img/logo.png which appears to be a dead URL from the Crayon AI rebrand, causing broken image icons in the header and assistant avatar. Consider updating the default or removing it.

Lingua principale
TypeScript
Stelle
10k
Fork
698
Merge medio
1g 6h
PR unite (30g)
148

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di thesysdev/openui

Tutte le issue di thesysdev/openui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.