Improve Sentry react router steps

[jbojcic1]

Problem Statement

React router steps should mention that when running on serverless (Vercel in my case), server might not be able to flush the logs before execution is stopped. Way to mitigate that is to use waitUntil from Vercel (or something similar for other serverless platforms) similarly how it is already used in other Sentry libs like here for next.js where vercelWaitUntil is used.

I spent a lot of time to figure this out so having it mentioned in docs would save people a lot of time. I ended up solving it like this:

import { vercelWaitUntil } from '@sentry/core';

...

export const handleError: HandleErrorFunction = async (error, { request }) => {
  // React Router may abort some interrupted requests, don't log those
  if (!request.signal.aborted) {
    Sentry.captureException(error);

    console.error(error);

    vercelWaitUntil(flushSafelyWithTimeout());
  }
};

also the docs should mention that if you are instrumenting server with import in server entry file (when you are using serverless where you can't use NODE_OPTIONS), vite will tree shake that file so you need to mark it as side effect in package.json

Solution Brainstorm

See problem statement.

[linear]

JS-793 Improve Sentry react router steps

[chargome]

Hey @jbojcic1 thanks for putting in the effort to debug this. Good call, but instead of putting this into the docs I'll try to bake this into the SDK directly. Sorry if this caused you trouble!

[jbojcic1]

I'll try to bake this into the SDK directly

great. That sounds even better