Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Charts never render with Reflex 0.10: the /_xy namespace socket is never connected

クローズ 初心者向け
  • 何か問題がありますか？
#526 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@masenf がすでに取り組んでいます。

2026年10月13日 から。

  • #527 @masenf による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, python, react
領域
backend, frontend

調査の方向性

XYChart.jsx から始め、xySocket() が reflex_base/.templates/web/utils/state.js にある Reflex の createSocket とともに、Socket.IO の namespace socket をどのように作成または再利用するかを追ってください。issue に記載された socket.io-client の接続動作を確認し、次に Reflex 0.10 で再現してください。完了条件は、namespace が接続され、チャートが canvas でレンダリングされることです。Reflex 0.9.13 で既存の動作が維持されることも確認してください。

索引モデルが issue の本文から書いたものです。

説明

Summary

With Reflex 0.10.0, every xy chart in a Reflex app renders empty: the chart's wrapper div mounts, the figure token arrives in state, but no canvas is ever created. Reflex 0.9.13 with the same app and xy[reflex]==0.0.7 renders normally.

Root cause

Reflex 0.10 creates its Socket.IO socket ahead of time with autoConnect: false (reflex_base/.templates/web/utils/state.js, createSocket, used for the "warm socket"). None of 0.9.8 to 0.9.13 does that.

XYChart.jsx's xySocket() deliberately shares Reflex's manager (same URL and path, so io() returns a namespace socket on the cached Manager). A namespace socket only opens itself when the manager was created with autoConnect on (if (this.io._autoConnect) this.open() in socket.io-client's Socket constructor). Because Reflex now creates the manager first with autoConnect: false, the /_xy namespace socket is never connected:

  • no 40/_xy CONNECT packet ever goes out on the websocket;
  • with localStorage.xy_debug = "1", the effect logs effect run {... hasEl: true} for every chart, but never xy namespace connected nor xy connect_error;
  • every sub emit is buffered forever, so no figure payload arrives.

Reproduction

  1. A Reflex app using reflex_xy.XYPlugin() and any live chart (figure= handle).
  2. reflex==0.10.0, xy[reflex]==0.0.7, Chrome.
  3. Open a page with a chart: the container is empty and document.querySelectorAll("canvas").length === 0.
  4. Downgrade to reflex==0.9.13: the charts render.

Suggested fix

Connect the namespace explicitly instead of relying on the shared manager's autoConnect, e.g. in xySocket():

sharedSocket = io(nsUrl.href, { /* unchanged options */ });
sharedSocket.on("connect", () => dbg("xy namespace connected"));
sharedSocket.on("connect_error", (e) => dbg("xy connect_error", String(e)));
if (!sharedSocket.connected) sharedSocket.connect();
return sharedSocket;

connect() is a no-op on an already-active socket, so this is safe whichever side creates the manager first.

主要言語
Python
スター
1.9k
フォーク
75
平均マージ
1時間 18分
マージ済み PR（30日）
7

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

reflex-dev/xy のほかの issue

reflex-dev/xy の issue をすべて見る

似ている issue

Python の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。