There is no way to disable or to filter the console logs based on level

[stefanpruna]

Problem Statement

Hello. I have set up my breadcrumbs in a way that console.logs that are level info or debug would not create automatic breadcrumbs.
My current sentry integration configuration is the following:

beforeBreadcrumb(breadcrumb) {
    if (
      (breadcrumb.level === "info" || breadcrumb.level === "debug") &&
      breadcrumb.category === "console"
    ) {
      return null;
    }
    return breadcrumb;
  },
integrations: [
    new CaptureConsoleIntegration({
      // array of methods that should be captured
      levels: ["warn", "error", "assert"],
    }),
    new Sentry.Replay({
      // masking all text fields by default.
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],

Session replay records all logs in the console tab of Session Replay. Is there a configuration to either fully disable the console.logs in session replay, or allow only certain levels to be sent to Sentry.

Solution Brainstorm

I think the Sentry.Replay integration could use the CaptureConsoleIntegration object from the integrations array, or another config field could be added inside Sentry.Replay{}.
Console:Disable

[Lms24]

Hi @stefanpruna,

Out of the breadcrumbs originating from the SDK, Replay should only pick up breadcrumbs if they are not filtered out by beforeBreadcrumb. Would you mind sharing your entire Sentry config and which framework you're using (+version), as well as which Sentry SDK (+version)? Thanks!

We'll probably need to reproduce this first to debug further.

[stefanpruna]

Hello. @Lms24 . This are the versions of the SDK Im using:

    "@sentry/integrations": "^7.37.0",
    "@sentry/nextjs": "^7.36.0",

This is my configuration:

Sentry.init({
  dsn: SENTRY_DSN,
  environment: SENTRY_ENVIRONMENT,
  enabled: SENTRY_ENABLED,
  tracesSampleRate: 1.0,
  beforeBreadcrumb(breadcrumb) {
    if (
      (breadcrumb.level === "info" || breadcrumb.level === "debug") &&
      breadcrumb.category === "console"
    ) {
      return null;
    }
    return breadcrumb;
  },
  replaysSessionSampleRate: process.env.NODE_ENV === "production" ? 0 : 1,
  replaysOnErrorSampleRate: process.env.NODE_ENV === "production" ? 0 : 1,
  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

There is no issue with how the logs appear in the breadcrumbs. Only logs that are not info or debug create breadcrumbs. The beforeBreadcrumb callback works as expected.
My issue is with the "Console" section of Session-replay. I would like to be able to omit sending certain level logs to sentry. At the moment all the logs are captured in this panel. At the very least, I would like to be able to choose to have no logs in the Console panel.

[Lms24]

I'm not sure I'm following your problem exactly.

First off, are we only talking about breadcrumbs in the Replay UI? or also about breadcrumbs in e.g. issues or transactions?
My understanding was that you would like to filter out all info and debug console breadcrumbs in the SDK so that they are not sent at all to Sentry and hence don't appear in any of these views, including the Replay UI.

Or is your request purely to be able to filter out specific levels in the UI? (i.e. the dropdown of your last screenshot)

By the way: Please try to always keep all your @sentry/ package versions aligned to exactly the same version. It's best to check your lock file for that, as we download a few additional sentry packages.

[stefanpruna]

Thank you for the response.
My issue is not related to breadcrumbs. They work as expected. My issue is that I do not want any info or debug logs to be sent to sentry.

Before integrating session replay, this logs would only appear in the form of a breadcrumb. This issue is tackled in the beforeBreadcrumb callback, by not returning breadcrumbs auto-created from this type of logs.

After integrating with Sentry.Replay, in the replay page there is a new "Console" section (What I sent a screenshot of). The console section records all the logs, without taking into account their level. I would like to either

1. Have only warning and errors logs in the console section
2. Not have any logs in the console section at all, if (1) is not possible.
   This is currently a requirement of my company

[billyvg]

@stefanpruna Do you have a publicly available URL where we can debug it?

[stefanpruna]

Our app is private unfortunately, so I can not provide any publicly available URL

[billyvg]

@stefanpruna After testing a bit, I noticed that CaptureConsole doesn't work as expected, but beforeBreadcrumb does. Here is a repro of beforeBreadcrumb working: https://codesandbox.io/s/pokeapp-public-cph6hr?file=/src/index.tsx

-- do you have any other customizations other than the above?

[stefanpruna]

Hi @billyvg thank you for taking the time to create the codesandbox.
I don't have any other customisation other than what you posted inside the sandbox. Even with CaptureConsoleIntegration - levels : [],
all of the logs are being sent to replay and I am able to view all of them from the Console section of the Replay feature on the web app.

integrations: [
    new CaptureConsoleIntegration({
      // array of methods that should be captured
      levels: [],
    }),
    new Sentry.Replay({
      // masking all text fields by default.
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],

[mydea]

Hi @stefanpruna.

Maybe it is a misconception about what CaptureConsoleIntegration does. This does not affect the breadcrumbs being captured, but defines which console messages should be captured as issues. So changing the levels there will not affect the breadcrumbs, and thus also not affect replay.

Using beforeBreadcrumb, on the other hand, should affect the breadcrumbs and through this also what is captured in replay.