Sentry React Router Instrumentation

instrument.ts

import * as Sentry from '@sentry/react-router';
import { instrument } from 'react-router';

// Helper to wrap operations in Sentry spans
async function sentrySpan(name, op, cb) {
  return Sentry.startSpan(
    { name, op },
    async (span) => {
      try {
        const result = await cb();
        return { status: 'success', ...result };
      } catch (error) {
        span.setStatus({ code: 2, message: 'unknown_error' });
        Sentry.captureException(error);
        return { status: 'error', error };
      }
    }
  );
}

// Use React Router's instrumentation API
instrument({
  // Server requests
  async request({ request }) {
    return sentrySpan(
      `${request.method} ${request.url}`,
      'http.server',
      () => request()
    );
  },

  // Client navigations
  async navigate({ request }) {
    return sentrySpan(
      request.location.pathname,
      'navigation',
      () => request()
    );
  },

  // Route loaders
  async loader({ request, route }) {
    return sentrySpan(
      route.id || 'unknown-loader',
      'function.react-router.loader',
      () => request()
    );
  },

  // Route actions
  async action({ request, route }) {
    return sentrySpan(
      route.id || 'unknown-action',
      'function.react-router.action',
      () => request()
    );
  },

  // Lazy route loading
  async lazy({ request }) {
    return sentrySpan(
      'lazy-route-load',
      'function.react-router.lazy',
      () => request()
    );
  }
});