withSentryConfig breaks auto-reload for next.js dev

[Maxim-Mazurok]

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/nextjs

SDK Version

7.69.0

Framework Version

React 18.2.0, Next 13.4.20-canary.30

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

After running sentry nextjs wizard I got this next config:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

// Injected content via Sentry wizard below

const { withSentryConfig } = require("@sentry/nextjs");

module.exports = withSentryConfig(
  module.exports,
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true,
    org: "travel-times",
    project: "javascript-nextjs",
  },
  {
    // For all available options, see:
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: true,

    // Transpiles SDK to be compatible with IE11 (increases bundle size)
    transpileClientSDK: true,

    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
    tunnelRoute: "/monitoring",

    // Hides source maps from generated client bundles
    hideSourceMaps: true,

    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,
  }
);

When I'm running next dev - I don't get live reload anymore.

Expected Result

Live reload works

Actual Result

Live reload doesn't work. What's interesting is that it will show compile errors on the page, and then when I fix them they go away, however the contents of the page aren't being reloaded.

[Maxim-Mazurok]

Workaround:

...
module.exports = nextConfig;

// Injected content via Sentry wizard below

if (process.env.CI) {
  const { withSentryConfig } = require("@sentry/nextjs");
...

[lforst]

@Maxim-Mazurok thanks for writing in. I can indeed reproduce. Currently I have no idea what might be causing this... I'll check with Vercel.

[lforst]

Ok I made some progress narrowing down. It seems like we break hmr for files that are not in the app directory. Directly modifying a page.tsx file inside app triggers hmr. Maybe we break the hmr dependency chain somehow.

[Maxim-Mazurok]

Interesting, I don't really know how this works, but I was editing a component that is directly used inside of the page.tsx and it wasn't reloading. I am including a json from outside of the app folder tho, but it wasn't directly related to changes I was making. I'm adding it using an async import.

Anyway, the workaround works pretty well for me, I had to create a wrapper for sentry profiling functions and add optional chaining to finish transactions, can share code if needed. But otherwise I'm not really affected, I don't need sentry in local dev anyway, and on vercel I have CI env.

[lforst]

@Maxim-Mazurok Your findings correlate with what I'm seeing. We should definitely fix this because we don't wanna break dev envs. This is on top of my mind. The only thing is that I am a bit stumped why this is happening.