Vue 3

@larabug/vue is the browser client plus a plugin and four composables.

Install the plugin

resources/js/app.js

import { createApp } from 'vue'
import { LaraBugVuePlugin } from '@larabug/vue'
import App from './App.vue'

const app = createApp(App)

app.use(LaraBugVuePlugin, {
  dsn: import.meta.env.VITE_LARABUG_DSN,
  environment: import.meta.env.MODE,
})

app.mount('#app')

The plugin hooks Vue's own error handler, so an error thrown in a component is reported with the component it came from rather than as a bare stack trace.

It takes every option installation lists, plus three of its own:

Option	What it does
`attachProps`	Attach the failing component's props to the report.
`trackLifecycleHooks`	Record lifecycle hooks as breadcrumbs.
`logErrors`	Keep logging errors to the console as well as reporting them.

attachProps is useful and worth a thought: props are your data, and a component holding a signed in user holds their details.

The composables

Vue

<script setup>
import { useLaraBug, useLaraBugUser, useLaraBugContext, useLaraBugTag } from '@larabug/vue'

const larabug = useLaraBug()

useLaraBugUser({ id: props.user.id, plan: props.user.plan })
useLaraBugContext({ project_id: props.project.id })
useLaraBugTag('surface', 'project-detail')

function retry() {
  try {
    resync()
  } catch (error) {
    larabug.captureException(error, { retry: true })
  }
}
</script>

With Inertia

Install @larabug/inertia as well and follow Inertia. The Vue plugin stays where it is; the Inertia one adds what it knows about visits.

Previous React Next Inertia