[@sentry.nextjs] webvitals like LCP and FID are missing due to pageload transaction finishes early

[whalezhouyj]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Affected Link

https://sentry.io/organizations/wukong-fe/performance/cp-student-center:acb9ce58ea414c6f829c53fd6779bc1f/?display=vitals&project=5860551&query=transaction.duration%3A%3C15m+has%3Ameasurements.fcp&showTransactions=recent&statsPeriod=24h&transaction=%2F&unselectedSeries=p100%28%29

Package + Version

• @sentry/nextjs 6.9.0
• nextjs 11.0.1

Description

After integrating our project(nextjs on Vercel) with Sentry, we found most of the pageload transactions do not have LCP and FID data.

After some investigation we found that the pageload transaction ends when Router.changeState is triggered:
https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/performance/client.ts#L91

function changeStateWrapper(originalChangeStateWrapper: RouterChangeState): WrappedRouterChangeState {
  const wrapper = function(
    this: any,
    method: string,
    // The parameterized url, ex. posts/[id]/[comment]
    url: string,
    // The actual url, ex. posts/85/my-comment
    as: string,
    options: Record<string, any>,
    // At the moment there are no additional arguments (meaning the rest parameter is empty).
    // This is meant to protect from future additions to Next.js API, especially since this is an
    // internal API.
    ...args: any[]
  ): Promise<boolean> {
    if (startTransaction !== undefined) {
      if (activeTransaction) {
        activeTransaction.finish();
      }
    ...
}

However Router.changeState will be called when the Router component mounts. This leads pageload transaction finish immediately:
https://github.com/vercel/next.js/blob/e89b8e466aad110f8af3f60ef7d8292f6064a245/packages/next/client/index.tsx#L204

 componentDidMount() {
      ...
      // update query on mount for exported pages
      router.replace(
        router.pathname +
          '?' +
          String(
            querystring.assign(
              querystring.urlQueryToSearchParams(router.query),
              new URLSearchParams(location.search)
            )
          ),
        asPath,
        ...
      )
}

Reproducible Demo

Please visit this test page for reproduction:
https://cp-student-center-kk7qwhuq5-wukong-frontend.vercel.app/login

[whalezhouyj]

@AbhiPrasad Please visit this test page for reproduction:

https://cp-student-center-kk7qwhuq5-wukong-frontend.vercel.app/login

I've enabled debug logs. As you can see below, LCP and FID were added after pageload transaction finished.

Sentry Logger [Log]: Integration installed: InboundFilters
logger.js:31 Sentry Logger [Log]: Integration installed: FunctionToString
logger.js:31 Sentry Logger [Log]: Integration installed: TryCatch
logger.js:31 Sentry Logger [Log]: Integration installed: Breadcrumbs
logger.js:31 Sentry Logger [Log]: Global Handler attached: onerror
logger.js:31 Sentry Logger [Log]: Global Handler attached: onunhandledrejection
logger.js:31 Sentry Logger [Log]: Integration installed: GlobalHandlers
logger.js:31 Sentry Logger [Log]: Integration installed: LinkedErrors
logger.js:31 Sentry Logger [Log]: Integration installed: Dedupe
logger.js:31 Sentry Logger [Log]: Integration installed: UserAgent
logger.js:31 Sentry Logger [Log]: Integration installed: BrowserTracing
logger.js:31 Sentry Logger [Log]: [Tracing] Starting pageload transaction on scope
logger.js:31 Sentry Logger [Log]: Setting idle transaction on scope. Span ID: 97b2935a5fa60658
logger.js:31 Sentry Logger [Log]: [Tracing] starting pageload transaction - /login
logger.js:31 Sentry Logger [Log]: Starting heartbeat
logger.js:31 Sentry Logger [Log]: pinging Heartbeat -> current counter: 0
logger.js:31 Sentry Logger [Log]: [Tracing] finishing IdleTransaction 2021-07-15T02:39:55.312Z pageload
logger.js:31 Sentry Logger [Log]: [Tracing] Adding & adjusting spans using Performance API
logger.js:31 Sentry Logger [Log]: [Measurements] Adding TTFB
logger.js:31 Sentry Logger [Log]: [Tracing] flushing IdleTransaction
logger.js:31 Sentry Logger [Log]: [Measurements] Adding measurements to transaction {
"connection.rtt": {
"value": 250
},
"connection.downlink": {
"value": 4.6
},
"ttfb": {
"value": 67.50011444091797
},
"ttfb.requestTime": {
"value": 58.90011787414551
}
}
logger.js:31 Sentry Logger [Log]: [Tracing] Finishing pageload transaction: /login.
logger.js:31 Sentry Logger [Log]: [Tracing] Starting navigation transaction on scope
logger.js:31 Sentry Logger [Log]: Setting idle transaction on scope. Span ID: b813e9b13c3b1e83
logger.js:31 Sentry Logger [Log]: [Tracing] starting navigation transaction - /login
logger.js:31 Sentry Logger [Log]: Starting heartbeat
logger.js:31 Sentry Logger [Log]: pinging Heartbeat -> current counter: 0
logger.js:31 Sentry Logger [Log]: [Measurements] Adding LCP
logger.js:31 Sentry Logger [Log]: [Measurements] Adding FID
logger.js:31 Sentry Logger [Log]: [Tracing] finishing IdleTransaction 2021-07-15T02:39:58.320Z navigation
logger.js:31 Sentry Logger [Log]: [Tracing] Adding & adjusting spans using Performance API
logger.js:31 Sentry Logger [Log]: [Measurements] Adding FP
logger.js:31 Sentry Logger [Log]: [Measurements] Adding FCP
logger.js:31 Sentry Logger [Log]: [Tracing] flushing IdleTransaction
logger.js:31 Sentry Logger [Log]: [Tracing] Finishing navigation transaction: /login.

[AbhiPrasad]

Thank you for reporting, fix is on the way!