Hi, sorry if this is really general but I'm completely stumped and unsure where to start.

Recently, my NextJS application hosted on Vercel has started hanging and timing out a tab with Chrome eventually showing the user a "Page Unresponsive" error and a suggestion to kill the tab. I am using Supabase for backend DB, auth etc. I unfortunately cannot replicate the bug locally but have seen it happen on both of my other co-founders computers while screen sharing. I am using Sentry for Error monitoring, but no logs or error is shown there - so it doesn't seem to throw an error, and it wasn't possible to open chrome devtools on the tab during the error as it locks the whole page.

For data fetching, I'm using the app dir with async calls and get server side props in the page directory, with react-query on the front end. I don't use effects for anything data related - although I am using an effect to detect if the page is mobile via the window (which sounds like a possible culprit - thinking about it again)

I also cannot pinpoint when it started happening in the app, but I have two hunches:
1. I have started migrating parts of the app to the new app directory, and was wondering if there might be issues when jumping between app directory and pages directory? Or perhaps I haven't done the migration properly and have some strange infinite loops happening.
2. I have recently migrated to the new supabase SSR auth package, and perhaps something in my middleware is causing a hang?

This is unfamiliar territory for me so any general advice would really be appreciated from ideas to try to logging that could help me track these types of issues. I have done a bit of googling but unfortunately everything is very broad so I haven't made much progress there.

Thanks in advance, Eamon