errors in remix loaders/actions on vercel aren't reported

[boertel]

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

8.31.0

Framework Version

remix@2.12.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

https://github.com/boertel/sentry-action-error/

a few tests that I did:

1. build the app locally (with npm run build and npm run start) and the errors are reported
2. print DSN to make sure Sentry was properly setup
3. trigger manually captureException which doesn't work

Steps to Reproduce

1. deploy repo to vercel
2. set VITE_SENTRY_DSN as an environment variable
   2 access the page /sentry-example-page
3. click "throw an error on the action!"

Expected Result

Expected behavior is to see: "Sentry Error" on my Sentry Issues

(I do see a Unexpected Server Error but it is reported by https://github.com/boertel/sentry-action-error/blob/main/app/root.tsx#40 on the client side)

Actual Result

error is not showing in my Issues

[chargome]

Hi @boertel thanks for writing in and for providing a repro!

I checked your setup and everything was working as expected using a production build:

• client error
• action error (the Sentry Error that you capture manually from your action)
• unexpected Server Error (captured within your ErrorBoundary )

If you are facing issues with capturing errors on vercel I would argue with this setup this is most likely due to misconfiguration of env vars – you could set debug: true to your sentry init calls and check the logs on a vercel preview url to find out of your DSN is set up and if the SDK is properly configured.

[boertel]

Would you have any feedback/inputs on how I can debug this? I'm still not seeing any server issues getting to sentry when deployed to vercel.
I tried to simply Sentry.captureMessage('message') in the action, and even this isn't reported.
One warning that I see in the logs is: Sentry Logger [warn]: Remix SDK was unable to require @remix-run/server-runtime package. I'm not sure if that would affect the issue reporting?

I added a few console.log (and tried a lot of different things :D see commits in my repo) to see what was set up on vercel, using Sentry.getCurrentHub().getClient()

dsn {
  protocol: 'https',
  publicKey: 'xxxxxxxxx',
  pass: '',
  host: 'xxxxxx.ingest.us.sentry.io',
  port: '',
  path: '',
  projectId: 'xxxx'
}

options {
  transport: [Function: makeNodeTransport],
  sendClientReports: true,
  dsn: 'https://xxxxxxx@xxxxxxxx.ingest.us.sentry.io/xxxxxxx',
  tracesSampleRate: 1,
  autoInstrumentRemix: true,
  debug: true,
  _metadata: {
    sdk: {
      name: 'sentry.javascript.remix',
      packages: [Array],
      version: '8.32.0'
    }
  },
  defaultIntegrations: [
    {
      name: 'InboundFilters',
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'FunctionToString',
      setupOnce: [Function: setupOnce],
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'LinkedErrors',
      preprocessEvent: [Function: preprocessEvent],
      isDefaultInstance: true
    },
    {
      name: 'RequestData',
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'Console',
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'NodeFetch',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'OnUncaughtException',
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'OnUnhandledRejection',
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'ContextLines',
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'LocalVariablesAsync',
      setup: [Function: setup],
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'Context',
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'Modules',
      processEvent: [Function: processEvent],
      isDefaultInstance: true
    },
    {
      name: 'Express',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Fastify',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Graphql',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Mongo',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Mongoose',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Mysql',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Mysql2',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Redis',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Postgres',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Nest',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Hapi',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Koa',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Connect',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'GenericPool',
      setupOnce: [Function: setupOnce],
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'Kafka',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Dataloader',
      setupOnce: [Function: setupOnce],
      setup: [Function: setup],
      isDefaultInstance: true
    },
    {
      name: 'Amqplib',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Http',
      setupOnce: [Function: setupOnce],
      isDefaultInstance: true
    },
    {
      name: 'Remix',
      setupOnce: [Function: setupOnce],
      setup: [Function: setup],
      isDefaultInstance: true
    }
  ],
  spotlight: undefined,
  release: 'bbfaef90b53270baef547b2a2d4a54b07fa104ba',
  autoSessionTracking: true,
  stackParser: [Function (anonymous)],
  integrations: [
    {

[chargome]

@boertel did you add debug: true to your init calls? (Both on server and client, and then check the logs on a preview url of vercel)

[boertel]

Yes, debug: true on both client and server, and here is what I see on vercel