Show keyboard events

[gajrajgchouhan]

Problem Statement

Hi,
I want to see keyboard events in sentry breadcrumbs or someplace in session replay so that i can know if user has pressed anything. Lot of time I get complaints about a keyboard shortcut it would be helpful in this case!!

Solution Brainstorm

Add event listener? Could hamper performance?

Additional Context

_{Tip: React with 👍 to help prioritize this improvement. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1138

[andreiborza]

Hi @gajrajgchouhan, thanks for writing in.

The breadcrumbs integration, by default, captures keypress events but it does not log which particular key was pressed. Are you not seeing keypress events in your breadcrumbs?

[gajrajgchouhan]

no i am not, is there a documentation for this? i cant find it as well

[andreiborza]

@gajrajgchouhan it's documented here, but after further discussion internally, we figured out this is only used to capture keypresses on inputs, textareas and contenteditables

sentry-javascript/packages/browser-utils/src/instrument/dom.ts

Lines 178 to 180 in 8b33254

	if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
	return false;
	}

So if your handlers are on other elements, e.g. on body, it wouldn't record a breadcrumb.

I think for your case, the best way forward is to probably manually capture breadcrumbs in your handlers.

Let me know if that helps.