server/client components have been the bane of my existence with the new App router lol thats the real root of the problem and no matter what i do i cant seem to fix the error


What I'm currently doing:

using the google sheets api, im fetching all the data in a specific sheet in their Google sheet document, taking the fetched data, and sending it into front end components to display it all nice and fancy. it is dynamically fetched based off of the [slug] the user is on. the pages are gated by authentication so if the user is not on the perms for that slug page, they dont get displayed the data

The problem:

The data fetches and displays perfectly fine on my dev server when i run npm run dev or yarn dev, and they are getting the successful requests and responses on their end when we look in the google api. the problem comes when i host it up on a server (in my case vercel, for them runcloud i think), where when the data gets fetched it pops an error saying its leaking sensitive data and does not display the fetched data. looking into this error everyone is saying to make a middleware or a server component, ive tried both of those and neither fixed the issue.

I originally had this all hooked up to Supabase and it was workin fine but we changed it over to do google sheets, so its 100% somewhere in the fetching or displaying of the google sheets response


Error Message:

Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.


Google has provided a middleware but I do not believe it is working as intended, i'm thinking I need to wrap it with something else?