Panel not working behind reverse proxy

[mschm]

Description

I am encountering an issue with the xyz panel in Grafana, specifically when it is running behind a reverse proxy. The panel remains black and displays an "Error in Plugin" message (or similar) after configuring the datasources.

Steps to Reproduce

1. Configure Grafana to run behind a reverse proxy.
2. Set the GF_SERVER_ROOT_URL environment variable for the base URL.
3. Setup the datasources in Grafana.
4. Observe the xyz panel displaying a black screen with an error message.

Expected Behavior

The panel should display data correctly, respecting the base URL set in Grafana.

Actual Behavior

Instead of displaying data, the panel shows a black screen with an error message, suggesting a plugin failure.

Console Error

The browser console reveals an issue with retrieving the dot.png resource. The path for this resource does not align with the base URL set in Grafana (via GF_SERVER_ROOT_URL).

Source Code Reference

The issue seems to originate from this line in the xyz-chart panel's code:

const circleTexture = useTexture('/public/plugins/grafana-xyzchart-panel/img/dot.png');

Source: PointCloud.tsx Line 24

Temporary Fix

I achieved a temporary fix by altering the path in the code, removing the leading slash. However, this might not be the most elegant solution, hence my decision to discuss this issue here rather than submitting a PR.

Additional Comments

Eagerly looking forward to future developments of this highly valuable and appreciated panel. Your help in resolving this issue would be greatly beneficial.

[mdvictor]

Hey @mschm, thank you for opening this issue! I am happy to see people enjoy the XYZ Chart! I think your solution is good and would actually suggest opening a PR with it.

[themw123]

Same for me and the error i am getting in frontend is:
An unexpected error happened
and in console
TypeError: Cannot read properties of undefined (reading 'state')