Bird Eats Bug Documentation

Appearance

Return to top
On this page

Options

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
}

publicAppId

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.

user.email

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

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
	previewScreen:
		| {
				title: 'optional' | 'required' | false = 'optional'
				description: 'optional' | 'required' | false = 'optional'
				email: 'optional' | 'required' | false = 'required'
		  }
		| false = {
		title: 'optional',
		description: 'optional',
		email: 'required',
	}
	submitConfirmationScreen:
		| {
				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'
		}
	}
}

hooks

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

interface HooksOptions {
	afterInit({
		isBrowserSupported,
		isScreenshotSupported,
		triggerButtons,
	}: {
		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

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

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

recordedEventTypes

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>.

instantReplay

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