Session Replay for Remix SDK not populating anything

[sergical]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/remix

SDK Version

7.64

Framework Version

18.2

Link to Sentry event

No response

SDK Setup

import { useLocation, useMatches } from '@remix-run/react';
import { useEffect } from 'react';

import configuration from '~/configuration';
import { ENVIRONMENT, isBrowser } from '~/modules/utils';
import getLogger from './logger';

let initialized = false;

/**
 * @description Loads and initializes Sentry for tracking runtime errors
 */
async function initializeBrowserSentry() {
  const dsn = configuration.sentry.dsn;
  const Sentry = await import('@sentry/remix');

  if (!isBrowser || initialized) {
    return;
  }

  if (!dsn) {
    warnSentryNotConfigured();
  }

  Sentry.init({
    dsn,
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(
          useEffect,
          useLocation,
          useMatches,
        ),
      }),
      // Replay is only available in the client
      new Sentry.Replay(),
    ],
    tracesSampleRate: 1.0,
    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    environment: ENVIRONMENT,
    tracePropagationTargets: ['localhost', /^https:\/\/seapeopleapp\.com\/api/],
    beforeSend: (event, hint) => {
      if (ENVIRONMENT === 'development') {
        getLogger().error(
          'Sentry exception',
          hint.originalException || hint.syntheticException,
          event.level,
        );
        return null;
      }
      return event;
    },
  });

  initialized = true;
}

function warnSentryNotConfigured() {
  console.warn(
    `Sentry DSN was not provided. Please add a SENTRY_DSN environment variable to enable error tracking.`,
  );
}

export default initializeBrowserSentry;

Steps to Reproduce

import { useEffect } from 'react';
import initializeBrowserSentry from '~/modules/utils/initialize-browser-sentry';

/**
 * @description Hook to initialize Sentry when a component mounts. This
 * needs to be used in the root component you want to track errors for. Due
 * to its large size, we recommend you can add it to {@link RouteShell} (as is
 * by default) so it will only get loaded for the application pages
 */
function useSentry() {
  useEffect(() => {
    void initializeBrowserSentry();
  }, []);
}

export default useSentry;

import useSentry from '~/modules/hooks/useSentry';

const SentryBrowserWrapper: React.FCC = ({ children }) => {
  useSentry();

  return <>{children}</>;
};

export default SentryBrowserWrapper;

Expected Result

Session replay showing up when an error is hit

Actual Result

Session replay page is in an empty state

[lforst]

Do you see any logs with debug: true?

[sergical]

Sentry Logger [info]: [Replay] Loading existing session
logger.ts:74 Sentry Logger [info]: [Replay] Starting replay in buffer mode
logger.ts:74 Sentry Logger [info]: [Replay] Using compression worker
logger.ts:74 Sentry Logger [info]: [Replay] Updating session start time to earliest event in buffer to Tue Sep 26 2023 11:32:09 GMT-0400 (Eastern Daylight Time)

Yes the logs are there in debug mode

[lforst]

@sergical Do you have a link to your Sentry org? Maybe we are dropping something in our backend.