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

[email protected]

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://[email protected]/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

[chargome]

Do you have any special network configuration or a proxy running?

[boertel]

nothing special, it is using bare bone vercel.

I did some more testing/investigation yesterday, and I was able to report some issues to sentry, and here are the steps to do so:

1. go on https://sentry-action-error.vercel.app/sentry-example-page
2. click "Throw error in the action!" button. It shows "Something went error" meaning the error has been thrown but this error is never reported 😔
3. refresh the page
4. click "Throw error in the action!" button. Now this error is reported to sentry
5. I can refresh the page again "quickly", click the button, and errors will be reported. I haven't tested how long but if I retry the button 30sec/1min after, the first error isn't reported anymore

I checked my sampleRate and it is set at 1. Maybe the behavior can help you identify what is happening? but anyway thanks for helping me on this issue, much appreciated.

[lforst]

It's very much possible that the events are not flushed because the AWS lambdas on Vercel are freezing on response end and the SDK didn't yet get the chance to flush out the data. Can you look at this post from Vercel which introduces a new API for exactly that, and try to do waitUntil(Sentry.flush()) at the end of your handler?

[boertel]

genius ! Here is my handleError for remix:

export function handleError(error: Error, { request }: { request: Request }) {
  Sentry.captureRemixServerException(error, "remix.server", request, true);
  waitUntil(Sentry.flush());
}

and I am seeing all server errors being reported now 🎉 Thank you so much, after spending so much time investigating I was scared that it was a misconfiguration on my side but it wasn't 😄
I'm going to restart from scratch because my app is a mess after all the tests, and see what is the minimal setup to make it work right after running npx @sentry/wizard@latest -i remix

[lforst]

Glad that you could figure it out! To be fair, we should add docs around this.

[boertel]

I'm also surprised that nobody had this issue before, it doesn't seem to be something new. Maybe I'm over estimating the number of people hosting remix on vercel, and adding sentry!

I started fresh by running:

1. npx create-remix@latest --template vercel/vercel/examples/remix
2. npx @sentry/wizard@latest -i remix

The 2 changes that I needed to do in order to get server errors reported on sentry were to have this in my ./app/entry.server.ts

import * as Sentry from "@sentry/sentry";
import { waitUntil } from "@vercel/functions";

// initializing sentry here instead of NODE_OPTIONS='--import ./instrumentation.server.mjs'
Sentry.init({
  dsn: process.env.VITE_SENTRY_DSN,
  tracesSampleRate: 1,
  autoInstrumentRemix: true,
});

export const handleError = Sentry.wrapHandleErrorWithSentry(
  (error, { request }) => {
    // adding this line
    waitUntil(Sentry.flush());
  }
);

vercel doesn't have a "npm start" so I'm not sure how we could "plug in" ./instrumentation.server.mjs'. Adding the Sentry.init to the entry.server.ts works but is it enough? are we missing reporting some other errors?

I'm closing the issue now, and thanks again for your help, much appreciated!