How to Set Up Sentry in Next.js Using a Web Worker to Avoid Main Thread Impact?

[TinaTahvildari]

I’m working on a Next.js project where I want to set up Sentry for error tracking without impacting the Total Blocking Time (TBT) and main-thread performance. I’ve tried moving Sentry operations to a Web Worker, but I'm facing issues with Sentry events not being sent successfully.

Here’s the current setup:

1. Worker Setup (public/sentryWorker.js): I imported Sentry and initialized it inside the worker to keep error capturing off the main thread.

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://example@sentry.io/12345',
  tracesSampleRate: 0.1,
  debug: true,
});

console.log("Sentry Worker initialized");

self.onmessage = function (event) {
  if (event.data && event.data.type === "captureError") {
    const { message, stack } = event.data.error;

    const error = new Error(message);
    error.stack = stack;

    Sentry.captureException(error);
    console.log("Error captured by Sentry in worker:", message);
  }
};

self.onerror = function (error) {
  console.error("Error in Sentry worker:", error);
};

2. Worker Handler (utils/sentryErrorHandler.js): I created a helper function to initialize the worker and send error data to it.

import * as Sentry from '@sentry/nextjs';

let worker;

function initializeWorker() {
  if (!worker && typeof window !== 'undefined') {
    try {
      worker = new Worker('/sentryWorker.js', { type: 'module' });
      console.log('Sentry Web Worker initialized:', worker);
    } catch (error) {
      console.error('Failed to initialize worker:', error);
    }
  }
}

export function captureError(error) {
  initializeWorker();

  if (worker && error) {
    const serializedError = {
      message: error.message,
      stack: error.stack,
    };
    worker.postMessage({
      type: 'captureError',
      error: serializedError,
    });
    console.log('Sending error to worker:', serializedError.message);
  }
}

if (typeof window !== 'undefined' && 'requestIdleCallback' in window) {
  requestIdleCallback(initializeWorker);
} else {
  setTimeout(initializeWorker, 0);
}

3. Global Error Handling (_app.js): I use global error and promise rejection handlers to capture errors across the app:

import { useEffect } from 'react';
import { captureError } from '../utils/sentryErrorHandler';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const handleUnhandledRejection = (event) => {
      captureError(event.reason);
    };

    const handleError = (event) => {
      captureError(event.error);
    };

    window.addEventListener('error', handleError);
    window.addEventListener('unhandledrejection', handleUnhandledRejection);

    return () => {
      window.removeEventListener('error', handleError);
      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Issue:

With this setup, the worker initializes, and the captureError function posts error messages to the worker, but no events are sent to Sentry. In the browser console, I see: Sentry Web Worker initialized Sending error to worker: [error message]
But I don't see: Error captured by Sentry in worker

Question:

1. Is there an inherent limitation with using @sentry/browser in a Web Worker context?
2. If so, what’s the best way to handle Sentry error reporting via a worker in Next.js to avoid TBT and main-thread blocking?
3. Are there any alternative approaches or best practices to offload Sentry processing from the main thread?

Thank you for any insights!

[lforst]

Hi, the Sentry SDK operates a lot on the basis of unserialized objects and therefore moving its logic into a web worker would be extremely hard. We currently do not support this.

Have you actually found Sentry to block the main thread a lot? Cause in theory that shouldn't be the case (unless you use Session Replay without the compression worker feature).