Pageloads traces aren't being captured by sentry/nextjs

[purplecandy]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] 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

8.17.0

Framework Version

Next 13.5.6 (Pages Router)

Link to Sentry event

No response

SDK Setup/Reproduction Example

Sentry.init({
    dsn: SENTRY_DSN,
    integrations: [
      Sentry.browserTracingIntegration({
        instrumentNavigation: true,
        instrumentPageLoad: true,
        enableInp: true,
        enableLongTask: true,
      }),
      Sentry.breadcrumbsIntegration({
        console: false,
      }),
    ],
    tracesSampleRate: 0.15,
    beforeSend: (event, hints) => {
      const location = window?.location?.href
      const area = getAreaFromUrl(location)
      if (!event.tags) return event
      event.tags.area = area

      return event
    },
  })

Steps to Reproduce

1. Enter the URL of the page in the browser or refresh any page
2. Once the page is done loading and the idle timeout is over - sentry should capture a page load event with Web Vitals

Expected Result

Sentry should track page load operations with web vitals.

Actual Result

Sentry only tracks navigation operations and leaves out page loads and web vitals reports.

[andreiborza]

Hello, thanks for writing in. Could you please post a reproduction repo or a stackblitz to make sure we're on the same page?

To narrow down the issue, please set debug: true and tracesSampleRate: 1.0 in both sentry.client.config.ts and sentry.server.config.ts and set disableLogger to false inside next.config.js. Run your app and paste logs you get in the console. You should see a transaction id for the pageload in your log. Additionally, could please you verify in the network tab that the request payload for the envelope api call contains the transaction id of the pageload?

I've tried this out locally and I was able to get pageload spans, albeit sporadically. That's something we need to look into.

[andreiborza]

@purplecandy could you also please add

  beforeSendTransaction(event, hint) {
    event.spans?.forEach((span) =>
        console.log(`Duration for span ${span.description}: ${span.timestamp! - span.start_timestamp}`)
    );

    return event;
  },

to your sentry.client.config.ts Sentry.init call and paste console output?