fresh
fresh copied to clipboard
denoland
Firefox page-refresh-on-save doesn't work
Hello! In playing with Fresh, I've found that the websocket connection fails in Firefox (Developer Edition, 105.0b6 (64-bit)) and that means that refresh-on-save doesn't work. Both Chrome and Safari work on the same machine.
The console error says:
The connection to http://localhost:8000/_frsh/alive was interrupted while the page was loading. [refresh.js:1:79](http://localhost:8000/_frsh/refresh.js)
I tested this on a new install of Fresh, doing
-
deno run -A -r https://fresh.deno.dev my-project - Selecting
nfor tailwind, andyfor VSCode - Running
deno task start
The refresh is working in the latest Firefox Developer Edition release for me. The error message is a purely cosmetic error. See https://bugzilla.mozilla.org/show_bug.cgi?id=1789252
Perhaps the error is a red herring?
But here's a video of a clean project not working in Firefox (top browser), and working in Chrome (middle) and Safari (bottom)
https://user-images.githubusercontent.com/3054066/188650771-247bbe01-e123-4c09-b3e6-0c8f249a5a98.mov
Is there anything I can do to help diagnose this on my side? I made sure that all the FF extensions were disabled when I made the video, and I closed and restarted FF. Hmm...
Can you check that you are on the latest version of Firefox Developer Edition?
Putting this in my console
new EventSource('/_frsh/alive').addEventListener('error', (err) => {
console.log(err)
})
Seems to fire the event handler, and prints out an error. I'm not sure if there's any useful info in here for me to look at though?
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: EventSource { url: "http://localhost:8000/_frsh/alive", withCredentials: false, readyState: 2, … }
isTrusted: true
originalTarget: EventSource { url: "http://localhost:8000/_frsh/alive", withCredentials: false, readyState: 2, … }
returnValue: true
srcElement: EventSource { url: "http://localhost:8000/_frsh/alive", withCredentials: false, readyState: 2, … }
target: EventSource { url: "http://localhost:8000/_frsh/alive", withCredentials: false, readyState: 2, … }
timeStamp: 22361
type: "error"
Following FF bug is likely to be blamed: https://bugzilla.mozilla.org/show_bug.cgi?id=1706003. Firefox is not properly reconnecting EventSource on lost connection.
Firefox supports a non-standard forceGet boolean parameter for location.reload(), to tell Firefox to bypass its cache and force-reload the current document. However, in all other browsers, any parameter you specify in a location.reload() call will be ignored and have no effect of any kind. Fresh calls location.reload() without forceGet param.
I've got kinda temporary fix for it, for me it works great at least.
in static folder add this file:
static/reloader.js
new EventSource("/_frsh/alive").addEventListener("error", (_err) => {
setInterval(async () => {
const response = await fetch("/_frsh/alive")
if (response.status === 200) location.reload()
}, 100)
})
then add this script it to your routes/_app.tsx (or create new one like mine, it's like index.html in Vite)
import { Head, asset } from "$fresh/runtime.ts"
import { AppProps } from "$fresh/server.ts"
export default function App(props: AppProps) {
return (
<>
<Head>
<script src={asset('/reloader.js')} />
</Head>
<props.Component />
</>
)
}
It's just detecting error caused by restart and then reload page when it's available again, so overall same experience and even reload pages on manual restart. One cons is flooded console with failed requests if restart takes longer.
This issue can be closed. The bug has been fixed in Firefox 110, which is the current stable version. I verified this locally, and the results are as expected when looking at the bug report linked in https://github.com/denoland/fresh/issues/694#issuecomment-1238145520.
@heyarne Thank you for reminder! I've checked Firefox 110 with deno 1.31.1 (not latest because of server shutdown issue) that this issue was solved. Closing.
