Chart with sensors is not displayed. Monitoring tools shows that the Chart SVG is updating, but SVG is not drawing

DizzyaKZ commented 2 years ago

Affected Version(s):

(The versions of fluidd this issue occurs on.)

klipper version: v0.10.0-167-g2b7d0bba
moonraker version: v0.7.1-194-geda5623
fluidd version: v1.16.2

Platform: Raspberry Pi 4 Model B Rev 1.4 on buster

Hardware Configuration:

MCU v0.10.0-122-gc179db3d

Reproduction Steps:

Installed the Mainsail
Changed in the Nginx the link for sites-enabled from fluidd to mainsail
Restore the link to fluidd (doesn't like mainsail)

Actual Results:

The chart disappeared while the table part with sensors still exists and updating. The pressing CHART ON/OFF button is working but chart is not displayed while the container is appearing/disappearing. Have tried it in different browsers Edge,

Expected Results:

The chart suppose to be displayed

Log Files:

(The log files fluidd provides at Configure > System Control.)

klipper log: ..... 'webhooks: registering remote method 'shutdown_machine' for connection id: 3041919864 webhooks: registering remote method 'reboot_machine' for connection id: 3041919864 webhooks: registering remote method 'pause_job_queue' for connection id: 3041919864 webhooks: registering remote method 'start_job_queue' for connection id: 3041919864 Stats 1133.8: gcodein=0 mcu: mcu_awake=0.000 mcu_task_avg=0.000000 mcu_task_stddev=0.000000 bytes_write=3856 bytes_read=4110 bytes_retransmit=0 bytes_invalid=0 send_seq=168 receive_seq=168 retransmit_seq=0 srtt=0.004 rttvar=0.002 rto=0.025 ready_bytes=0 stalled_bytes=0 freq=72004070 heater_bed: target=0 temp=0.0 pwm=0.000 motherboard_temp: temp=0.0 raspberry_pi: temp=48.2 sysload=0.12 cputime=27.165 memavail=3655984 print_time=0.001 buffer_time=0.000 print_stall=0 extruder: target=0 temp=0.0 pwm=0.000 Stats 1134.8: gcodein=0 mcu: mcu_awake=0.000 mcu_task_avg=0.000000 mcu_task_stddev=0.000000 bytes_write=3903 bytes_read=4286 bytes_retransmit=0 bytes_invalid=0 send_seq=172 receive_seq=172 retransmit_seq=0 srtt=0.003 rttvar=0.001 rto=0.025 ready_bytes=0 stalled_bytes=0 freq=72002110 heater_bed: target=0 temp=26.8 pwm=0.000 motherboard_temp: temp=28.9 raspberry_pi: temp=47.7 sysload=0.12 cputime=27.192 memavail=3657264 print_time=0.001 buffer_time=0.000 print_stall=0 extruder: target=0 temp=27.1 pwm=0.000`
moonraker log: ... 'Klippy Host not connected Traceback (most recent call last): File "/home/pi/moonraker/moonraker/websockets.py", line 224, in execute_method result = await method(conn, *args, *kwargs) File "/home/pi/moonraker/moonraker/websockets.py", line 317, in func user=ws.current_user)) File "/home/pi/moonraker/moonraker/moonraker.py", line 546, in make_request return await self._request_standard(web_request) File "/home/pi/moonraker/moonraker/moonraker.py", line 602, in _request_standard return await base_request.wait() File "/home/pi/moonraker/moonraker/moonraker.py", line 784, in wait raise self.response utils.ServerError: Klippy Host not connected 2021-11-29 15:22:57,073 [moonraker.py:connect()] - Klippy Connection Established 2021-11-29 15:22:57,631 [moonraker.py:_init_klippy_connection()] - Webhooks Subscribed 2021-11-29 15:22:57,633 [moonraker.py:_init_klippy_connection()] - GCode Output Subscribed 2021-11-29 15:22:58,906 [moonraker.py:_check_ready()] - Klippy ready 2021-11-29 15:22:59,389 [data_store.py:_init_sensors()] - Configuring available sensors: ['extruder'] 2021-11-29 15:27:56,966 [moonraker.py:on_connection_closed()] - Klippy Connection Removed 2021-11-29 15:27:57,045 [websockets.py:build_error()] - JSON-RPC Request Error: 503 Klippy Host not connected Traceback (most recent call last): File "/home/pi/moonraker/moonraker/websockets.py", line 224, in execute_method result = await method(conn, args, **kwargs) File "/home/pi/moonraker/moonraker/websockets.py", line 317, in func user=ws.current_user)) File "/home/pi/moonraker/moonraker/moonraker.py", line 546, in make_request return await self._request_standard(web_request) File "/home/pi/moonraker/moonraker/moonraker.py", line 602, in _request_standard return await base_request.wait() File "/home/pi/moonraker/moonraker/moonraker.py", line 784, in wait raise self.response utils.ServerError: Klippy Host not connected 2021-11-29 15:27:58,227 [moonraker.py:connect()] - Klippy Connection Established 2021-11-29 15:27:58,792 [moonraker.py:_init_klippy_connection()] - Webhooks Subscribed 2021-11-29 15:27:58,794 [moonraker.py:_init_klippy_connection()] - GCode Output Subscribed 2021-11-29 15:28:00,055 [moonraker.py:_check_ready()] - Klippy ready 2021-11-29 15:28:00,556 [data_store.py:_init_sensors()] - Configuring available sensors: ['heater_bed', 'temperature_sensor motherboard_temp', 'temperature_sensor raspberry_pi', 'extruder'] 2021-11-29 15:28:54,254 [websockets.py:remove_websocket()] - Websocket Removed: 2805303696 2021-11-29 15:28:55,013 [app.py:log_request()] - 101 GET /websocket?token=GX5AIIWGKJRTIBLEE5BKOVFY2OIUXQWP (192.168.1.13) [_TRUSTEDUSER] 3.49ms 2021-11-29 15:28:55,014 [websockets.py:add_websocket()] - New Websocket Added: 2805343888 2021-11-29 15:33:07,854 [websockets.py:remove_websocket()] - Websocket Removed: 2805343888 2021-11-29 15:34:20,873 [app.py:log_request()] - 101 GET /websocket?token=XSDCQ55FOBKFREJ562UMAY6LKMSRFVIT (192.168.1.13) [_TRUSTEDUSER] 3.33ms 2021-11-29 15:34:20,874 [websockets.py:add_websocket()] - New Websocket Added: 2805515760 2021-11-29 15:38:19,777 [websockets.py:remove_websocket()] - Websocket Removed: 2805515760 2021-11-29 15:41:28,392 [app.py:log_request()] - 101 GET /websocket?token=JAUBH6OFANDRTRCW4SVFYAB7YATO2CCN (192.168.1.13) [_TRUSTEDUSER] 3.89ms 2021-11-29 15:41:28,393 [websockets.py:add_websocket()] - New Websocket Added: 2805517712 2021-11-29 15:42:18,447 [websockets.py:remove_websocket()] - Websocket Removed: 2805517712 2021-11-29 15:42:19,959 [app.py:log_request()] - 101 GET /websocket?token=ZXF563PYDS4IK5UXDAQQU6EVVU2Z63K4 (192.168.1.13) [_TRUSTEDUSER] 5.33ms 2021-11-29 15:42:19,960 [websockets.py:add_websocket()] - New Websocket Added: 2804835472'

Additional information

The debugging tools shows the SVG is updating constantly

ithron commented 2 years ago

I've the same problem. Chart was displaying correctly and suddenly stopped showing anything (maybe it was after an update, but I don't remember). The SVG even has all elements in it, but with empty "d" fields, e.g.:

<g clip-path="url(#zr2323-clip-3754)">
  <path d="" fill="none" stroke="#1fb0ff" stroke-width="1" paint-order="fill" stroke-opacity="0.8" stroke-dasharray="4,2"   stroke-dashoffset="0" stroke-linecap="butt" stroke-linejoin="bevel" stroke-miterlimit="10"></path>
</g>

Checked with Safari (15.3) and Firefox (96.0.3) on macOS 11.6.3 and iPadOS 15.3. I'm pretty sure, that this is not an OS/Browser problem, because the tags are there but empty.

pedrolamas commented 2 years ago

I tried replicating this with the latest dev and couldn't manage to, so we might have already fixed it when we updated the dependencies as part of the Node 16 upgrade.

matmen commented 2 years ago

@DizzyaKZ Is this still an issue or already solved?

diggit commented 2 years ago

I've just tested fluidd f804925 with Arksine/moonraker@ed20223 in firefox and chromium and issue persists.

matmen commented 2 years ago

Thanks for checking. I assume you're using Windows? What browser version(s) are you using? Can you confirm ithron's comment (empty SVG tags)?

pedrolamas commented 2 years ago

Just got confirmation from some users that this is still an issue. We will need to investigate this further.

diggit commented 2 years ago

I assume you're using Windows?

Archlinux, on host with klipper+moonraker+nginx and on client running browser.

What browser version(s) are you using?

Firefox 98.0b8 (64-bit), Chromium 98.0.4758.102

Can you confirm ithron's comment (empty SVG tags)?

Yes, this behavior persists.

pedrolamas commented 2 years ago

I have a feeling this is an upstream issue... Our initial course of action here might be to check all echarts related dependencies for similar reported issues.

diggit commented 2 years ago

I am totally unfamiliar with fluidd codebase, JS or web technologies in general, but for me I's suspicious, that system utilization charts are working fine. Could be dataset from moonraker somehow malformed? I believe, that I've also seen temperature chart at the beginning, right after moonraker/fluidd installation.

BeardedTinker commented 2 years ago

As @pedrolamas mentioned, I'm also having this same issue. Also as @diggit said, it was working on initial install, but since I pulled a lot of updates and was still configuring everything, it just stopped. Running latest Fluidd v1.17.0, Moonraker v0.7.1-428-ged20223 (just updated to see if anything changes). It's also possible that this was due to OS update, there I'm not on latest of everything, to prevent similar possible issues. Following OS packages are pending update:

libexpat1-dev
libexpat1
libpolkit-agent-1-0
libpolkit-backend-1-0
libpolkit-gobject-1-0
libssl-dev
libssl1.1
openssl
policykit-1
python-pil
rpi-eeprom

Broswer is on Windows 10 Chrome Version 98.0.4758.102 (Official Build) (64-bit)

matmen commented 2 years ago

Odd. I can't reproduce this, even though I am running the exact same software versions as you are. The OS packages shouldn't affect the web UI at all, so I don't think they matter.

BeardedTinker commented 2 years ago

To add - in parallel, Mainsail does work and shows charts. Same Pi, just dual system.

matmen commented 2 years ago

I'm not sure because I can't reproduce the original issue at all, but I think it may be related to https://github.com/apache/echarts/pull/15942 (at least I couldn't find anything else between echarts v5.1.2 and v5.2.2 (the version difference between Fluidd and Mainsail) that would prevent rendering completely). Maybe a simple update can solve this? Needs testing from someone that can reproduce it then ;)

BeardedTinker commented 2 years ago

I can test it if needed? What to pull and where :)

matmen commented 2 years ago

You will need to have both Git and NodeJS installed for this

git clone https://github.com/fluidd-core/fluidd.git
cd fluidd
npm i
npm i --save echarts@5.3.0
npm run serve

then wait until the build is done, navigate to http://localhost:8000/ and check if the charts are working

BeardedTinker commented 2 years ago

Sorry, have issue and too dumb to resolve..

pi@fluiddpi:~ $ git clone https://github.com/fluidd-core/fluidd.git
fatal: destination path 'fluidd' already exists and is not an empty directory.

As this already has fluidd inside. Other commands do work, but my guess it that without this first part resolved I have error with following:

pi@fluiddpi:~/fluidd $ npm run serve
npm ERR! Missing script: "serve"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:

BeardedTinker commented 2 years ago

Ohh - you mean to install it on PC not same Pi that's running Fluidd ?!

matmen commented 2 years ago

Ohh - you mean to install it on PC not same Pi that's running Fluidd ?!

Yep! I don't think the build works on a Pi right now

diggit commented 2 years ago

@matmen I've just built and tested fluidd as you described. No change there. Temperature chart is still empty.

btw, seeing 87 vulnerabilities (66 moderate, 21 high) after build is a little bit unsettling...

BeardedTinker commented 2 years ago

Same here. Had to stop print to test. Temperature chart is empty.

matmen commented 2 years ago

btw, seeing 87 vulnerabilities (66 moderate, 21 high) after build is a little bit unsettling...

The vulnerabilities are from dependencies, and to my knowledge none of them are exploitable in Fluidd (I checked them), so no worries there!

I've just built and tested fluidd as you described. No change there. Temperature chart is still empty.

Same here. Had to stop print to test. Temperature chart is empty.

That's odd. We're currently double checking the code on our end, we'll let you know when we know more. Thanks for your testing!

diggit commented 2 years ago

I am seeing some exception in console output, is it relevant?

matmen commented 2 years ago

I don't believe it is, but that error I can reproduce.

We are working on a fix, for tracking:

pedrolamas commented 2 years ago

Latest changes don't seem to fix the problem, and as we couldn't yet reproduce the issue, I'm now trying to establish some common pattern for the people who are experiencing this issue.

Can people experiencing this problem share what Operating System, Browser (and browser extensions) they are using?

I'm especially interested in knowing if you have any adblock/antivirus browser extension that could be causing this!

majcn commented 2 years ago

Not sure if this is relevant, but I checked moonraker database and I see that 'charts': {}, is in fluidd namespace.

I also have the same problem, macOS: tested on safari, iphone safari, and chrome

moonraker: v0.7.1-445-g94c51c9 fluidd: v1.17.0

majcn commented 2 years ago

[object Object]

pedrolamas commented 2 years ago

@majcn are you able to test using http://dev-app.fluidd.xyz please?

This is the latest dev version, includes some of the dependency upgrades we pushed trying to fix this issue!

majcn commented 2 years ago

I just cloned this repo and trying right now. does not work EDIT: i tried on dev-app. no chart

pedrolamas commented 2 years ago

@majcn can you confirm that [object Object] stuff is gone?

majcn commented 2 years ago

yes.

majcn commented 2 years ago

The problem (for me) was here: https://github.com/fluidd-core/fluidd/blob/develop/src/components/widgets/thermals/ThermalChart.vue#L208

Moonraker changed config some time ago and move it from server to data_store

I will create a PR

fluidd-core / fluidd