Skip to content

feat(replay): Capture keyboard presses for special characters#8051

Merged
mydea merged 4 commits intodevelopfrom
fn/keyboard-breadcrumb
May 10, 2023
Merged

feat(replay): Capture keyboard presses for special characters#8051
mydea merged 4 commits intodevelopfrom
fn/keyboard-breadcrumb

Conversation

@mydea
Copy link
Copy Markdown
Member

@mydea mydea commented May 5, 2023

This adds a new breadcrumb for keyboard presses of special characters.

It creates a breadcrumb like this:

{
    category: 'ui.keyDown',
    message: 'body > div', // same as for clicks
    data: {
      // node stuff same as for clicks, plus
      altKey: false,
      ctrlKey: true,
      key: 'Escape',
      metaKey: false,
      shiftKey: false,
    },
    message: 'body',
    timestamp: expect.any(Number),
    type: 'default',
}

We do not capture this when:

  • target is input or textarea
  • typed key is only a single character without ctrl/alt/meta modifier

This way, we should hopefully only capture key combinations & special stuff, not when users are typing.

Closes #6532 (comment)

@mydea mydea added the Package: replay Issues related to the Sentry Replay SDK label May 5, 2023
@mydea mydea requested review from billyvg and ryan953 May 5, 2023 11:03
@mydea mydea self-assigned this May 5, 2023
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented May 5, 2023 •
edited
Loading

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 21.02 KB (+0.05% 🔺)
@sentry/browser - ES5 CDN Bundle (minified) 65.62 KB (+0.01% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 19.57 KB (+0.07% 🔺)
@sentry/browser - ES6 CDN Bundle (minified) 58.09 KB (+0.01% 🔺)
@sentry/browser - Webpack (gzipped + minified) 21.17 KB (+0.05% 🔺)
@sentry/browser - Webpack (minified) 69.04 KB (+0.01% 🔺)
@sentry/react - Webpack (gzipped + minified) 21.19 KB (+0.05% 🔺)
@sentry/nextjs Client - Webpack (gzipped + minified) 49.11 KB (+0.02% 🔺)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 28.64 KB (+0.03% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 26.88 KB (+0.06% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified) 47.62 KB (+0.57% 🔺)
@sentry/replay - Webpack (gzipped + minified) 41.46 KB (+0.81% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 66.51 KB (+0.32% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 59.38 KB (+0.35% 🔺)

ryan953
ryan953 approved these changes May 5, 2023
View reviewed changes
Copy link
Copy Markdown
Member

@ryan953 ryan953 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for initial data collection this seems reasonable. we can look for chords on the backend and see how common that is.

The way things are setup on the UI: These new categories will render in the breadcrumb list under the player. It'll have the title User keyDown

billyvg
billyvg reviewed May 5, 2023
View reviewed changes
@mydea mydea force-pushed the fn/keyboard-breadcrumb branch 2 times, most recently from 31c4dfd to d6e0d09 Compare May 8, 2023 08:44
@mydea mydea force-pushed the fn/keyboard-breadcrumb branch from d6e0d09 to eea5df4 Compare May 10, 2023 08:12
@mydea mydea force-pushed the fn/keyboard-breadcrumb branch from da6b84f to acaf41a Compare May 10, 2023 08:48
@mydea mydea merged commit 48ef411 into develop May 10, 2023
@mydea mydea deleted the fn/keyboard-breadcrumb branch May 10, 2023 12:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@billyvg billyvg billyvg left review comments

@ryan953 ryan953 ryan953 approved these changes

Assignees

@mydea mydea

Labels

Package: replay Issues related to the Sentry Replay SDK

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Replay] Keyboard input should count as user-activity and extend the life of a session

3 participants

@mydea @billyvg @ryan953