2.0.105 - Fails to Load on Safari (looking for assistance)

[jeffrutland]

hello, just loaded pipedal 2.0.105 on my RPi5 with 8GB RAM running Trixie, and while things look to have installed okay, I cannot get the web UI to load - it's just stuck on 'Loading...' here. any ideas? log files I could look at? thanks!

[jeffrutland]

and viola - I was using Safari on macOS - it doesn't load there. tried Chrome, and it loads up. is this a known issue, are there plans to support Safari?

[rerdavies]

Hmm. It is not a known issue. And unfortunately I am stuck for a way to test this. But I will.

If you are a developer, and have Safari developer options enabled, the contents of the debug Console would be extremely useful. (If not, don't bother. That's above and beyond the call of duty if you are not a developer).

For the meantime, the workaround, unfortunately is to use Chrome instead. Will do what I can to fix this.

[rerdavies]

Request for assistance: if you have access to a development-enabled copy of Safari (and the ability to debug through a React/Typescript application -- I can provide some assistance on getting set up), your help would be much appreciated.

The issue: Pipedal doesn't load on Safari. Probably some very minor API incompatibility. Either that, or something major that will require PiPedal to declare that Safari is not supported. I don't (currently) have a device on which I can do testing. Most likely a broken fetch operation, maybe comments in json, or an inconsistency in the APIs used to open a web socket. Or possibly a fatal permission issue relating to opening the websocket.)

Let me know if you can assist. Debugging the PiPedal web app is relatively straightforward if you have some familiarity with Typescript.

[jeffrutland]

I am a developer, and I did look in the javascript console for Safari, but didn't see anything. The screen just sat at 'Loading...' in the browser. I'd be happy to assist in any way that I can! just let me know what I can do.

[rerdavies]

Deeply disturbing that there isn't an uncaught exception or a log message of some kind.

I'm not 100% clear on how to bring up a Mac/apple/Safari development environment. Let me know if you get stuck, and I can provide more details.

The Pipedal application is a Vite/React application. For best results, you need to run it on a Vite debug server (which will allow connecting browsers to display typscript sources instead of the bundled and compiled javascript that the built version uses. When using chrome, one simply uses the chrome developer tools to debug the app. I'm assuming you can do the same on Safari (and that there is a Safari extension that supports debugging of React/TypeScript apps).

Instructions for bringing up JUST the vite Debug server.

1. Have a production instance of PiPedal up and running on your server machine.

2. Fetch the sources for PiPedal from github:

         cd ~/src   # Or some place you keep your source code, or... 
          git clone https://github.com/rerdavies/pipedal.git

You won't be compiling the main project, so you can ignore other configuration instructions.

2. Install nodejs and npm on your server machine.

        sudo apt install nodejs npm 

3. cd into the vite/ subdirectory of the project. Run

    npm install

to install NPM dependencies for the project.

4. Configure the vite debug server to use the pipedald web server as a backend (instead of a debug server). Edit the file vite/vite.config.ts and replace the two instances of :8080 with :80 (or :81 if your Pipedal server is running on port 81).

5. Start the debug vite server. Run ./debug.sh. This will expose a debuggable version of the web app on port :5173, which should attempt to use the production pipedald web server on localhost:80 for dynamic content. (Maybe double check that
   its running properly by connecting with Chrome).

6. You should be able to connect to the vite server remotely, but you must use the IPv4 address of the vite Debug server. (it displays its own address as it starts). And if configured correctly, your Safari dev tool should show TypeScript/TSX source files and allow you debug typescript code symbolically.

The critical section of code is the method

   PiPedalModel.requestConfig()

found in 'vite/src/pipedal/PiPedalModel.tsx' (line 1368).

Execution either never reaches that point (which is a much bigger issue that I'm going to have to debug), or it never makes it to the end of that method. Knowing which step fails (and why it doesn't display an error) would probably get me 95% of the way there. # 1 suspicion: the call to

1416         await this.webSocket.connect();

a few lines down in PipedalModel.requestConfig().

If any of that isn't clear, please ask. I'm not sure what you have to do to install vite/react/typescript developer tools in Safari. If that turns out to be a problem, let me know. I, at least, know what to search for, if not how to do it, so I may be able to figure it out.

If you get the faintest whiff that things are going to get complicated, stop right there. This is all based on the theory that hey, it's all webkit anyway, Safari support should be at least 99.999% of the way there. If there is any suggestion that this is foolish naivetee, please bail right away.

Thanks in advance.

Robin Davies
Pipedal Project