Alpha
Get started

Every Vue fetch, tied to its server.

One plugin in main.ts. Every fetch and XHR links to the server trace it started. Page views come from vue-router, and errors Vue catches arrive with the component that threw them.

Set it up Quick start
1 plugin
in main.ts
Vue 3
with vue-router 4
No Vue import
in the package, so nothing extra in your bundle
main.ts · server.ts
// main.ts
createApp(App)
  .use(router)
  .use(WizeLens, { endpoint: "/_wizelens", router })
  .mount("#app");

// server.ts (Node)
app.use(wizelens.middleware);
fetch /api/cart · 96 ms
fetch /api/cart96 ms
POST /api/cart71 ms
SELECT price FROM products WHERE id = $11.2 ms
INSERT INTO cart_items (cart_id, product_id, qty) …3.6 ms
info item 42 added to cart 7
fetch POST pricing/quote40 ms

What gets captured.

Everything below lands in the same trace as the request that caused it.

Requests

  • traceparent on every fetch and XHR
  • Same origin, or what you allow
  • Joins the server trace

Page views

  • TTFB, FCP, LCP, INP, CLS
  • Slow and oversized images
  • One per finished vue-router navigation

Errors

  • Errors Vue catches, with the component
  • Its trail: App > Cart > PriceLine
  • Uncaught errors and rejections

Logs

  • Browser console lines, 500 per page
  • Server logs in the same trace

Source maps

  • Minified stacks mapped to your source
  • Dev servers' maps read on their own

In components

  • inject(WIZELENS_KEY)
  • this.$wizelens in the Options API
  • setUser for the signed-in user

Built on Vue's own hooks.

Errors come with the component.

Each error Vue catches carries the component that threw and its parents, so you know where it came from, not just the line.

"vue.component.trail": "App > Cart > PriceLine"

Your handler keeps working.

WizeLens sets app.config.errorHandler and keeps the one your app already had. It still runs, right after WizeLens sends the error.

Routes, not reloads.

Pass your router and each finished navigation is a page view. Failed or cancelled navigations are left out.

On only where you say.

Pass enabled: import.meta.env.DEV and WizeLens runs in development. Off, it is an instance that does nothing.

enabled: import.meta.env.DEV

Mixing stacks? One trace across all of them.

A Vue front end, a .NET gateway, a Node service, and a Python worker join the same trace, and the same insights run on all of it.

.NET Node React and Next.js Angular Svelte Java Python Go