akaco Comments - Answer Overflow

My application uses Supabase, and because Supabase's JWT refresh is not immediate, it causes hydration mismatches. I found that most hydration mismatches are due to this reason. Can I manually register an error handler for when a hydration mismatch error occurs?

// plugins/hydration-error-handler.ts
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.config.errorHandler = async (error, instance, info) => {
        console.error('Global error handler:', error, instance, info)

        if (info === 'hydration') {
            console.error('Hydration error detected', error)
            await correctHydrationIssue()
        }
    }
})

async function correctHydrationIssue() {
    const supabase = useSupabaseClient()
    const { error } = await supabase.auth.refreshSession()
    if (error) {
        console.error('Failed to refresh session', error)
        return
    }
}

// plugins/hydration-error-handler.ts
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.config.errorHandler = async (error, instance, info) => {
        console.error('Global error handler:', error, instance, info)

        if (info === 'hydration') {
            console.error('Hydration error detected', error)
            await correctHydrationIssue()
        }
    }
})

async function correctHydrationIssue() {
    const supabase = useSupabaseClient()
    const { error } = await supabase.auth.refreshSession()
    if (error) {
        console.error('Failed to refresh session', error)
        return
    }
}

I found that this doesn't work.

7 replies

Gaming

Programming