Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firefox page-refresh-on-save doesn't work #694

Closed
frehner opened this issue Sep 3, 2022 · 11 comments
Closed

Firefox page-refresh-on-save doesn't work #694

frehner opened this issue Sep 3, 2022 · 11 comments

Comments

@frehner
Copy link

frehner commented Sep 3, 2022

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

  1. deno run -A -r https://fresh.deno.dev my-project
  2. Selecting n for tailwind, and y for VSCode
  3. Running deno task start
@dector
Copy link

dector commented Sep 5, 2022

+1
Screenshot from 2022-09-05 21-02-15

@lucacasonato
Copy link
Member

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

@frehner
Copy link
Author

frehner commented Sep 6, 2022

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)

Screen.Recording.2022-09-06.at.7.41.46.AM.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...

@lucacasonato
Copy link
Member

Can you check that you are on the latest version of Firefox Developer Edition?

@frehner
Copy link
Author

frehner commented Sep 6, 2022

Firefox developer edition is up to date
105.0b7 (64-bit)

Yup!

@frehner
Copy link
Author

frehner commented Sep 6, 2022

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"

@lucacasonato
Copy link
Member

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.

@frehner frehner changed the title Firefox websocket fails, page refresh on save doesn't work Firefox page-refresh-on-save doesn't work Sep 6, 2022
@nhrones
Copy link

nhrones commented Oct 25, 2022

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.

@xxSkyy
Copy link

xxSkyy commented Oct 29, 2022

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.

@heyarne
Copy link

heyarne commented Mar 12, 2023

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 #694 (comment).

@hashrock
Copy link
Contributor

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants