Terminal not loading in some browsers

jelveh commented 7 months ago

Chromium Version 123.0.6298.0 (Developer Build) (64-bit) from tip-of-tree developer builds today. On Linux.

Screenshot at https://gist.github.com/guest271314/94453a1f538df44be1623f75b0ed4b71

It would help if you didn't try to prevent inspecting the page.

There are several warnings and a couple errors thrown

v2/:4 WebSocket connection to 'wss://api.puter.com/socket.io/?auth_token=undefined&EIO=4&transport=websocket&sid=9uLAXMZ0SsMnkBVsAHNF' failed: WebSocket is closed before the connection is established.

bundle.js:10622 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setAuthToken') at window.main_shell (bundle.js:10622:28)

KernelDeimos commented 7 months ago

This means globalThis.puter is undefined, which is unexpected. Is it possible the Puter SDK doesn't work properly in this version of Chromium?

jelveh commented 7 months ago

I'm looking into it. Need to open-source Puter.js ASAP!

jelveh commented 7 months ago

I still haven't been able to replicate this

guest271314 commented 7 months ago

I still haven't been able to replicate this

I'm on Linux. Chromium Version 123.0.6298.0 (Developer Build) (64-bit) off tip-of-tree builds from a couple days ago.

jelveh commented 7 months ago

Do you have any privacy extensions? The terminal uses canvas and it's known to be blocked by some extensions because some websites seem to abuse canvas (idk how they do it though)

guest271314 commented 7 months ago

No "privacy" extensions.

KernelDeimos commented 7 months ago

Does this occur on the stable build of Chromium too?

(idk how they do it though)

AFAIK, WebGPL rendering and then analyzing GPU-specific behaviour. It's wild.

guest271314 commented 7 months ago

The terminal uses canvas

AFAIK, WebGPL rendering and then analyzing GPU-specific behaviour.

Why are you using canvas and WebGPL for this?

QuickJS and SpiderMonkey has been compiled to WASM for use as a JavaScript runtime in the browser - without using any images. See https://bellard.org/jslinux/ and https://github.com/mozilla-spidermonkey/sm-wasi-demo. node has even been compiled to WASM using v86 https://github.com/cemalgnlts/now.

Is the idea to send data over the network for this and render images that just look like a terminal and other applications?

Just use a <textarea> or something.

KernelDeimos commented 7 months ago

Why are you using canvas and WebGPL for this?

We don't do this; xtermjs does this. (edit: I don't believe xtermjs uses WebGL; I was mentioning that in different context; it does use canvas though)

Is the idea to send data over the network for this and render images that just look like a terminal and other applications?

phoenix aims to be a complete POSIX-compliant shell. We're still pretty far away from that goal but there's a clear roadmap. We're absolutely open to including javascript runtimes in Puter - one thing we need to do first is enable phoenix to run external commands (it will process script files but it doesn't retrieve commands from PATH yet)

Just use a or something.</p> </blockquote> <p>I understand where you're coming from, because it's just text right? The trouble is, terminal emulators are actually emulating the VT100, and getting consistent behavior across different browsers to emulate this in a textarea would be incredibly difficult, if even possible. I think xtermjs made a good choice using canvas.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I don't know what to tell you. The live demonstration doesn't work.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Loads on Firefox Nightly 124. Doesn't load on Chromium 123.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Unable to reproduce on <code>Version 123.0.6304.0 (Developer Build) (64-bit)</code> from the <code>chromium-snapshot-bin</code> AUR package.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Can you post a screenshot of you writing to the terminal application and DevTools on Chromium 123?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I got it working launching a new instance without the flags I ordnarily have set. Now I'm going through the flags one by one to see which one makes your application not work.</p> <pre><code>$HOME/chrome-linux/chrome --user-data-dir=test --disable-gpu --disable-gpu-program-cache --password-store=basic https://puter.com/app/terminal</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Looks like when <code>--disable-features=ThirdPartyStoragePartitioning</code> is set your terminal application doesn't work.</p> <p>The following errors are thrown</p> <pre><code>https://puter.com/dist/images/ui-icons_444444_256x240.png Failed to load resource: the server responded with a status of 404 (Not Found)</code></pre> <pre><code>Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. at new <anonymous> (https://puter.com/puter.js/v2:4:125721) at https://puter.com/puter.js/v2:4:124377 at https://puter.com/puter.js/v2:4:129314 at https://puter.com/puter.js/v2:4:129318</code></pre> <pre><code>bundle.js:10622 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'setAuthToken') at window.main_shell (bundle.js:10622:28)</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Good catch! I had a suspicion that third-party "something" would be involved. Although it seems to be in the opposite direction I'd expect; third party partitioning <strong>enabled</strong> should be <em>more</em> restrictive right? We'll have to investigate this more but this was a huge help, thanks for finding that.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I dtarted using that flag because something changed in Chromium source code where I was embeddeding an <code>iframe</code> point to a browser extension in arbitrary Web pages and streaming data, see <a href="https://github.com/guest271314/persistent-serviceworker/issues/3#issuecomment-1407825606">https://github.com/guest271314/persistent-serviceworker/issues/3#issuecomment-1407825606</a>. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>and getting consistent behavior across different browsers to emulate this in a textarea would be incredibly difficult, if even possible. </p> </blockquote> <p>It's possible. Multiple ways. Just use the <code><textarea></code> as input, send the command on ENTER.</p> <p>Here is one way to send arbtritrary commands from the browser to <code>node</code> (STDIN) and stream STDOUT <a href="https://github.com/guest271314/fs/blob/main/nodejs/fs.js">https://github.com/guest271314/fs/blob/main/nodejs/fs.js</a>. See the Deno and Bash versions in the repository.</p> <p>Another way, that is specified, is using Native Messaging <a href="https://github.com/guest271314/NativeMessagingHosts">https://github.com/guest271314/NativeMessagingHosts</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Just use the <textarea> as input, send the command on ENTER.</p> </blockquote> <p>I could just as well say "just use xtermjs". The textarea input handling is still not trivial, considering:</p> <ul> <li><code>ctrl+<left|right></code> works in a textarea, but the behavior (decision of where word boundaries are in particular) could vary depending on the browser or operating system. I suspect this could be manually overridden but with quirks in some browsers</li> <li>some default behavior needs to be overridden; ctrl+c shouldn't copy, etc</li> <li>selecting text with the mouse in a terminal emulator typically does not affect the cursor position</li> </ul> <p>Although it turns out <a href="https://codeburst.io/source-reading-how-is-new-terminal-in-vs-code-so-fast-10a40f7f8792">performance is one of the benefits of using canvas</a>, whereas I just assumed it was more the other things I just mentioned.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>@jelveh this is the culprit (when the flag mentioned before is enabled):</p> <pre><code>v2:4 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. at new <anonymous> (https://puter.com/puter.js/v2:4:125721) at https://puter.com/puter.js/v2:4:124377 at https://puter.com/puter.js/v2:4:129314 at https://puter.com/puter.js/v2:4:129318</code></pre> <p>puter.js should wrap every call on <code>localStorage</code> in a try...catch and assume that access might not be allowed. Although most people aren't likely to have this flag set, a <a href="https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document/">page on chromium.org</a> says this issue will also occur if the option "Block third-party cookies and site data" is enabled from the normal settings page.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>It should be possible to render a real terminal in the browser. Chrome's Native Client used the <code><embed></code> or <code><object></code> HTML element to post messages between the nexe and the browser.</p> <p>I'm skeptical of using images for text and arbitrary data streaming to the browser. However it doesn't look like this is intended to be a real terminal with host read, write, executable capabilities. That's my interest in terminals in the browser. That's what I've been doing using Native Messaging and other means. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Re </p> <blockquote> <p>puter.js should wrap every call on localStorage in a try...catch</p> </blockquote> <p>I would suggest substituting using WHATWG File System and using origin private system to write directories and files rather than <code>localStorage</code>. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Re</p> <blockquote> <p>puter.js should wrap every call on localStorage in a try...catch</p> </blockquote> <p>I would suggest substituting using WHATWG File System and using origin private system to write directories and files rather than <code>localStorage</code>.</p> </blockquote> <p>We're not using localStorage for that, Puter's API provides a filesystem powered by our backend technologies.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/guest271314"><img src="https://avatars.githubusercontent.com/u/4174848?v=4" />guest271314</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>I see. I generally block third-party cookies and site data, too, in addition to <code>--disable-features=ThirdPartyStoragePartitioning</code>. Good luck with your project!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/KernelDeimos"><img src="https://avatars.githubusercontent.com/u/7225168?v=4" />KernelDeimos</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Chrome is getting rid of third party cookies anyhow so we're not relying on them anymore</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

HeyPuter / terminal

Terminal not loading in some browsers #2