Inject Client Code / Sentry Error Tracking

[aheissenberger]

How can I inject Code into all Client pages to implement Sentry for error tracking?
The same question exists for the backend.

Are there any hooks to add code to the frontend and backend?

[lazarv]

In react-server there are no global frontend or backend hooks for injecting arbitrary code into every page.

On the client side, the intended solution is a top-level Client Component that is mounted once (for example in a root layout or app shell). That's the right place to initialize client-side tooling like Sentry once React is running.

If you specifically need code to run before hydration, that cannot be done via a Client Component at all. At that point you're no longer in React, you're operating at the HTML level. With the file-system router, this is supported by injecting a plain <script> tag directly from a layout. Since that script is emitted into the HTML output, it will execute before React and before hydration begins, which makes it suitable for early bootstrapping (for example installing global error handlers or loading Sentry). https://github.com/lazarv/react-server/blob/main/docs/src/pages/(root).layout.jsx is a good example for both use cases.

On the backend side, there isn't a single prescribed mechanism. Instrumentation can be set up in multiple valid ways: it can live in the runtime configuration of react-server, or even be pulled in at the Node.js level before the react-server CLI runs (like NODE_OPTIONS="--require ./sentry-bootstrap.js" react-server start). All of these approaches allow capturing errors globally, before or during request handling.

So the separation is intentional:

• React-level logic lives in Client Components
• Hydration-before behavior is achieved via raw HTML emitted from layouts or server components
• Backend instrumentation is a runtime concern and can be wired in at different layers

At the moment this is explicit rather than hidden behind a framework-level hook, by design.