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.

[sergical]

https://sea-people.sentry.io/ this one?

[mydea]

To clarify the debug logs, can you copy debug logs from when an error occurs?

[sergical]

Below screenshot is the end state: An error boundary page. You can see the url - i got here by navigating from /admin and clicking on something that linked to a wrong URL which resulted in a 500. So the Replay logs you see are from /admin and then the 500 is from the page i screenshot.

Now that I think about it, my guess is that ErrorBoundary is not wrapped with a SentryProvider 🤦

I did that. But still not seeing any logs from Replay when navigating from /admin to /admin/users/${uuid} which doesn't exist.

Is it something to do with Remix's server side nature vs Replay being client only?

[mydea]

So generally speaking, replay considers an "error" for error sampling whenever a Sentry exception is caught. So we'd only capture the replay if an error is sent to Sentry.

I guess this is not actually sending an error to Sentry? If so, this is the root cause here - the errors are actually not properly instrumented/captured. Or the error is captured on the backend, which does not have replay, of course.

So can you double check:

• Is a Sentry error captured (=does it show up in the issue stream?)
• If so, is the error captured from the frontend or the backend?
• --> Only if the error is captured by the frontend, a replay capture will be triggered.

[sergical]

Is there an example I can take a look at in the context of Remix where a Session replay instrumentation behaves as expected on route changes where a new route is an error route. Or is the thinking that a server rendered error route should pass along a sentry error on client render as well to catch it?

I understand that if a user performs an action on the client that results in a sentry error, the session replay will pick it up, however, route changes would also be super helpful to handle 😓

[sergical]

"@sentry/remix": "^7.71.0",

[sergical]

I just did

export const ErrorBoundary: ErrorBoundaryComponent = () => {
  const error = useRouteError() as Error & {
    status?: number;
    statusText?: string;
    data?: string;
  };
  captureRemixErrorBoundaryError(error);

  const client = Sentry.getCurrentHub().getClient();
  if (client) {
    const replay = client?.getIntegration(Sentry.Replay);
    if (replay) {
      replay.flush();
    }
  }

  return (
    <html className="h-full">
      <head>
        <title>Oh no!</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <SentryProvider>
        <body className="h-full">
          <main className="grid min-h-full place-items-center bg-background px-6 py-24 sm:py-32 lg:px-8">
            <div className="text-center">
              <p className="text-base font-semibold text-primary">
                {error.status}
              </p>
              <Heading type={1}>{error.statusText}</Heading>
              <p className="mt-6 text-base leading-7 text-muted-foreground">
                {error.data}
              </p>
              <div className="mt-10 flex items-center justify-center gap-x-6">
                <Button href="/">Go back home</Button>
              </div>
            </div>
          </main>
          <Scripts />
        </body>
      </SentryProvider>
    </html>
  );
};

Hopefully that works, will report back!

[mydea]

`"@sentry/remix": "^7.71.0",`

Sorry, bad example, forgot that this is not exposed - no need to check for isEnabled as we check that internally. so what you did is correct and should work:

if (replay) {
  replay.flush();
}

Let us know if that works!

[sergical]

this is what I am getting 🤷

[mydea]

This seems like Sentry.Replay may be undefined, can this be? You can also try client.getIntegrationById('Replay'), which should do the same thing.

Could it be that this is called somewhere in server side code? There replay would not be available.

[sergical]

Should I do it inside the useEffect of the ErrorBoundary?

[AbhiPrasad]

Yup useEffect will work, or you can also gate with if (typeof document !== "undefined") to ensure it only runs on browser.

[sergical]

Separate question but while I have you here ❤️

npm run dev

> [email protected] dev
> remix dev


 💿  remix dev

 info  building...
 info  built (3s)
Sentry Logger [log]: Integration installed: InboundFilters
Sentry Logger [log]: Integration installed: FunctionToString
Sentry Logger [log]: Integration installed: Console
Sentry Logger [log]: Integration installed: Http
Sentry Logger [log]: Integration installed: Undici
Sentry Logger [log]: Integration installed: OnUncaughtException
Sentry Logger [log]: Integration installed: OnUnhandledRejection
Sentry Logger [log]: Integration installed: ContextLines
Sentry Logger [log]: Integration installed: LocalVariables
Sentry Logger [log]: Integration installed: Context
Sentry Logger [log]: Integration installed: Modules
Sentry Logger [log]: Integration installed: RequestData
Sentry Logger [log]: Integration installed: LinkedErrors
[remix-serve] http://localhost:3000 (http://192.168.0.37:3000)
Sentry Logger [log]: [Tracing] Adding sentry-trace header 6f50f91ee99c4581977dffb0ba04f9a0-8f199ca9c9174605 to outgoing request to "http://localhost:3001/ping":

What is the Adding sentry-trace header thing and should it be on the same port as Remix and should I have a /ping route to make sure it's working

[AbhiPrasad]

We attach the sentry-trace header as part of distributed tracing. This is used to link errors/performance events between backend and frontend.

[sergical]

So turns out Vercel does something weird when it builds Remix projects. Typically, it builds a 404 page as a Serverless function. But as soon as you have anything within your app that's set up with edge runtime, it builds the 404 page as an Edge function, which in turn breaks it with or without a Sentry config.

I will close this out for now and see what I get from the Vercel side of things.

Thanks again for all your support, learned a lot here! ❤️