Docs
Vue.js
Quick Start

Vue Quick Start

Integrate Traceway into your Vue 3 application with the @tracewayapp/vue package.

Installation

npm install @tracewayapp/vue

Setup

Install the Traceway plugin in your Vue application. Session recording is on by default; the last ~30s of DOM events ship with every captured exception:

import { createApp } from "vue";
import { createTracewayPlugin } from "@tracewayapp/vue";
import App from "./App.vue";
 
const app = createApp(App);
 
app.use(createTracewayPlugin({
  connectionString: "your-token@https://traceway.example.com/api/report",
}));
 
app.mount("#app");

The plugin automatically installs a global error handler that captures uncaught errors.

Capture Errors in Components

Use the useTraceway composable:

<script setup>
import { useTraceway } from "@tracewayapp/vue";
 
const { captureException } = useTraceway();
 
async function handleSubmit() {
  try {
    await submitForm();
  } catch (error) {
    captureException(error);
  }
}
</script>
 
<template>
  <button @click="handleSubmit">Submit</button>
</template>

With Options

app.use(createTracewayPlugin({
  connectionString: "your-token@https://traceway.example.com/api/report",
  options: {
    debug: true,
    version: "1.0.0",
  },
}));

Test Your Integration

<script setup>
import { useTraceway } from "@tracewayapp/vue";
 
const { captureException } = useTraceway();
 
function sendTestError() {
  captureException(new Error("Test error from Vue"));
}
</script>
 
<template>
  <button @click="sendTestError">Send Test Error</button>
</template>

Click the button and check your Traceway dashboard to verify the error appears.

Distributed Tracing

The SDK automatically instruments both fetch and XMLHttpRequest to propagate a traceway-trace-id header on same-origin requests. This links frontend errors to the backend requests that caused them.

Axios needs no setup. It uses XMLHttpRequest in the browser, which the SDK already instruments. Do not register createAxiosInterceptor() in a browser app: it adds a second ID under the same header name, and the combined value is rejected by the backend.

Your backend still has to set the incoming header on its server span as the traceway.distributed_trace_id attribute, or the two sides never join. See the Distributed Tracing guide for the middleware.

Next Steps

HooksPlugin Setup