Add OpenTelemetry

[joaquin-diaz]

Hi! In my company, we use OpenTelemetry for RUM (Real User Monitoring) by hooking into react-router's listeners, and we thought it might be useful for other users to have this built-in.

For those of you who are not familiar with OpenTelemetry, OpenTelemetry is an Observability framework and toolkit designed to create and manage telemetry data such as traces, metrics, and logs. You can read more about it in their docs.

Essentially, what I'm proposing is adding an event tracking when a user navigates to another route, with a couple of attributes showing the current and next path. I'm following the OpenTelemetry Instrumentation docs, and I think it's worth mentioning that all these API calls are no-op for users without the OpenTelemetry SDK integrated into their apps. Meaning, this will not affect users without OpenTelemetry, although they'll get the 5.4kB extra size in the bundle (minified, and gzipped).

For example:

const REACT_ROUTER_TRACER = "react-router";
const REACT_ROUTER_SPAN_NAME = "route-change";
const REACT_ROUTER_ATTRIBUTE_NAMESPACE = 'react_router'

function createNavigationSpan(newState: RouterState, previousState: RouterState) {
  const state = newState.location.state;
  // users can add their own context so these spans are children of their trace/span
  const spanContext = state && state.spanContext ? (state.spanContext as SpanContext) : null;
  const currentContext = spanContext ? trace.setSpanContext(context.active(), spanContext) : context.active();
  const tracer = trace.getTracer(REACT_ROUTER_TRACER);

  context.with(currentContext, () => {
    const span = tracer.startSpan(REACT_ROUTER_SPAN_NAME);

    span.setAttributes({
      [`${REACT_ROUTER_ATTRIBUTE_NAMESPACE}.current.url.path`]: previousState.location.pathname,
      [`${REACT_ROUTER_ATTRIBUTE_NAMESPACE}.current.url.query`]: previousState.location.search,
      [`${REACT_ROUTER_ATTRIBUTE_NAMESPACE}.next.url.path`]: newState.location.pathname,
      [`${REACT_ROUTER_ATTRIBUTE_NAMESPACE}.next.url.query`]: newState.location.search,
      [`${REACT_ROUTER_ATTRIBUTE_NAMESPACE}.history_action`]: newState.historyAction,
      // or more add attributes
    });
    span.end();
  });
}

We could call this function where the handler for navigation is in the RouterProvider

Then a user can do something like this to add a SpanContext

const Component = () => {
  const navigate = useNavigate();
 
  ...

  const handleNavigate = () => {
    navigate("/some-path", {
      state: {
        spanContext: {
          traceId: "123",
        },
      },
    });
  };

  ...
}

With OpenTelemetry quickly becoming the standard for backend observability, I believe there's an opportunity to do the same on the client side so that we can establish a consistent standard across the entire stack. Implementing this would enable users to have zero-code instrumentation for react-router and, hopefully, make it easier for frontend observability to gain traction within the community.

I'm happy to discuss further why I think this could be useful and which other spans/attributes could be added in the future, but I believe this is a good starting point

Thanks!

[punkpeye]

Do you have any code that you could share that's ready to use?

Looking for solutions to instrument react-router codebase

[ranupratapsingh]

Hi all,
Since react router v7(framework mode), open telemetry support becomes even more crucial. While we can instrument it using express and some custom overrides, it'll be great if we have a dedicated package in OpenTelemetry JavaScript Contrib.

Can somebody confirm this thought is in right direction ? or a gist of custom overrides will suffice ?

[joaquin-diaz]

Hi! We ended up doing the instrumentation on our side https://github.com/embrace-io/embrace-web-sdk/tree/main/src/instrumentations/navigation/NavigationInstrumentation/react. But it would be great to contribute the code back here or in OTel JS contrib. Ideally here so it's zero code instrumentation for end users