Vue

Vue handles errors inside components itself, so they do not reach window. app.config.errorHandler sends them to fsl.

Vue catches errors thrown in components, watchers and lifecycle hooks, and reports them through app.config.errorHandler instead of letting them reach window. So setupGlobalErrorHandler() alone never logs them. This page assumes the client is initialized as in Get started.

Errors Vue catches

This is for Vue 3. Set fsl’s handler on the app:

src/main.ts

import { createApp } from 'vue'
import { handleVueError } from '@dasasian/firebase-structured-logger/client'
import App from './App.vue'

const app = createApp(App)
app.config.errorHandler = handleVueError
app.mount('#app')

Each caught error is logged once as an ERROR with errorType VueError and Vue’s info string, which names where it was caught, such as a lifecycle hook. When navigation is on, the entry also has the page labels.

Caution

Setting app.config.errorHandler replaces any handler you had. If yours does more than log, call handleVueError from inside it.

Before initLogger() has run, the handler logs nothing and says so once on the console. It never throws into Vue.

Vue Router

The adapter records each page change and logs router errors. It works with Vue Router 4.

src/router.ts

import { createRouter, createWebHistory } from 'vue-router'
import { enableVueRouterNavigation } from '@dasasian/firebase-structured-logger/client/navigation/vue-router'
import { routes } from './routes'

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

enableVueRouterNavigation(router)

The adapter asks the router for each page’s pattern and name. It listens to the router’s own events and does not wrap history.

Label	Value
route	the full pattern of the deepest match, such as /orders/:id/items
screen	the name of the deepest matched route that has one, otherwise the route
path	to.path, never the query or hash

Names that are symbols are skipped. One page change is one breadcrumb, and a navigation that was blocked or cancelled records nothing.

Router errors

The adapter logs what router.onError reports as an ERROR:

• a navigation guard that throws
• a lazy route whose chunk fails to load

Each one has errorType RouteError, and the path the navigation tried to reach.

Clean personal data from paths

adjust receives the router’s labels and returns the ones to log:

src/router.ts

enableVueRouterNavigation(router, {
  adjust: (labels) => ({ ...labels, path: labels.path?.replace(/[^/]+@[^/]+/g, ':email') }),
})

The query string never leaves the browser. A fragment is dropped unless it is a route.

Stop an adapter

The adapter returns a function that stops it, router errors included. Calling an adapter a second time stops the first. If you use both an adapter and enableNavigation(), the adapter wins and the console says so once.

Vue Router is not a dependency of this package. The adapter only reads the router you pass in.