# Installing the JavaScript client

There is a package per stack. Install the one that matches yours; they all sit on the same core and take the same options.

```bash
# Vanilla JavaScript or TypeScript
npm install @larabug/browser

# React
npm install @larabug/react

# Vue 3
npm install @larabug/vue

# Inertia, alongside @larabug/vue or @larabug/react
npm install @larabug/inertia
```

## Start it once

Call `init` as early as your bundle runs, before the code that might throw:

```js resources/js/app.js
import { init } from '@larabug/browser'

init({
  dsn: import.meta.env.VITE_LARABUG_DSN,
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
})
```

Or with the two keys instead of a DSN:

```js resources/js/app.js
init({
  login_key: import.meta.env.VITE_LARABUG_LOGIN_KEY,
  project_key: import.meta.env.VITE_LARABUG_PROJECT_KEY,
})
```

Both values ship inside the bundle. That is expected: between them they say where a report is filed and that it may be filed, and neither reads anything back. Restrict where they are accepted from with the allowed origins on the application's settings page.

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `dsn` | none | Both keys and the endpoint in one string. Wins over the pair. |
| `login_key`, `project_key` | none | The ingest key and the project key, if you would rather not use a DSN. |
| `environment` | none | Reported with every event. |
| `release` | none | The build the error came from. |
| `enabled` | `true` | Set it to `false` and the client reports nothing. |
| `sampleRate` | `1.0` | Report this share of events. |
| `maxEventsPerMinute` | `100` | A hard ceiling. Anything over it is dropped, not queued. |
| `dedupeWindowMs` | `5000` | Two identical events inside this window count as one. |
| `maxBreadcrumbs` | see the package | How much of what happened before the error is kept. |
| `blacklist` | see below | Extra object keys to scrub. |
| `urlBlacklist` | see below | Extra query parameters to strip from URLs. |
| `beforeSend` | none | Your last word on every event. |
| `user`, `context` | none | Attached to everything the client sends. |

`maxEventsPerMinute` is the one to know about. A render loop that throws can produce thousands of identical errors a second, and a browser client with no ceiling turns that into your whole monthly allowance.

## Next

* [Vanilla JavaScript](/docs/javascript/vanilla-javascript) for the plain setup and reporting by hand.
* [React](/docs/javascript/react), [Vue 3](/docs/javascript/vue-3) or [Inertia](/docs/javascript/inertia) for the framework bindings.
* [Filtering sensitive data](/docs/guides/filtering-sensitive-data), which matters more in a browser than on a server.