Skip to content
On this page


How to set options

Options are set by calling window.birdeatsbug.setOptions(options: Partial<SDKOptions>), which takes an object containing a partial of all options as parameter. The Quick Start snippet already contains a call to the function. setOptions needs to be called at least once at page load within the snippet to pass publicAppId, but can be called at any time after with a new subset of options. One call of setOptions can set one or many options. All properties not explicitly set use the previous value, or fall back to the default value.

The options object

interface SDKOptions extends SDKDefaultOptions {
	publicAppId: string
	user?: {
		email?: string
	ui?: UIOptions
	hooks?: HooksOptions
	integrations?: IntegrationOptions
	recordedEventTypes?: {
		[key in RecordedEventTypesOptions]: boolean
	instantReplay?: boolean = false


Is the only mandatory option property without default value. Can be generated in the workspace settings. Without a valid publicAppId, uploading sessions is not possible.

Attaches the email address to the session. If the email input field is not hidden on the preview screen, the user can change this prefilled value before uploading a session.


UI options allow to customize the look, displayed copy, and screen flow. The default flow is described here.

interface UIOptions {
	theme: 'light' | 'dark' = 'dark'
	position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'bottom-right'
	defaultButton: boolean = true
	introductionScreen: {
		screenshotButton: boolean = true
		recordingButton: boolean = true
		skipButton: boolean = true
	recordingControls: boolean = true
		| {
				title: 'optional' | 'required' | false = 'optional'
				description: 'optional' | 'required' | false = 'optional'
				email: 'optional' | 'required' | false = 'required'
		| false = {
		title: 'optional',
		description: 'optional',
		email: 'required',
		| {
				sessionLink: boolean
		| false = {
		sessionLink: true,
	text: {
		defaultButton: string = 'Report a bug'
		dismissButton: string = 'Dismiss'
		introductionScreen: {
			title: string = 'Report a bug'
			message: string = 'Please show us what went wrong.'
			takeScreenshotButton: string = 'Take a screenshot'
			startRecordingButton: string = 'Start screen recording'
			skipButton: string = 'Skip'
		recordingControls: {
			starting: string = 'Starting...'
			recording: string = 'Recording...'
			recordingProgress: string = 'Recording for'
			stopRecordingButton: string = 'Stop recording'
		previewScreen: {
			title: string = 'Report a bug'
			titleInputPlaceholder: string = 'Add a title'
			descriptionInputPlaceholder: string = 'Add a description'
			emailInputPlaceholder: string = 'Add an email'
			inputOptional: string = 'optional'
			discardButton: string = 'Discard'
			submitButton: string = 'Submit'
			uploadError: string = 'Error. Try again'
			uploadFinished: string = 'uploaded'
		submitConfirmationScreen: {
			title: string = 'Bug report submitted'
			message: string = 'Thanks for reporting this issue to us. A member of the team will investigate this and get back to you soon.'
			copyLink: string = 'Copy link to your bug report'
			copiedLink: string = '&check; Link copied!'
			confirmationButton: string = 'Done'


Hook functions allow to define custom behavior within specific parts of the SDK lifecycle:

interface HooksOptions {
	}: {
		isBrowserSupported: boolean
		isScreenshotSupported: boolean
		triggerButtons: HTMLElement[]
	}): void
	onTrigger(): Promise<void>
	afterTrigger(): void
	beforeScreenshot(): void
	beforeRecording(): void
	afterScreenshot(sessionDataPromise: Promise<SessionData>): void
	afterRecording(sessionDataPromise: Promise<SessionData>): void
	beforeUpload(sessionData: SessionData): Promise<SessionData>
	afterUpload(sessionData: SessionData): void
	afterClose(): void

interface SessionData {
	session: Session
	events: (ClickEvent | ConsoleEvent | NavigationEvent)[]
	domEvents: DomEvent[]
	networkRequests: NetworkEvent[]
	screenshot: undefined | {dataUrl: string; createdAt: ReturnType<Date['getTime']>}

interface Session {
	id: string
	title?: string
	description?: string
	hostname: string
	userAgent: string
	browserName: string
	browserVersion: string
	browserEngineName: string
	browserEngineVersion: string
	deviceType: string
	deviceVendor: string
	osName: string
	osVersion: string
	screenWidth: number
	screenHeight: number
	windowWidth: number
	windowHeight: number
	locale: string
	startedAt?: ReturnType<Date['toISOString']>
	uploaderEmail?: string
	uploadMethod: 'sdk'


Integrations allow SDK to integrate with other popular client-side widgets / tools:

interface IntegrationOptions {
	intercom?: boolean = false
	zendesk?: boolean = false


The recordedEventTypes object allows to define, which technical data is recorded by the SDK:

interface RecordedEventTypesOptions {
	click: boolean = true
	keystrokes: boolean = true
	debug: boolean = true
	log: boolean = true
	info: boolean = true
	warn: boolean = true
	error: boolean = true
	assert: boolean = true
	'error-uncaught': boolean = true
	'error-promise': boolean = true
	network: boolean = true
	dom: boolean | object = true

The dom key is a special case: When set to false, DOM mutation recording is disabled. When an object is passed, it allows to override the rrweb options which SDK passes by default. The passed object must be a Partial<recordOptions>.


Boolean which toggles the instant replay feature on or off. It is false (turned off) by default.