@bugbybug/vue

The official Vue.js SDK for BugByBug. It wraps @bugbybug/browser to provide framework-specific error handling, capturing component names, lifecycle hooks, and optional props data.

Installation

npm install @bugbybug/vue

Usage

Initialize the SDK in your main application file (e.g., main.js or main.ts).

import { createApp } from 'vue';
import App from './App.vue';
import { BugByBug } from '@bugbybug/vue';

const app = createApp(App);

app.use(BugByBug, {
  apiKey: 'YOUR_PROJECT_API_KEY', // Starts with bbb_
  environment: 'production',
  trackProps: false // Optional: set to true to include component props in error reports
});

app.mount('#app');

Composition API (useBugByBug)

You can access the BugByBug client inside your components using the useBugByBug composable.

<script setup>
import { useBugByBug } from '@bugbybug/vue';

const bbb = useBugByBug();

const handleRisk = () => {
  try {
    throw new Error("Something went wrong!");
  } catch (e) {
    bbb.captureException(e, { customTag: 'checkout-flow' });
  }
};
</script>

Options API ($bugbybug)

For legacy components using the Options API, the client is available globally as $bugbybug.

export default {
  methods: {
    saveData() {
      try {
        // logic
      } catch (error) {
        this.$bugbybug.captureException(error);
      }
    }
  }
}

What gets captured?

When a Vue error occurs (e.g., inside a component lifecycle hook or a template), @bugbybug/vue automatically captures:

The Error: Stack trace and message.

Component Name: The name of the component where the error originated.

Lifecycle Hook: The stage (e.g., mounted, created) where the crash happened.

Source File: The file path of the component (in development mode).

Standard Context: Browser, OS, URL, User Session (inherited from the core SDK).