How do I disable these UI lifecycle logs but not Device events and App lifecycle events in the react native app?

[Nehal-Zeller]

What React Native libraries do you use?

React Navigation

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

6.1.0

How does your development environment look like?

OS: iOS

Node: 18.20.0

yarn: 4.1.0
react: 18.2.0

react-native: 0.75.4

hermesEnabled: yes
newArchENabled: false

Sentry.init()

Sentry.init({
dsn: env.SENTRY_DNS,
environment: env.SENTRY_ENV,
enableNative: true,
tracesSampleRate: 0.5,
integrations: [SENTRY_ROUTING_INSTRUMENTATION, SENTRY_BREADCRUMB_INSTRUMENTATION]
})

const SENTRY_ROUTING_INSTRUMENTATION = Sentry.reactNavigationIntegration(
{
enableTimeToInitialDisplay: true,
}
);

const SENTRY_BREADCRUMB_INSTRUMENTATION = Sentry.breadcrumbsIntegration({
console: false,
fetch: false,
xhr: false,
});

Steps to Reproduce

Navigating through the app

Expected Result

Don't want to see UI lifecycle events in sentry log, these are redundant logs and I don't want to see them in my sentry log.

How do I disable these UI lifecycle logs but not Device events and App lifecycle events?

Actual Result

[antonis]

Hello @Nehal-Zeller 👋
You can filter out event breadcrumbs using the beforeBreadcrumb hook. For example to filter out navigation breadcrumbs you could use something like the following:

Sentry.init({
...
  beforeBreadcrumb(breadcrumb: Breadcrumb, _hint?: BreadcrumbHint) {
    if (breadcrumb.type === 'navigation') {
     return null;
    }
    return breadcrumb;
  },
...

You can find more in the documentation on filtering events and using breadcrumbs.
Let us know if that helps 🙏

Also please note that we're winding down for the holidays, so responses will be slower than usual.

[Nehal-Zeller]

Thank you @antonis 🙏🏽

[Nehal-Zeller]

Also,
export const excludeThirdPartyDomainsFromSentryLogs = [
/^segment.io/,
/^clients3.google.com/,
];

beforeSendTransaction(event) {
    const requestUrl = event.extra?.requestUrl;
    if (
      requestUrl &&
      excludeThirdPartyDomainsFromSentryLogs.some((pattern) =>
        pattern.test(requestUrl)
      )
    ) {
      return null;
    }

    return event;
  },

beforeBreadcrumb(breadcrumb) {
    if (breadcrumb.category?.toLowerCase().includes('ui lifecycle')) {
      return null;
    }
    return breadcrumb;
  },

will filtering out with type exclude react navigation logs too?
I tried to filter some third party Http logs too using beforeSendTransaction but that didn't work. Could you help me if I'm doing it right?

[grgmo]

I can't seem to find category or type with ui lifecycle using beforeBreadcrumb, can only see navigation

[grgmo]

ended up using

beforeSend(event) {

      const newEvent: typeof event = {
        ...event,
        breadcrumbs: event.breadcrumbs?.filter(
          breadcrumb => breadcrumb.category !== 'ui.lifecycle', // filter out ui lifecycle events
        ),
      };

      return newEvent;
    },

[Nehal-Zeller]

Thank you, I did the same :)
type as navigation didn't help

[antonis]

Thank you both for iterating on this 🙇

I tried to filter some third party Http logs too using beforeSendTransaction but that didn't work. Could you help me if I'm doing it right?

You could use the beforeBreadcrumb hook for this and filter with the breadcrumb.data.url. E.g.

beforeBreadcrumb(breadcrumb: Breadcrumb, _hint?: BreadcrumbHint) {
    const excludedUrl = 'some_url';
    const type = breadcrumb.type || '';
    const url = typeof breadcrumb.data?.url === 'string' ? breadcrumb.data.url : '';
    if (type === 'http' && url.startsWith(excludedUrl)){
      return null;
    }
    return breadcrumb;
}