0

As the title states, I am creating a full-stack dashboard where I do some Python data analysis and then visualization using Altair on the backend and then design the dashboard with React on the front-end. Obviously, I would like those same charts to display on the front-end.

Creating the chart and then passing the related JSON to the front-end is pretty straightforward. I simply define a route in Python and then create a function that returns the chart:

chart = altair.Chart(XXX) 
chartJson = chart.to_json()
chartFile= json.dumps(chartJson)

On the front end, I use Axios to get the chart's JSON and then I save it by setting it as a variable within a useState hook. I can then access the variable and print it, without a problem. Even on the front-end, it appears to be properly designed as a JSON object.

const [chart, setChart] = useState("");

The issue is that when I try to render the chart using react-Vega using the following conditional render:

{chart ? "<"Vega spec={chart} /">" : ""}

I get the following error:

ERR_ABORTED 431 (Request Header Fields Too Large)

This doesn't make sense to me, since I have already passed over the chart's JSON file successfully to the front-end? When I examine the JSON, it looks OK. In fact, if I copy it exactly from my devtools console and paste it into a new front-end React component using the above Vega command, it renders just fine. So, it appears to be in the correct format.

I have tried using Fetch to access the JSON file, and still had the same error. I also tried json.stringify() on the file, but that also made no difference.

Has anyone else experienced this issue before, or can please help me with it? Thanks in advance,

Ferin Patel
  • 3,424
  • 2
  • 17
  • 49
Rob Liou
  • 13
  • 3
  • The headers are a part of the request, not the request body where JSON is located. That why you get the same error with `fetch()` also. – Biller Builder Nov 15 '22 at 08:09
  • You need to look at the response headers (https://developer.mozilla.org/en-US/docs/Web/API/Response/headers) when the response status (https://developer.mozilla.org/en-US/docs/Web/API/Response/status) is 431. Or look at them in the network tab of the dev tools. – Biller Builder Nov 15 '22 at 08:16
  • OK, so I've added ".json" to the response received and now the headers error goes away. I've then checked the console and in fact, I can see that the chart JSON is received properly under the Network tab. However, the chart still isn't loading, despite the conditional render function being properly coded, as above. I've checked using other, external "spec"s and they seem to work OK with my conditional render, as above. Any ideas why the chart still doesn't render? Thanks, – Rob Liou Nov 15 '22 at 09:31
  • `console.log(JSON.stringify(chart))` before passing it to the render. Repeat higher in the scope until you find out when it loses its value. – Biller Builder Nov 15 '22 at 09:40
  • OK, well, I went ahead and added JSON.stringify(chart) before passing it to the render. The value is never lost. Again, the JSON objects seems to be received just fine. I can see the JSON in my Network (200: OK) as well as console. Here is what my code looks like: – Rob Liou Nov 15 '22 at 12:10
  • `const [chart, setChart] = useState("");` – Rob Liou Nov 15 '22 at 12:13
  • `axios.get("/api/dashboard") .then(function (response) { let finalChart = JSON.stringify(response.data); setChart(finalChart); console.log("this is response:", finalChart); })` – Rob Liou Nov 15 '22 at 12:15
  • `return ( {chart ? : ""})` – Rob Liou Nov 15 '22 at 12:15
  • 1
    Why are you double-stringifying a response? `JSON.stringify()` was called in the log to capture the value at the moment of the call, because the browser console treats object references in a special way which can make debugging confusing. You don't need to do that on the actual value, assuming `axios` automatically de-serializes the response body. – Biller Builder Nov 15 '22 at 12:23
  • Actually, just double checked the error message in the console when using the code snippets as above. Here is what they say: `"GET net::ERR_CONNECTION_RESET"` and `"TypeError: Failed to fetch at Object.http (vega-loader.browser.module.js:169:1) at Object.load (vega-loader.browser.module.js:52:1)"` Any idea what they mean or refer to? – Rob Liou Nov 15 '22 at 12:24
  • You're right; I don't need to double stringify the response. If I remove the `.data` and just do `...let finalChart = JSON.stringify(response)...` however, it doesn't solve the problem as I still end up getting the same two new errors I posted in the comment directly above this one.. – Rob Liou Nov 15 '22 at 12:30
  • Whereas just doing `let finalChart = response.data` will result in the original headers issue I posted above. – Rob Liou Nov 15 '22 at 12:31
  • Again, I'm receiving the JSON just fine. But even after using JSON.stringify on it; when I set it using the UseState hook and try to conditionally render using the Vega command, the two errors above pop up. It should be noted that I tested my conditional render in the return statement with other specs and it works fine. – Rob Liou Nov 15 '22 at 12:35

0 Answers0