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

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

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:

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

The level is error, warning or info.

Who it happened to

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.

Reaching the client later

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.