Client-side error when opening Next.js page from Instagram

286 views Asked by At

I've been building my personal portfolio using Next.js and things seem to be going just fine. However, if I try linking this website to my Instagram bio, it opens to the following:

Application error: a client-side exception has occurred

(see the browser console for more information).

Upon further investigation, I discovered that the url attached to my bio isn't quite the link clicked by the user, as Meta adds ?fbclid=<some value> to the end. I've found that fbclid is a query parameter used by Meta for analytics, but the implicit (and seemingly unchangeable) inclusion of it in my bio's URL somehow breaks my page.

Is there some way to dodge this parameter, or perhaps address it in my page's code?

(Side note: I recently installed the Vercel Web Analytics script into my website -- could that have something to do with it?)

If I navigate to the page again on my phone after removing the parameter, it fixes the problem.

Edit: I've tried digesting the parameter into a variable to see if that would fix the problem, but to no avail:

const router = useRouter()
useEffect(() => {
    if (!router.isReady) { return } else {
        if (router.query) {
            const fbclid = router.query.fbclid ? router.query.fbclid : ""
        }
    }
}, [router])
2

There are 2 answers

0
Agustin Forero On

I was able to figure out how to fix this. Meta will add the fbclid query parameter, but if this is detected, you can simply reroute the user to the normal version of whichever page they expect using a useEffect(). Programmatically, this looks like...

const router = useEffect(() => {
    if (!router.isReady) { return } else {
        if (router.query && router.query["fbclid"]) {
            // replace with the URL you'd like to redirect them to, e.g. your home page
            window.location = "https://your.home.page/"
        }
    }
}, [router])
1
Nikush Dalia On

For anyone running into this, please check that you don't use navigator, or the browser's Service Worker registry as Instagram's browser doesn't have access to them and will trip.