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: `xxx@v1.0.0`,
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));
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
react@16.12.0
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。
Expected Result
The actual value of LCP will be larger than FCP
Actual Result