[SOLVED] JS errors and GUI load issues after PVE 6->7 update

[Jmark]

Hi folks, I've got a bit of a strange issue here that's occurring on only one of the servers I updated. The guests seem to be running fine but the GUI is less responsive and portions of the GUI won't load such as the storage views, it seems to hang waiting for JSON it can't parse. Additionally, parts of the toolbar GUI have changed, the text is around 5x larger and the on hover and on selected colors changed to a deeper blue. The rest of the GUI looks normal besides those changes/issues. I tried running

apt install --reinstall pve-manager proxmox-widget-toolkit

to see if that would fix the issue but it didn't resolve it. Does anyone have any ideas?

The javascript errors can be seen below (url replaced with example.com):

Starting PVE Manager pvemanagerlib.js:1482:9
Loading failed for the <script> with source “https://example.com/PVE/window/Wizard.js?_dc=1660640727936”. example.com:1:1
Loading failed for the <script> with source “https://example.com/PVE/panel/AuthBase.js?_dc=1660640727944”. example.com:1:1
Loading failed for the <script> with source “https://example.com/PVE/panel/Config.js?_dc=1660640727947”. example.com:1:1
Loading failed for the <script> with source “https://example.com/PVE/panel/StatusView.js?_dc=1660640727972”. example.com:1:1
Some cookies are misusing the recommended “SameSite“ attribute 7
Uncaught TypeError: me is undefined
    selectionchange https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:29161
    ExtJS 26
    task https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:3237
    ExtJS 3
pvemanagerlib.js:29161:7
    selectionchange https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:29161
    ExtJS 26
    task https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:3237
    ExtJS 3
Uncaught Error: Unable to parse the JSON returned by the server: Ext.JSON.decode(): You're trying to decode an invalid JSON String: undefined
    ExtJS 2
    getResponseData https://example.com/proxmoxlib.js?ver=3.5.1:1853
    ExtJS 9
ext-all.js:22:31982
    ExtJS 2
    getResponseData https://example.com/proxmoxlib.js?ver=3.5.1:1853
    ExtJS 9
Uncaught TypeError: me is undefined
    selectionchange https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:29161
    ExtJS 26
    task https://example.com/pve2/js/pvemanagerlib.js?ver=7.2-7:3237
    ExtJS 3
pvemanagerlib.js:29161:7
Uncaught Error: Unable to parse the JSON returned by the server: Ext.JSON.decode(): You're trying to decode an invalid JSON String: undefined
    ExtJS 2
    getResponseData https://example.com/proxmoxlib.js?ver=3.5.1:1853
    ExtJS 9
ext-all.js:22:31982

here is a picture of the GUI changes:

 

[Neobin]

Only some very basic thoughts:

1. Was the host rebooted after the upgrade?
2. Did you ever use the inofficial dark theme?
3. Did you already clear your browser cache?
4. Do you use browser extensions which could interfere?
5. Did you already test with other browsers?

 

[Jmark]

Apologies, after looking into the issue further some of the errors made me realize that the issue was within our nginx reverse proxy config it's worked since ~PVE4 but something must have changed, I saw that there is now a nginx config on the wiki so I swapped this server to use that config and the JS errors and GUI strangeness is resolved, still not sure why only this one server was affected but perhaps I'll be able to figure that out as well with some additional digging.

Here's a snippet of the offending nginx config in-case anyone is interested or encounters a similar issue:

# Backups, images and ISO uploading
  client_max_body_size 5G;
  include proxy_params;
 
  location / {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass https://192.168.0.254:8006;
  }

  location ~* ^/(api2|novnc)/ {
    proxy_redirect off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass https://192.168.0.254:8006;
  }

  location ~* ^/pve2/(?<file>.*)$ {
    gzip_static on;
    root /var/www/proxmox/pve-manager/;
    try_files /$file @proxmox;
  }
 
  location ~* ^/proxmox.*\.js$ {
    gzip_static on;
    root /var/www/proxmox/javascript/proxmox-widget-toolkit;
    try_files $uri @proxmox;
  }
 
  location ~* ^/pve-docs/(?<file>.*)$ {
    gzip_static on;
    root /var/www/proxmox/pve-docs;
    try_files /$file @proxmox;
  }
 
  location @proxmox {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass https://192.168.0.254:8006;
   }