Inertia.js

@larabug/inertia is a thin layer on top of either @larabug/vue or @larabug/react that adds Inertia-specific instrumentation: page visit breadcrumbs, navigation tracking, and automatic capture of Inertia's error and exception events.

Install the framework package and the Inertia package:

npm install @larabug/vue @larabug/inertia
# or
npm install @larabug/react @larabug/inertia

Setup (Vue + Inertia)

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import * as LaraBug from '@larabug/browser';
import { LaraBugVuePlugin } from '@larabug/vue';
import { createInertiaLaraBugPlugin, setUserFromInertia } from '@larabug/inertia';

LaraBug.init({
  dsn: 'https://login_key:project_key@www.larabug.com/api/log',
  environment: import.meta.env.MODE,
});

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
    return pages[`./Pages/${name}.vue`];
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) });

    app.use(plugin);
    app.use(LaraBugVuePlugin, { /* your options */ });
    app.use(createInertiaLaraBugPlugin({
      trackPageVisits: true,
      trackErrors: true,
      trackNavigations: true,
    }));

    // Attach the authenticated user from Inertia's shared props
    if (props.initialPage.props.auth?.user) {
      setUserFromInertia(props.initialPage.props.auth.user);
    }

    app.mount(el);
  },
});

Setup (React + Inertia)

import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import * as LaraBug from '@larabug/browser';
import { ErrorBoundary } from '@larabug/react';
import { createInertiaLaraBugPlugin, setUserFromInertia } from '@larabug/inertia';

LaraBug.init({
  dsn: 'https://login_key:project_key@www.larabug.com/api/log',
  environment: import.meta.env.MODE,
});

createInertiaLaraBugPlugin({ trackPageVisits: true }).install();

createInertiaApp({
  resolve: (name) => { /* ... */ },
  setup({ el, App, props }) {
    if (props.initialPage.props.auth?.user) {
      setUserFromInertia(props.initialPage.props.auth.user);
    }

    createRoot(el).render(
      <ErrorBoundary>
        <App {...props} />
      </ErrorBoundary>
    );
  },
});

What gets captured

• router.on('navigate') — page visit breadcrumbs with the target component and URL
• router.on('start') / router.on('finish') — navigation timing breadcrumbs
• router.on('error') — captured as an exception with the failing URL, method, and error payload
• router.on('exception') — captured as an exception with the exception object Inertia surfaced
• router.on('invalid') — recorded as a warning breadcrumb

All URLs and error payloads run through the DataFilter before being sent.

includeRequestData — off by default

Inertia page.props routinely contain authenticated user data, CSRF tokens, and session flash. For that reason, @larabug/inertia does not include page.props in error context by default. If you explicitly opt in:

createInertiaLaraBugPlugin({
  includeRequestData: true,
});

The props still run through the DataFilter before being attached, but the safest default is to leave this off and only attach the specific fields you care about via setUserFromInertia or manual setContext calls.

attachLaravelContext helper

For Laravel + Inertia apps using the usual shared props pattern, there's a helper that extracts the three most common context fields at once:

import { attachLaravelContext } from '@larabug/inertia';

// Somewhere with access to your Inertia page object:
attachLaravelContext(page.props);

It attaches:

• validation context from props.errors
• flash context from props.flash
• auth context with { authenticated: !!props.auth.user }

No sensitive data — it deliberately doesn't attach the user object, since you should use setUserFromInertia for that.