Swallowed fetch failure

[fredericDelaporte]

The user session fetch method appears to have a "catch all" that swallows all troubles silently, then pretends the session is ready.

nuxt-auth-utils/src/runtime/app/composables/session.ts

Lines 29 to 39 in f55debb

	const fetch = async () => {
	sessionState.value = await useRequestFetch()<UserSession>('/api/_auth/session', {
	headers: {
	accept: 'application/json',
	},
	retry: false,
	}).catch(() => null)
	if (!authReadyState.value) {
	authReadyState.value = true
	}
	}

That is troublesome in case of failure, since the application user code has no way of detecting it, and no way of reporting the trouble.

I have searched the file history and saw it was there since the creation of the file, so, I found no explanation for this in the source. I have also searched issues without finding any about this.

What is the rationale for this implementation?

Should it be changed?

Underlying trouble that caused me to see this: I have implemented a "refresh" of the user session data by calling this fetch periodically (through setTimeout). It is meant for detecting if it has been changed through actions on another tab of the browser. When a fetch failure occurs, it causes the user data to switch to null, causing the Web site to switch to "unauthenticated" mode, while actually, the authentication is still there: reloading entirely the page allows it to switch back to logged in.

More troublesome to me, I have no way to see the fetch has actually failed to diagnose and fix the trouble, or at least, handle some retry logic. (In the browser, in my case, the trouble seems the HTTP request being sometime cancelled, appearing in the browser network pane without any response. No idea what would cause that cancellation.)

[fredericDelaporte]

I would rather have the fetch letting the failure bubble up, but that could be a breaking change.

Otherwise, would it be possible to preserve the current data, and expose some way to retrieve the failure if any?

Something like:

  const fetch = async () => {
    try {
      sessionState.value = await useRequestFetch()<UserSession>('/api/_auth/session', {
        headers: {
          accept: 'application/json',
        },
        retry: false,
      })
    } catch (err) {
      fetchError.value = err
      return
    }
    fetchError.value = undefined

    if (!authReadyState.value) {
      authReadyState.value = true
    }
  }

fetchError would be added on UserSession.

[atinux]

The silent catch is not ideal here, the catch was mostly during SSR to avoid breaking the app is something unexpected is sent back from the server (for instance, missing NUXT_SESSION_PASSWORD env variable).

I think we could expose a fetchState, but first, for what reason your fetch is failing?

[fredericDelaporte]

Unfortunately I have no clue why it is failing, since the error is swallowed, and the HTTP request was just cancelled, without receiving a response. So, I have no information at all about what causes the failure.

You may be able to reproduce the trouble here. It requires registering on this page. That is a staging environment, reset every two weeks: your registration will not persist, and no email will actually be sent to the registered email.

After registering, it starts refreshing the user session every thirty seconds, in case the would be customer clicks the email validation link sent in an email (that you will not receive, as this staging environment send all emails to a test mailbox).

About half of the refresh fails when doing this with Firefox under Windows 11 from my work laptop, when keeping the page fully in view. The trouble was not reproduced with Chrome on the same setup. I do reproduce it on my personal laptop under Windows 10 with Firefox, but less frequently. Having something hiding part of the page causes the error to occur less frequently, or no more at all.

It could well be a weird browser bug, but the error swallowing forbids getting more insights into the trouble.

On the following network pane capture, you can see three instances of session refresh call getting cancelled (GET request without a HTTP response status code). Nothing is emitted in the console pane.

The network call stack trace is:

So the call comes from this useRequestFetch (seen when clicking on session.js in previous stack trace):

const fetch = async () => {
    sessionState.value = await useRequestFetch()("/api/_auth/session", {
      headers: {
        accept: "application/json"
      },
      retry: false
    }).catch(() => null);
    if (!authReadyState.value) {
      authReadyState.value = true;
    }
  };