# Vanilla JavaScript

`@larabug/browser` is the client every other package is built on. Use it directly for an application with no framework, or with one that has no binding of its own.

## Start it

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

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

From that point uncaught errors and unhandled promise rejections are reported on their own.

## Reporting something yourself

```js
import { captureException, captureMessage } from '@larabug/browser'

try {
  await checkout(cart)
} catch (error) {
  captureException(error, { cart_id: cart.id, step: 'payment' })

  showFailureNotice()
}
```

The second argument is your context. It arrives beside the error, and it is the difference between "TypeError in checkout" and "TypeError in checkout, cart 4471, at the payment step".

For something that is worth knowing but is not an error:

```js
captureMessage('Payment provider took longer than 10s', 'warning')
```

The level is `error`, `warning` or `info`.

## Who it happened to

```js
init({
  dsn: import.meta.env.VITE_LARABUG_DSN,
  user: { id: currentUser.id, plan: currentUser.plan },
})
```

An id and the one or two attributes that change how the application behaves. Not an email address: see [filtering sensitive data](/docs/guides/filtering-sensitive-data).

## Reaching the client later

```js
import { getCurrentClient } from '@larabug/browser'

getCurrentClient()?.captureException(error)
```

`init` returns the same client, so keep the return value if that is easier than asking for it again.