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.

Terminal

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

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:

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.

Vanilla JavaScript for the plain setup and reporting by hand.
React, Vue 3 or Inertia for the framework bindings.
Filtering sensitive data, which matters more in a browser than on a server.

Previous Applications and keys Next Vanilla JavaScript