vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.39k stars 26.9k forks source link

Instrumentation in NextJS using custom library + altering RSC payload at Proxy layer #71601

Open sinwar opened 3 days ago

sinwar commented 3 days ago

Link to the code that reproduces this issue

https://github.com/soniankur948/RN-flicker (please note that it's very early version of code and library/complete app is on internal company codebase)

To Reproduce

  1. I've custom library to capture error, latency and count for an API/activity and trying to collect server side instrumentation for app route (next 14) but with the fact that page and layout renders in parallel it does not work.
  2. Similarly in our company we keep red data in encrypted form and only deccrypt that at closed layer to browser (which comes one layer up than Next Layer like Proxy Layer->Next). But it ends up altering the data in RSC payload which creates hydration issues in browser

Current vs. Expected behavior

For

  1. I see two feasible options - i. use custom server ii. calculate metrics for page and layout separately. Is there any other alternative or way to put interceptor to trace the request ?
  2. Is there any way to mark the data for which hydration does not fail for RSC data alternation?

Provide environment information

next info does not work due to internal npm dependencies. The setup is on node 20.x and uses next 14.

Which area(s) are affected? (Select all that apply)

Instrumentation

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

The application is deployed on ECS Fargate server. The next standalone gets copied on server and assets are served through CDN. We uses middleware for authentication hence all requests pass through that for app routes and route handlers. Instrumentation using the library works perfectly for route handler instrumentation and client side instrumentation.

lubieowoce commented 3 days ago

For hydration errors, have you tried following these suggestions, e.g. disabling SSR for certain components? https://nextjs.org/docs/messages/react-hydration-error

Other than that, modifying the RSC payload (presumably via string substitution) is not something that we can feasibly support, so you're going to be on your own