-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(replay): Capture keyboard presses for special characters
- Loading branch information
Showing
4 changed files
with
218 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import type { Breadcrumb } from '@sentry/types'; | ||
import { htmlTreeAsString } from '@sentry/utils'; | ||
|
||
import type { ReplayContainer } from '../types'; | ||
import { createBreadcrumb } from '../util/createBreadcrumb'; | ||
import { getBaseDomBreadcrumb } from './handleDom'; | ||
import { addBreadcrumbEvent } from './util/addBreadcrumbEvent'; | ||
|
||
/** Handle keyboard events & create breadcrumbs. */ | ||
export function handleKeyboardEvent(replay: ReplayContainer, event: KeyboardEvent): void { | ||
if (!replay.isEnabled()) { | ||
return; | ||
} | ||
|
||
replay.triggerUserActivity(); | ||
|
||
const breadcrumb = getKeyboardBreadcrumb(event); | ||
|
||
if (!breadcrumb) { | ||
return; | ||
} | ||
|
||
addBreadcrumbEvent(replay, breadcrumb); | ||
} | ||
|
||
/** exported only for tests */ | ||
export function getKeyboardBreadcrumb(event: KeyboardEvent): Breadcrumb | null { | ||
const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event; | ||
|
||
// never capture for input fields | ||
if (!target || isInputElement(target as HTMLElement)) { | ||
return null; | ||
} | ||
|
||
// Note: We do not consider shift here, as that means "uppercase" | ||
const hasModifierKey = metaKey || ctrlKey || altKey; | ||
const isCharacterKey = key.length === 1; // other keys like Escape, Tab, etc have a longer length | ||
|
||
// Do not capture breadcrumb if only a word key is pressed | ||
// This could leak e.g. user input | ||
if (!hasModifierKey && isCharacterKey) { | ||
return null; | ||
} | ||
|
||
const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>'; | ||
const baseBreadcrumb = getBaseDomBreadcrumb(target as Node, message); | ||
|
||
return createBreadcrumb({ | ||
category: 'ui.keyDown', | ||
message, | ||
data: { | ||
...baseBreadcrumb.data, | ||
metaKey, | ||
shiftKey, | ||
ctrlKey, | ||
altKey, | ||
key, | ||
}, | ||
}); | ||
} | ||
|
||
function isInputElement(target: HTMLElement): boolean { | ||
return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 104 additions & 0 deletions
104
packages/replay/test/unit/coreHandlers/handleKeyboardEvent.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
import { getKeyboardBreadcrumb } from '../../../src/coreHandlers/handleKeyboardEvent'; | ||
|
||
describe('Unit | coreHandlers | handleKeyboardEvent', () => { | ||
describe('getKeyboardBreadcrumb', () => { | ||
it('returns null for event on input', function () { | ||
const event = makeKeyboardEvent({ tagName: 'input', key: 'Escape' }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toBeNull(); | ||
}); | ||
|
||
it('returns null for event on textarea', function () { | ||
const event = makeKeyboardEvent({ tagName: 'textarea', key: 'Escape' }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toBeNull(); | ||
}); | ||
|
||
it('returns null for event on contenteditable div', function () { | ||
// JSOM does not support contentEditable properly :( | ||
const target = document.createElement('div'); | ||
Object.defineProperty(target, 'isContentEditable', { | ||
get: function () { | ||
return true; | ||
}, | ||
}); | ||
|
||
const event = makeKeyboardEvent({ target, key: 'Escape' }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toBeNull(); | ||
}); | ||
|
||
it('returns breadcrumb for Escape event on body', function () { | ||
const event = makeKeyboardEvent({ tagName: 'body', key: 'Escape' }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toEqual({ | ||
category: 'ui.keyDown', | ||
data: { | ||
altKey: false, | ||
ctrlKey: false, | ||
key: 'Escape', | ||
metaKey: false, | ||
shiftKey: false, | ||
}, | ||
message: 'body', | ||
timestamp: expect.any(Number), | ||
type: 'default', | ||
}); | ||
}); | ||
|
||
it.each(['a', '1', '!', '~', ']'])('returns null for %s key on body', key => { | ||
const event = makeKeyboardEvent({ tagName: 'body', key }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toEqual(null); | ||
}); | ||
|
||
it.each(['a', '1', '!', '~', ']'])('returns null for %s key + Shift on body', key => { | ||
const event = makeKeyboardEvent({ tagName: 'body', key, shiftKey: true }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toEqual(null); | ||
}); | ||
|
||
it.each(['a', '1', '!', '~', ']'])('returns breadcrumb for %s key + Ctrl on body', key => { | ||
const event = makeKeyboardEvent({ tagName: 'body', key, ctrlKey: true }); | ||
const actual = getKeyboardBreadcrumb(event); | ||
expect(actual).toEqual({ | ||
category: 'ui.keyDown', | ||
data: { | ||
altKey: false, | ||
ctrlKey: true, | ||
key, | ||
metaKey: false, | ||
shiftKey: false, | ||
}, | ||
message: 'body', | ||
timestamp: expect.any(Number), | ||
type: 'default', | ||
}); | ||
}); | ||
}); | ||
}); | ||
|
||
function makeKeyboardEvent({ | ||
metaKey = false, | ||
shiftKey = false, | ||
ctrlKey = false, | ||
altKey = false, | ||
key, | ||
tagName, | ||
target, | ||
}: { | ||
metaKey?: boolean; | ||
shiftKey?: boolean; | ||
ctrlKey?: boolean; | ||
altKey?: boolean; | ||
key: string; | ||
tagName?: string; | ||
target?: HTMLElement; | ||
}): KeyboardEvent { | ||
const event = new KeyboardEvent('keydown', { metaKey, shiftKey, ctrlKey, altKey, key }); | ||
|
||
const element = target || document.createElement(tagName || 'div'); | ||
element.dispatchEvent(event); | ||
|
||
return event; | ||
} |