Configuration file

Flytrap uses c12 for finding and parsing the configuration file. As such, you can name your configuration file in many different ways (.flytraprc, etc.), however, using the flytrap.config.ts file is recommended.

Understanding the configuration file

Below is an example of the structure of a Flytrap configuration file.

import { defineFlytrapConfig } from 'useflytrap'

export default defineFlytrapConfig({
	projectId: 'your-project-id',
	captureId: 'capture id for replaying',
	publicApiKey: 'your public api key',
	secretApiKey: 'your secret api key',
	privateKey: 'your private key',
	mode: 'capture', // 'replay' when replaying,
	logging: [
	babel: {
		parserOptions: {
			plugins: ['throwExpressions'] // πŸ‘ˆ we can configure babel plugins used by Flytrap to parse code
	disableArtifacts: false; // πŸ‘ˆ if we don't want to push Artifacts when building our project
	packageIgnores: [
		'zod', // πŸ‘ˆ disable capturing context for Zod schemas
	excludeDirectories: [
		'src/components/ui', // πŸ‘ˆ to ignore capturing context from stateless UI components
	excludeFunctionNames: [
		'defineProps', // πŸ‘ˆ to ignore transforming function calls with the name `defineProps`
	captureIgnores: [
		'UNAUTHORIZED', // πŸ‘ˆ to ignore captures where the name contains "UNAUTHORIZED"
		(capture: CapturePayload) => true, // we can also use a function for finegrained control
		/Hello World/g, // or Regex
	captureAmountLimit: '5 files', // πŸ‘ˆ if we want to limit the amount of captured data that is sent to the last 5 files that executed. We can also limit by the amount of data with for example the limit '3 mb'.
	transformOptions: {
		disableTransformation: [
			'function-declaration', // πŸ‘ˆ We can disable the transformation of function declarations (eg. function foo()), arrow functions, function expressions & call expressions.
		importFormat: "commonjs", // πŸ‘ˆ If your codebase uses CommonJS, you can set this flag so that the transformed imports also use CommonJS.
	disableFunctionDeclarationHoisting: true, // πŸ‘ˆ If you want to disable function declaration hoisting. Not recommended as it might lead to runtime errors if your functions are invoked before their declarations.

Here’s what the keys correspond to:

  • projectId: Required. The ID of the project, so the API assigns the captures to the correct project.
  • publicApiKey: Required. The API key that you are given when you create the project. This API key only has the right to save captures, but nothing else, so it’s fine to be shared publicly.
  • mode: Required. In production, the value should be 'capture', but it has no meaning. When you want to replay a bug, set it to 'replay', and also make sure that the keys secretApiKey, privateKey & captureId are defined.
  • secretApiKey: Required. Used for authenticating with the Flytrap API. This is a secret API key that has read and write access to the Flytrap API. This API key should NEVER be publicly shared. If it gets exposed, rotate your API keys.
  • logging?: Optional. Enable logging for certain actions, useful for understanding the size of captures, and what’s happening behind the scenes.
  • babel.parserOptions?: Optional. Parser options that will get used when Flytrap parses your code. If you use unsupported syntax in your codebase, you can change the config so your codebase can be parsed. Available options here.
  • privateKey?: Required. Only needs to be set when replaying (eg. mode: 'replay'). This is the private key of a 2048-bit RSA key-pair. This key is used to decrypt the capture data saved to the Flytrap API. This is the most critical key, and should NEVER be shared with anyone except the people in your organization who need to be able to replay captures. If this key gets exposed alongside your secretApiKey, a malicious user can inspect your captured data. In this case, immediately delete all captures using these API keys.
  • captureId?: Optional. Only needs to be set when replaying (eg. mode: 'replay'). This is the ID of the capture from the Flytrap dashboard. Used to fetch the replay data from the API.
  • excludeDirectories?: Optional. This avoids transforming and sending context from the files in the specified directories. Useful for stateless or simple UI components.
  • excludeFunctionNames?: Optional. Disables transforming of function calls that match the function names defined. Useful for instance for disabling the transforming of Vue’s macros (eg. defineProps).
  • captureIgnores?: Optional. Ignore captures by matching against a string, a RegEx or a function which returns a boolean.
  • browser?: Optional. Uses a version of Flytrap that works in environments with access to only Web APIs. Useful with Cloudflare Workers / Cloudflare Pages and Deno. Deprecated, the Flytrap SDK now works on the edge out of the box.
  • captureAmountLimit?: Optional. Allows you to define the amount of data you want to be sent to the Flytrap API. You can limit the context with either an amount of files (eg. β€œ5 files”) or data (eg. β€œ4mb”).
  • transformOptions.disableTransformation?: Optional. Disable the transformation of function declarations, function expressions, arrow functions or call expressions. Data is not captured from functions or call expressions whose transformation has been disabled. Consider disabling function-declaration if you are invoking function declarations before they are defined in their respective lexical scope. Learn more.
  • transformOptions.importFormat?: Optional. Sets the syntax of the generated code. If your codebase uses CommonJS, you can set this flag so that the transformed imports also use CommonJS. Flytrap uses ES Module syntax by default.
  • disableFunctionDeclarationHoisting?: Optional. Allows you to disable the default hoisting behavior of function declarations that Flytrap enforces. If you disable function declaration hoisting, wrapped function declarations will no longer go to the top of their respective scopes, and you might run into runtime errors. Learn more

Learn more

Explore how you can use Flytrap to ship more confidently, solve bugs faster and increase the productivity of your QA & developer teams.