Settings editor is blank

[flaektrem]

Suddenly i got this error when trying to edit connections or try to add new. Tried reinstall extension and addon (using VSCode addon in Homeassistant)

Anyone know whats going on?

[SchoofsKelvin]

Can you post the SSH FS log? It is available under Output > SSH FS. While it should censor passwords/passphrases, I recommend checking it for (other) sensitive data first.

I have the feeling it's the VS Code add-on of Homeassistant running VS Code in non-production mode. My extension detects that, and then tries to use my React Dev server to load the Settings UI so I can hotreload it etc. Your Settings UI should still work fine without it, though.

I might add a flag to disable this "feature" manually. Not really a feature of the extension, but more of a bug in that HA add-on that makes my extension think it's not running in production.

[flaektrem]

Here is what I got when first opened up the addon, then pressed "Create a SSH FS configuration".

Worth to mention is that the addon has worked as expected since I installed it a year ago. I noticed this problem 2 weeks ago.

[INFO]    Loading configurations...
[INFO]    Calculated config flags: {}
[INFO]    Found 0 configurations
[INFO]    Extension activated, version 1.21.1, mode 2
[INFO]    Loading configurations...
[INFO]    Loading configurations...
[INFO]    Found 0 configurations
[INFO]    Found 0 configurations
[DEBUG]   [WebView] Navigation requested: {
    "type": "newconfig"
}
[WARNING] [WebView] Error connecting to React dev server: Error: connect ECONNREFUSED 127.0.0.1:3000
Logged at:
	at ClientRequest.<anonymous> (/data/vscode/extensions/kelvin.vscode-sshfs-1.21.1/dist/425.extension.js:1:1281)
	at ClientRequest.emit (events.js:375:28)
	at Socket.socketErrorListener (_http_client.js:475:9)
Reported from WebView

[flaektrem]

Can you post the SSH FS log? It is available under Output > SSH FS. While it should censor passwords/passphrases, I recommend checking it for (other) sensitive data first.

I have the feeling it's the VS Code add-on of Homeassistant running VS Code in non-production mode. My extension detects that, and then tries to use my React Dev server to load the Settings UI so I can hotreload it etc. Your Settings UI should still work fine without it, though.

I might add a flag to disable this "feature" manually. Not really a feature of the extension, but more of a bug in that HA add-on that makes my extension think it's not running in production.

I wrote to the author of the HA addon about this issue. Now he asks how your SSH FS addon detects "development" mode? Maybe this will help him understand whats wrong.

[SchoofsKelvin]

Now he asks how your SSH FS addon detects "development" mode? Maybe this will help him understand whats wrong.

I basically check whether ExtensionContext.extensionMode is different from vscode.ExtensionMode.Production: https://github.com/SchoofsKelvin/vscode-sshfs/blob/4eef87a7e8bfb4f8013c031381abb406dda11b46/src/extension.ts#L29-L32

[flaektrem]

HA guys cannot help me with this.

So did you get anything useful from my logs? @SchoofsKelvin

[SchoofsKelvin]

It's purely a visual issue, right? You see the warning whenever the window (re)loads, but the Settings UI otherwise works? If the extension can't connect to the React dev server, it should fallback to the bundled Settings UI.

[flaektrem]

When I press "Create a SSH FS configuration", dev server message pops up and SSH FS tab is just blank and I cant do anything. SSH FS Extension settings seems to be ok.

Se attached pictures:

[SchoofsKelvin]

I was planning on changing !== Production into === Development to make undefined not a false negative, but according to your logs the mode is already explicitly set to vscode.ExtensionMode.Development. I've read the issue on the HA repository, and assuming they didn't overlook anything, it indeed looks like an issue over at the code-server side.

As a temporary fix, I added an environment variable VSCODE_SSHFS_PRODUCTION you can set which will force-disable the debug mode (48ef229). You can download the latest built version from here, starting from build number 54 and later. Alternatively you could wait for v1.21.3 or later, but no plans on releasing an update right now.

Remember that the environment variable should be set for the whole VS Code process tree. Theoretically only the extension host I think, but details. Might require a boot and/or altering HA's startup scripts if it doesn't read some .bashrc or environment file or so.

[flaektrem]

Thanks! But I´m sorry this is to advanced for me so I´ll think I have to wait for v1.21.3. I don´t really understand what to download, where to put it and how to set the variable. I´m not a hacker 🥲 😄
Thanks anyway

[darrillaga]

Hey @SchoofsKelvin , I'm pretty interested on trying the version you sent, I'll download it, how do I set the env variable? Is it just setting in on the code-server terminal?

Thanks in advance!

[SchoofsKelvin]

@darrillaga I don't know exactly what OS you're using (on your pc or HA), so honestly I'd say Google it. It has to be set for the whole VS Code process tree.

I know in Windows you can use the "Edit the system environment variables" configuration option, and I assume on Unix-based systems you can edit some OS-specific file (e.g. /etc/environment) to add a system-wide variable. Alternatively if you're manually starting code-server, doing something like VSCODE_SSHFS_PRODUCTION=true ./start.sh or so might do the trick too.

I'll take a look later in whether I can auto-detect code-server, or alternatively "inverse" the variable and require VSCODE_SSHFS_DEBUG to enable debug mode.

[darrillaga]

I'm using android (Samsung Tab S7) with VH editor app (code-server + termux over android / Frankenstein style), trying to access a remote machine, I'll look around to see if I find a way

[FuzzyMistborn]

FYI i'm running into this even running code-server installed on bare metal.

[SchoofsKelvin]

Tomorrow I'll add the "inverse environment variable" and publish a new extension version with it soon afterwards. That should resolve this issue.

It still seems to be an issue specific to how code-server loads extensions, but the fix should make it no longer matter.

[SchoofsKelvin]

I just pushed a commit that should fix this issue. You can download the latest build from here, build 57 and higher. Could you test this version?

I'll probably publish an extension update (with the fix included) in a few days, depending on some other factors.

[flaektrem]

I don't know how to use that, sorry my friend. I'll have to wait for that extension update I think.

[FuzzyMistborn]

Now I no longer get the react error, but the configuration page is completely blank.

[SchoofsKelvin]

Now I no longer get the react error, but the configuration page is completely blank.

Hmm, I'll see if I can get code-server running and replicate the issue.

[FuzzyMistborn]

If you want an easy docker image the folks over at Linuxserver.io have a good one.

[flaektrem]

I just pushed a commit that should fix this issue. You can download the latest build from here, build 57 and higher. Could you test this version?

I'll probably publish an extension update (with the fix included) in a few days, depending on some other factors.

Any extension update ready soon?

[TomS-]

https://github.com/cdr/code-server/discussions/4075

This maybe of help.

[flaektrem]

I think it's about the same problem. But im not able to solve it my self, sorry.

[SchoofsKelvin]

I was able to run code-server and replicate most of the issue:

• Opening the Settings UI produces the error
• The extension would still fallback to rendering the built version of the Settings UI
• Only right after install (and before I restarted code-server) did the "editor" remain black, trying to reproduce this again

Commit 05e1b69 should fix the unnecessary error (at least extension-wise, still a code-server issue), but I'll still have to look into why it appeared blank once for me and continuously for others.

[jsjoeio]

Hey! code-server maintainer here 👋

I tested v1.21.2 in code-server v3.12.0 just now and the webview is loading as expected (I think). However, the "could not connect to React dev server" issue still appears.

Video

https://user-images.githubusercontent.com/3806031/134232342-5c896d7a-dab2-4bd5-b1c8-af86636b4555.mov

Logs

These logs showed up in the browser while running SSH-FS

console.ts:137 [Extension Host] Could not register source-map-support: Error: Cannot find module 'source-map-support/register'
Require stack:
- /Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/dist/extension.js
- /usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/vs/loader.js
- /usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/bootstrap-amd.js
- /usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/bootstrap-fork.js
	at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
	at Function.Module._load (internal/modules/cjs/loader.js:745:27)
	at Function.u._load (/usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/vs/workbench/services/extensions/node/extensionHostProcess.js:113:28329)
	at Function.E._load (/usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/vs/workbench/services/extensions/node/extensionHostProcess.js:113:24906)
	at Function.o._load (/usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/out/vs/workbench/services/extensions/node/extensionHostProcess.js:103:59872)
	at Module.require (internal/modules/cjs/loader.js:961:19)
	at Module.require (/usr/local/Cellar/code-server/3.12.0/libexec/vendor/modules/code-oss-dev/extensions/git/dist/main.js:2:515806)
	at require (internal/modules/cjs/helpers.js:92:18)
	at Object.4043 (/Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/dist/extension.js:1:25133)
	at i (/Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/dist/extension.js:1:25419)
	at Function.i.t (/Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/dist/extension.js:1:25638)
	at processTicksAndRejections (internal/process/task_queues.js:95:5)

[Extension Host] [WARNING] [WebView] Error connecting to React dev server: Error: connect ECONNREFUSED 127.0.0.1:3000Logged at:	at ClientRequest.<anonymous> (/Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/dist/425.extension.js:1:1281)	at ClientRequest.emit (events.js:400:28)	at ClientRequest.emit (domain.js:470:12)Reported from WebView

notificationsAlerts.ts:40 Could not connect to React dev server. Not running?

DevTools failed to load source map: Could not load content for https://vscode-remote+localhost-003a8080.vscode-resource.vscode-webview.net/Users/jp/.local/share/code-server/extensions/kelvin.vscode-sshfs-1.21.2/webview/build/static/css/main.1e99675e.chunk.css.map: Connection error: net::ERR_NAME_NOT_RESOLVED

data reducer {type: '@@redux/INITm.r.y.y.s.e'}
main.1919b231.chunk.js:1 data reducer {type: '@@redux/PROBE_UNKNOWN_ACTIONf.6.h.r.3'}
main.1919b231.chunk.js:1 data reducer {type: '@@redux/INITm.r.y.y.s.e'}

I don't think this is the root cause of the issue but it seems like the Redux and/or React DevTools are enabled? Is this intentional? I'm seeing the logs for the store, dispatch and the reducers. I wouldn't expect to see those after installing the extension, but maybe that's normal.

[SchoofsKelvin]

For the React error, that should be fixed in v1.22.0, which is currently building and going through the release process right now. So give or take 10 minutes.

The update will only include a fix that disables the React stuff (unless explicitly turned on using a specific environment variable), so the error notification should no longer appear. This shouldn't have an effect on the blank webview issue though.

EDIT: Version 1.22.0 is now live, although it'll take a second for VS Marketplace and OpenVSX to realize.

[jsjoeio]

Awesome! Here's what I'm following to reproduce:

1. SERVICE_URL=https://open-vsx.org/vscode/gallery ITEM_URL=https://open-vsx.org/vscode/item code-server --install-extension [email protected]
2. code-server --auth none
3. open http://localhost:8080 in browser
4. use SSH: FS commands in Command Palette

Seems like it's working, no? Or is there another blank webview issue we're talking about?

Video

https://user-images.githubusercontent.com/3806031/134246103-9fcaea5f-5ff3-4bdf-9160-5d8fd2c7b637.mov

I still see some logs though

[SchoofsKelvin]

Seems like it's working, no? Or is there another blank webview issue we're talking about?

I personally wasn't able to reproduce the blank webview issue (although I only tried it using the latest version of code-server) so I'm not sure what triggers it. Perhaps @flaektrem or @FuzzyMistborn could try the latest version (of code-server and the extension) and see if they still have the issue, and if so provide the logs from DevTools (aka "Inspect Element", i.e. F12 or Ctrl+Shift+i)?

As for those warnings about source maps, those are normal. DevTools tries to load the source maps listed in the built JS files, but the extension doesn't bundle those, as they're unnecessary and would double the size of the packaged .vsix file.

[FuzzyMistborn]

Not sure this is what you're looking for but it's what pops up in the console when i try to open the configuration page.

Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. code.example.com
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
Content Security Policy: The page’s settings blocked the loading of a resource at https://code.example.com/webview/service-worker.js?id=b149e1b2-f465-432e-af94-281bf25b9163&swVersion=2&extensionId=Kelvin.vscode-sshfs&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=https%3A%2F%2Fcode.example.com (“script-src”).
Loading failed for the <script> with source “https://vscode-remote+code-002example-002ecom.vscode-resource.vscode-webview.net/config/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/runtime-main.bundle.js”. index.html:116:1
Content Security Policy: The page’s settings blocked the loading of a resource at https://code.example.com/webview/service-worker.js?id=b149e1b2-f465-432e-af94-281bf25b9163&swVersion=2&extensionId=Kelvin.vscode-sshfs&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=https%3A%2F%2Fcode.example.com (“script-src”).
Loading failed for the <script> with source “https://vscode-remote+code-002eexample-002ecom.vscode-resource.vscode-webview.net/config/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/269.bundle.js”. index.html:116:1
Content Security Policy: The page’s settings blocked the loading of a resource at https://code.example.com/webview/service-worker.js?id=b149e1b2-f465-432e-af94-281bf25b9163&swVersion=2&extensionId=Kelvin.vscode-sshfs&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-webview.net&parentOrigin=https%3A%2F%2Fcode.example.com (“script-src”).
Loading failed for the <script> with source “https://vscode-remote+code-002eexample-002ecom.vscode-resource.vscode-webview.net/config/extensions/kelvin.vscode-sshfs-1.22.0/webview/build/static/js/main.bundle.js”. index.html:116:1

[TomS-]

Seems like it's working, no? Or is there another blank webview issue we're talking about?

I personally wasn't able to reproduce the blank webview issue (although I only tried it using the latest version of code-server) so I'm not sure what triggers it. Perhaps @flaektrem or @FuzzyMistborn could try the latest version (of code-server and the extension) and see if they still have the issue, and if so provide the logs from DevTools (aka "Inspect Element", i.e. F12 or Ctrl+Shift+i)?

As for those warnings about source maps, those are normal. DevTools tries to load the source maps listed in the built JS files, but the extension doesn't bundle those, as they're unnecessary and would double the size of the packaged .vsix file.

Thanks for looking into this so quickly. I am also experiencing a blank screen with Docker accessing code-server through the IP address (not a domain - no reverse proxy).

This is what I'm receiving as an error.

EDIT: Did a reverse proxy to serve over HTTPS:// and configured NGINX to allow WebSockets and it's working fine for me now :-)

[jsjoeio]

@FuzzyMistborn are you using HTTPS?

Did a reverse proxy to serve over HTTPS:// and configured NGINX to allow WebSockets and it's working fine for me now :-)

@TomS- Awesome! Yeah I was going to say it's probably an issue if you're not using HTTPS but sounds like you figured it out :)