Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from May 10, 2023

Conversation

mydea
Copy link
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 requested review from billyvg and ryan953 May 5, 2023 11:03
@mydea mydea self-assigned this May 5, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 5, 2023

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% 🔺)

Copy link
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

@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 merged commit 48ef411 into develop May 10, 2023
59 checks passed
@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
Projects
None yet
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