#Sentry react component profiling

1 messages · Page 1 of 1 (latest)

weak ingot
#

Hi, I just added the react component profiling to our code
according to https://docs.sentry.io/platforms/javascript/guides/react/features/component-tracking/#component-performance-monitoring
But it does not seem to work, or at least I cant find any transactions associated with it, the docs don't show how it should look like and there is no way to filter by op cods or anything else in the performance tab

Track React Components | Sentry for React

Learn how Sentry's React SDK allows you to monitor the rendering performance of your application and its components.

alpine wave
#

can you share your sentry init and configuration you did with your react component?

#

might help to turn on debug:true as well to ensure you don't see any errors in your browser console

weak ingot
#

Sure, we dont have any errors, we have sentry set up for months now and it works fine both for our server side and client side, but this bit just does not show (or I cant find any transactions)

    Sentry.init({
      integrations: [
        Sentry.replayIntegration(),
        Sentry.reactRouterV5BrowserTracingIntegration({
          history,
          routes: routeDefs.flattenedRoutes,
          matchPath,
        }),
      ],
      replaysSessionSampleRate: 0.01,
      replaysOnErrorSampleRate: 1.0,
      dsn: frontendConfig.sentryDsn,
      environment: frontendConfig.environment,
      release: frontendConfig.release,
      tracesSampler: () => {
        return smokeTestUsers.has(userData.username) ? 1 : 0.4;
      },
    });

    Sentry.setUser({ id: userData.sub, username: userData.username });
    Sentry.setTag('company_id', userData.company_id);
  }

export default withProfiler(
  connect(state => ({
    language: getSelectedLanguage(state),
    currentVersion: getServerVersion(state),
  }))(App),
);

Where App is out main app component

alpine wave
#

if you search tracing in your browser console, does it show that tracing is in fact turned on and generating events?

#

because if you are not seeing spans at all, i am suspicious of it is not working at all, or potentially you are already over quota and the events are being dropped

image.png
weak ingot
#

We are seeing events, we are not seeing events related to component profiling

alpine wave
#

it might be a bug we should log and investigate

can you confirm how you configured for bundlers? And if with our plugin what your bundler config looks like? You have a react + vite app? or what;s the exact setup?

There are two different ways you can set up React component name tracking in your application:

By installing Sentry's bundler plugins

By directly installing <@&1161884186567774260>/babel-plugin-component-annotate

weak ingot
#

Sure, we do have the bundler plugin (webpack) and it does work because the source maps are being uploaded, one sec I'l send the config

#

Looks like this

plugins.push(
      sentryWebpackPlugin({
        // sentry-cli configuration
        authToken: process.env.SENTRY_AUTH_TOKEN, // Taken from secret manager during CI build
        org: '',
        project: '',
        release: { name: version },
        sourcemaps: {
          assets: ['buildClient/**'],
        },
      }),
#

Made sure to update it to latest version btw

#

We dont have the babel-plugin-component-annotate, as according to the docs that is part of the Component Name Tracking requirement and not part of the Component Performance Monitoring I planned on adding that one next but I first wanted to see if this one works

alpine wave
#

reactComponentAnnotation

Can you try adding this to your webpack config?

#

sentryWebpackPlugin({
// ... other option
reactComponentAnnotation: { enabled: true }
}),

weak ingot
#

Sure I'l deploy that tomorrow and update

alpine wave
weak ingot
#

@alpine wave I deployed the code about 2 hours ago, I see no change in the way we receive events/transactions, the docs state that I should be able to find spans with ui.react.mount, ui.react.render, and ui.react.update. but I'm either really blind (open to that hehe) or they are not there

#

Here is an example of the spans I see in an event recived a few minutes ago:

image.png
alpine wave
#

would you happen to have reproduction repo?

@quasi tiger fyi we might have an issue, i don't know if you ever worked with this react perf feature before

weak ingot
#

Unfortunately I only have this running on our main app, I'm trying to add this while I working on other stuff so I cant really stop everything to try and repro this 😞

strong raft
#

Are the span also missing for other components when you wrap with the Profiler items rendered under your App root?