> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useflytrap.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use Flytrap with SvelteKit

> Use Flytrap to catch & replay both front-end & back-end bugs in SvelteKit

<Warning>Support for replaying with SvelteKit is still a work-in-progress.</Warning>

## Installing

Install the `useflytrap` package to your SvelteKit project.

<CodeGroup>
  ```bash npm theme={null}
  npm install useflytrap
  ```

  ```bash yarn theme={null}
  yarn add useflytrap
  ```

  ```bash pnpm theme={null}
  pnpm install useflytrap
  ```
</CodeGroup>

## Add Flytrap code transform

Add the Flytrap code transform to your Vite configuration, so that all your code gets properly processed for replaying.

<CodeGroup>
  ```typescript vite.config.ts theme={null}
  import { FlytrapTransformPlugin } from 'useflytrap/transform'
  import { sveltekit } from '@sveltejs/kit/vite';

  /** @type {import('vite').UserConfig} */
  const config = {
  	plugins: [
      // only add in production
      ...(process.env.NODE_ENV === 'production' ? [FlytrapTransformPlugin.vite()] : []),
      sveltekit()
    ],
  	...
  };

  export default config;
  ```
</CodeGroup>

<Snippet file="create-config-sveltekit.mdx" />

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

<img height="200" src="https://mintcdn.com/flytrap-98/_ZYKplWiYxS4sMge/images/dashboard/capture.png?fit=max&auto=format&n=_ZYKplWiYxS4sMge&q=85&s=ce61d7b322d5d0cb849a4c651416a277" className="rounded-lg" data-path="images/dashboard/capture.png" />

## Example

<Card
  title="SvelteKit usage example"
  icon={
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 98.1 118">
  <path class="st0" fill="#FF3E00" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
    c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
    c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"/>
  <path class="st1" fill="#FFFFFF" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
    c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
    c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
    c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
    c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
    c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
    c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
    c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"/>
  </svg>
}
  href="https://github.com/useflytrap/flytrap-js/tree/main/examples/with-sveltekit"
>
  See how you can use Flytrap with SvelteKit
</Card>

<Snippet file="learn-more.mdx" />