search

getsentry / sentry

Developer-first error tracking and performance monitoring
https://sentry.io
Other
39.1k stars 4.2k forks source link

Custom breadcrumbs do not show in Replay Breadcrumbs #71504

Closed steveh closed 1 month ago

steveh commented 5 months ago

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

Sample app:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.sentryOnLoad = function () {
        Sentry.init({
          release: "main",
          replaysSessionSampleRate: 1.0,
          replaysOnErrorSampleRate: 1.0,
          integrations: [
            Sentry.replayIntegration({
              maskAllText: false,
              blockAllMedia: false,
            }),
          ],
        });
      };
    </script>

    <script
      src="https://js.sentry-cdn.com/[YOURDSN].min.js"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <button type="button">does nothing</button>
    <script>
      setTimeout(() => {
        Sentry.addBreadcrumb({
          category: "auth",
          message: "Authenticated user banana",
          level: "info",
        });

        Sentry.setUser({email: 'john.doe@example.com'});
      }, 1000);
    </script>
  </body>
</html>

Load the page, wait a few seconds, click the button to trigger a session

Expected Result

Breadcrumb shows in Breadcrumb section

Actual Result

Breadcrumb does not show up. A previous issue mentions them showing in Console, but I could not reproduce that.

They do appear in the Issue Breadcrumbs if it throws an error.

CleanShot 2024-05-25 at 08 19 44@2x

CleanShot 2024-05-25 at 08 20 35@2x

Product Area

Replays

Link

No response

DSN

No response

Version

No response

getsantry[bot] commented 5 months ago

Assigning to @getsentry/support for routing ⏲️

getsantry[bot] commented 5 months ago

Routing to @getsentry/product-owners-replays for triage ⏲️

bruno-garcia commented 5 months ago

Could you please share the code snippet you're using to add the breadcrumb? And the SDK version too

steveh commented 5 months ago

The snippet used is at the top of the page. I believe the SDK version is 7.x:

CleanShot 2024-05-28 at 13 52 23

michellewzhang commented 5 months ago

@steveh in the screenshot it looks like the breadcrumb is showing in the console tab, as expected - am i misunderstanding the screenshot/problem?

image

bruno-garcia commented 5 months ago

Could you please share the code snippet you're using to add the breadcrumb?

Oh I see. I didn't realize there was a vertical scroll on that code snippet. Sorry.

The snippet used is at the top of the page. I believe the SDK version is 7.x:

What's under .x is useful to us if it's an SDK bug that has been fixed. You can find the full version on your package.json but also inside the Replay, on the Tags tab. There's sdk.version there.

But as @michellewzhang said, it looks like it's working properly based on your screenshot

steveh commented 5 months ago

I called "Sentry.addBreadcrumb" so I expected it to appear in the list of Breadcrumbs. My hope was to correlate my custom Breadcrumbs with the automatic ones created by user actions in the same timeline. That's much harder if they are on separate tabs with completely different layouts

bruno-garcia commented 5 months ago

Breadcrumbs with the automatic ones created by user actions in the same timeline. That's much harder if they are on separate tabs with completely different layouts

That's fair. We're discussing whether we should put the user-defined crumbs into the Breadcrumbs tab which sounds like it's the right thing to do, but has some side effects.

One example is the Type drop down: image

How should it behave if we have user-defined types? Just show the raw types? Do we cap to a max?

Another point @ryan953 raised was:

stuff like the redux integration might have custom category names and mess with our assumptions

But, we might have that as a left over from an experiment where we got rid of the Breadcrumb panel, as @billyvg said:

i think this was made when we got rid of the separate breadcrumb panel?

All that said, it came up recently too while building Mobile Replay as folks got confused too "where are the breadcrumbs" basically.

cc @jas-kas for thoughts ^

jas-kas commented 4 months ago

@bruno-garcia @ryan953

I called "Sentry.addBreadcrumb" so I expected it to appear in the list of Breadcrumbs. My hope was to correlate my custom Breadcrumbs with the automatic ones created by user actions in the same timeline. That's much harder if they are on separate tabs with completely different layouts

This makes sense, and I think we should aim for this behaviour/experience.

How should it behave if we have user-defined types?

Can we simply have a "Custom" type field and that includes all custom breadcrumbs?

How should it behave if we have user-defined types? Just show the raw types? Do we cap to a max?

I think there should be a reasonable max size/some sort of cap, similar to what we do for Issues Breadcrumbs. + a warning message that a cap has been defined.

thatsanicehat commented 4 months ago

Seconding this as a feature - we have an application that uses a barcode scanner as a user interface, and being able to see user interactions among the other breadcrumbs would be a big benefit for us.

c298lee commented 1 month ago

@steveh @thatsanicehat Custom breadcrumbs in Replays have now moved from the Console tab to the Breadcrumbs tab with https://github.com/getsentry/sentry/pull/77962

nebbles commented 1 month ago

I have a use case where I am trying to submit custom breadcrumbs in order to deliberately add them to the Console tab of Replays. We have a custom logger in the browser that may sometimes be configured to filter and avoid displaying logs in the browser console, but we still want to capture them as if they had been shown.

I put together the following after inspecting the structure on how native console logs are recorded as breadcrumbs, and then trying to imitate it so it would correctly display in the Console tab.

private recordLogAsSentryBreadcrumb(
    level: Sentry.SeverityLevel,
    logArgs: any[],
) {
    // This structure was determined by looking at how the Sentry SDK sends
    // breadcrumb events for native console logs.
    // https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/#breadcrumb-types
    Sentry.addBreadcrumb({
        category: "console",
        data: {
            arguments: logArgs,
            logger: "console",
        },
        message: logArgs.join(" "),
        level,
    });
}

Will https://github.com/getsentry/sentry/pull/77962 or generally the changes being made here prevent me from achieving my intended outcome?

(I'm on "@sentry/react": "8.33.1" currently)

c298lee commented 1 month ago

@nebbles All breadcrumbs with the category console will be in the Console tab instead of the Breadcrumbs tab in Replays, so none of the changes made in https://github.com/getsentry/sentry/pull/77962 will affect what you're trying to achieve!