Configure
Configuring Flytrap
Configure the behavior of Flytrap by using the Flytrap configuration file
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.
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 keyssecretApiKey
,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 yoursecretApiKey
, 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 disablingfunction-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.
Get started with Next.js
Catch & replay using Next.js
Get started with SvelteKit
Catch & replay using SvelteKit
Get started with Nuxt
Catch & replay using Nuxt
Get started with Rollup
Catch & replay using Rollup
Get started with Esbuild
Catch & replay using Esbuild
Get started with Vite
Catch & replay using Vite
Get started with Webpack
Catch & replay using Webpack