@carrot/logging-vue

tsvue

Vue 3 integration for @carrot/logging. Provides the logger via Vue's dependency injection, automatically captures unhandled component errors and Vue warnings, and optionally logs route navigations.

Installation

import { carrotLogging } from '@carrot/logging-vue';

Peer dependencies: @carrot/logging, vue ^3.5.30, and optionally vue-router ^4.6.4.

Architecture

Plugin

The plugin does three things when installed:

1. Provides the logger via app.provide(LogKey, log) so any component can useLog().
2. Captures errors by wrapping app.config.errorHandler - logs the error at error severity with component name and info string, then chains to any existing handler.
3. Captures warnings by wrapping app.config.warnHandler - logs at warn severity with component name and trace.

Both error and warning capture chain to existing handlers, so they compose with other plugins or custom handlers.

Composable

useLog() is a thin wrapper around inject(LogKey) that throws a clear error if the plugin hasn't been installed. The LogKey symbol is exported for advanced consumers who want to provide/inject manually.

Router Binding

bindLogToRouter attaches an afterEach guard that logs every navigation at info level. It captures:

• to / from full paths
• Route name (string, symbol, or fallback to path)
• Route params, query, and meta (each individually toggleable)

Query params are excluded by default to avoid leaking sensitive data (e.g. tokens in query strings).

The binding returns a teardown function that removes the guard.

File Structure

src/
├── index.ts                  # Public API barrel
├── plugin.ts                 # Vue plugin - provide, error/warn capture, router
├── router.ts                 # Standalone router binding
├── composables/
│   └── useLog.ts             # useLog() composable + LogKey
└── typestubs/
    └── peers.d.ts            # Minimal type stubs for peer deps

Dependencies

Dependency	Kind
@carrot/logging	peer
vue	peer
vue-router	peer (optional)

Build

npm run build

Compiles TypeScript to ESM via tsc. Output lands in dist/.

---

Usage Guide

Vue 3 plugin and composable for @carrot/logging - provide a logger to your app, capture errors, and log navigations.

Import

import { carrotLogging, useLog } from '@carrot/logging-vue';

Common Patterns

1. Install the plugin

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { Log, consoleSink } from '@carrot/logging';
import { appInsightsSink } from '@carrot/logging-applicationinsights';
import { carrotLogging } from '@carrot/logging-vue';

const log = Log.configure()
    .addSink(consoleSink(), 'debug')
    .addSink(appInsightsSink({ connectionString: AI_CONN }), 'warn')
    .build();

const router = createRouter({ history: createWebHistory(), routes });

const app = createApp(App);
app.use(carrotLogging, { log, router });
app.use(router);
app.mount('#app');

This gives you logging injection, error/warning capture, and route navigation logging in one call.

2. Use the logger in components

<script setup>
import { useLog } from '@carrot/logging-vue';

const log = useLog();

log.info('Component mounted');
log.debug('Fetching data', { endpoint: '/api/users' });
</script>

3. Use context scopes in components

<script setup>
import { useLog } from '@carrot/logging-vue';

const log = useLog();

async function handleSubmit(formData: FormData) {
    await log.context.runAsync({ action: 'submit', form: 'profile' }, async () => {
        log.info('Submitting form');
        await api.submit(formData);
        log.info('Form submitted');
    });
}
</script>

4. Router binding without the plugin

If you don't want the full plugin, bind the router standalone:

import { bindLogToRouter } from '@carrot/logging-vue';

const teardown = bindLogToRouter(log, router, {
    includeQuery: false,   // default - avoids leaking tokens in query strings
    includeParams: true,
    includeMeta: true,
});

// Later, to stop logging navigations:
teardown();

5. Control what the plugin captures

app.use(carrotLogging, {
    log,
    router,
    captureErrors: true,     // log unhandled component errors (default)
    captureWarnings: false,  // skip Vue warnings
    routerOptions: {
        includeQuery: true,  // include query params in navigation logs
    },
});

6. Manual provide/inject

For advanced setups where the plugin isn't suitable:

import { LogKey } from '@carrot/logging-vue';

// In a parent component or plugin:
app.provide(LogKey, log);

// In any child component:
const log = inject(LogKey);

Tips

• Install the plugin early - before mounting - so error/warning handlers are in place from the start.
• Query params are excluded by default in router logging to avoid accidentally sending tokens or sensitive data to your sinks.
• Error capture chains to existing handlers, so it's safe to combine with other error-handling plugins.