LCP is lower than FCP in most performance report data

[SouthLink]

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?

Self-hosted/on-premise

Which package are you using?

@sentry/react

SDK Version

@sentry/react 6.9.0 @sentry/tracing 6.9.0

Framework Version

[email protected]

Link to Sentry event

No response

Steps to Reproduce

I used the following operations in the single page application I built with webpack and react-router:
Using HOC (Higher Order Component), I used the following code in the APP entry to monitor react application performance。

import React from "react";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

const WithSentry = (
  WrappedComponent: typeof React.Component
): React.ComponentClass => {
  return class WithSeo extends React.PureComponent {
    componentDidMount() {
      this.initEvent();
    }

    private initEvent() {
      Sentry.init({
        dsn: "xxxxxxxxxxxxxxxx",
        sampleRate: 1.0,
        tracesSampleRate: 0.5,
        release: `[email protected]`,
        integrations: [
          new Integrations.BrowserTracing({
            beforeNavigate: (context) => {
              return {
                ...context,
                name: location.pathname
                  .replace(/\/(\d+,+|\d+)+/g, "/:id"),
              };
            },
          }),
        ],
      });
    }

    render() {
      return (
        <WrappedComponent {...this.props}>
          <Sentry.ErrorBoundary></Sentry.ErrorBoundary>
        </WrappedComponent>
      );
    }
  };
};

export default (WrappedComponent: typeof React.Component) =>
  Sentry.withProfiler(WithSentry(WrappedComponent));

Expected Result

The actual value of LCP will be larger than FCP

Actual Result

[Lms24]

Hi @SouthLink thanks for writing in! I see you're on a rather old version of our SDK which we don't officially support anymore. Have you tried if upgrading Sentry to the most recent 7.x version (7.30.0 at the time of writing)? We changed quite a few things around web vitals since v6 (e.g. #5987), so chances are that something has changed here. Lmk if this helps!
For upgrading take a look at our v6 -> v7 migration guide to learn about breaking changes.

[AbhiPrasad]

As per our v7 changelog

Replaced BrowserTracing integration's maxTransactionDuration option with finalTimeout option in the @sentry/tracing package and reset idleTimeout based on activities count. This should improve accuracy of web-vitals like LCP by 20-30%.

So v7 should help improve LCP collection here. See the PR #5044 for more details if you are interested.

[SouthLink]

根据我们的v7 变更日志

将 @sentry/tracing 包中的 BrowserTracing 集成的 maxTransactionDuration 选项替换为 finalTimeout 选项，并根据活动计数重置 idleTimeout。这应该可以将 LCP 等网络生命体征的准确性提高 20-30%。

所以 v7 应该有助于改进这里的 LCP 收集。如果您有兴趣，请参阅 PR #5044了解更多详细信息。

Thanks. I'll try upgrading the SDK

[Lms24]

Gonna close this issue in the meantime. Let us know if this still persists after the update.

[SouthLink]

暂时关闭这个问题。请告诉我们更新后此问题是否仍然存在。

After upgrading the SDK, the issue has been resolved