Use Flytrap with Webpack - Flytrap

Installing

Install the useflytrap package to your project.

npm install useflytrap

yarn add useflytrap

pnpm install useflytrap

Add Flytrap code transform

Add the Flytrap code transform to your Webpack configuration, so that all your code gets properly processed for replaying. This is an example configuration of using Webpack.

// @ts-check
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { FlytrapTransformPlugin } = require('useflytrap/transform');

/** @type { import('webpack').Configuration } */
module.exports = {
  target: 'node',
	mode: 'production',
  externals: [nodeExternals()],
  entry: {
    app: './src/index.ts'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].cjs'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader',
        ],
      },
    ],
  },
  plugins: [
    // only add in production
    ...(process.env.NODE_ENV === 'production' ? [FlytrapTransformPlugin.webpack()] : []),
  ]
};

Create your Flytrap configuration

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.

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'
})

Catch your first bug

Now your app will be enabled with Flytrap. You can test out the setup by throwing an error in your development environment.