Add the Flytrap code transform to your Vite configuration, so that all your code gets properly processed for replaying. This is an example configuration of using Vite with a SvelteKit application.
Copy
import { FlytrapTransformPlugin } from 'useflytrap/transform'import { sveltekit } from '@sveltejs/kit/vite'import { defineConfig } from 'vite'export default defineConfig({ plugins: [ // only add in production ...(process.env.NODE_ENV === 'production' ? [FlytrapTransformPlugin.vite()] : []), sveltekit() ]})
Keep in mind that the Flytrap Transform should come before plugins such as sveltekit
Next up, create your Flytrap configuration file. The configuration file defines what project you are capturing & replaying for, and the replay & capture behavior.You can get the values for your Flytrap configuration file by creating a project as seen below.
Copy
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'})
In Next.js, your Flytrap config might get cached, so you need to delete the .next folder after changing the Flytrap config for the changes to be applied.