Skip to content

LCP is lower than FCP in most performance report data #6744

Closed
@SouthLink

Description

@SouthLink

Is there an existing issue for this?

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

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Package: reactIssues related to the Sentry React SDK

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions