insightrecorder/docs
SDKs / Vue adapter

Vue adapter

Vue routes component errors to app.config.errorHandler, never to window.onerror. The plugin closes that gap and names the failing component and hook.

Requires Vue 2.6+ / 3Package @insightrecorder/capture-vueSource on GitHub →

Before you start

Where your InsightRecorder runs
The base URL every call goes to — http://localhost:8080 when you are running it locally, your own hostname otherwise.
A capture token
Settings → Integrations. It goes in your page source and is public by design, like an error-tracker DSN: it permits submitting a capture and nothing else. Do not reuse a server API key here.
  1. 01

    Install

    The browser agent must already be on the page.

    npm install @insightrecorder/capture-vue
  2. 02

    Install the plugin

    It chains onto an existing errorHandler rather than replacing it, so an app already reporting elsewhere keeps doing so.

    import { InsightRecorderCapture } from "@insightrecorder/capture-vue";

app.use(InsightRecorderCapture, { router }); // router optional
  3. 03

    Report from a hook

    Where a component should fail on its own instead of taking the page with it.

    onErrorCaptured((error, instance, hook) => {
  reportVueError(error, instance, hook);
  return false;
});
  4. 04

    Verify it is working

    Throw from inside a component's setup. Vue routes it to app.config.errorHandler, which is what this adapter hooks — window.onerror never sees it.

    // In any component, temporarily:
setup() {
  throw new Error("insightrecorder smoke test");
}

    Then look for the line at /app/logs and the report at /app/bugs.

    If nothing shows up

    Nothing reported? Check that the plugin is installed on the app instance before mount, and that the browser agent's script tag is on the page — the adapter reports through it.

Before you ship

  • — Props, state and refs are never captured.
  • — With no previous handler the plugin re-logs to the console, because Vue otherwise swallows the error once a handler exists.
PROMPT Install the Vue adapter SDK with an AI agent
Raw .md

Paste this into a coding agent running inside your project, or point the agent at /docs/prompts/vue directly. It is self-contained: the agent needs no prior knowledge of InsightRecorder.

# Install and wire the InsightRecorder Vue adapter

Paste this into a coding agent (Claude Code, Cursor, …) running inside your Vue
application's repository. It is self-contained — the agent needs no prior
knowledge of InsightRecorder.

---

You are working in a Vue application. Wire it to InsightRecorder so a crash files a
bug report with the console, network and click timeline that led to it.

**Context you need:**

- InsightRecorder's browser agent (`capture.js`) records console output, network
  calls and user steps in memory and transmits nothing until a report is
  triggered. It is loaded with a `<script>` tag and a public capture token.
- The agent alone is not enough for Vue: component errors go to
  **`app.config.errorHandler`** and never reach `window.onerror`. The
  `@insightrecorder/capture-vue` plugin bridges that and attaches the component name
  and the failing lifecycle hook.
- The capture token is public by design, like an error-tracker DSN. It is
  **not** an API key and carries no scopes. Find it in the InsightRecorder UI under
  *Settings → Integrations*.

**Steps:**

1. Add the agent script to the HTML document that boots the app — `index.html`
   for Vite, or Nuxt's `app.head` configuration:

   ```html
   <script src="https://<insightrecorder-host>/static/js/capture.js"
           data-token="<capture token>"></script>
   ```

   Read the host and token from the project's existing environment mechanism
   (`import.meta.env`, `runtimeConfig`) rather than hard-coding them. If either
   is missing, the tag must be omitted and the app must run normally —
   telemetry is never a boot dependency.

2. Install the plugin: `npm install @insightrecorder/capture-vue` (or the
   yarn/pnpm equivalent this project uses).

3. Install it on the app where the other plugins are registered (`main.ts`, or
   a Nuxt plugin file), passing the router if the project has one:

   ```js
   import { InsightRecorderCapture } from "@insightrecorder/capture-vue";

   app.use(InsightRecorderCapture, { router });
   ```

   The plugin chains onto an existing `app.config.errorHandler`, so if this
   project already sets one, leave it in place — do not merge them by hand.

4. Where a component should fail on its own rather than taking the page with it,
   add an `onErrorCaptured` hook that calls `reportVueError(error, instance,
   hook)` and returns `false`. Only do this where the project's layout makes it
   meaningful.

**Rules — do not violate these:**

- Do **not** capture props, state, refs, form values, headers, cookies or
  request bodies in any report you write. They routinely carry credentials and
  personal data, and the SDK deliberately never reads them.
- Do **not** put the capture token in a server-side secret store or an API-key
  variable — it belongs in the page, and treating it as a secret will just make
  the wiring wrong.
- Do **not** make the app's boot depend on the agent loading. Every plugin
  entry point is already a no-op when the agent is absent; keep it that way.
- Do **not** replace the project's existing error reporting (Sentry, etc.)
  unless you were asked to. Both can run.

**Verify before you finish:**

1. The project's build and test commands pass.
2. Run the app, throw a deliberate error inside a component's `setup` or
   render, and confirm a bug appears in InsightRecorder at `/app/bugs` naming that
   component.
3. Open that bug and confirm the console and network timeline are populated.
4. Confirm the app still boots with the script tag removed.
5. Report what you changed and where the plugin was installed.

If anything is ambiguous — which entry file registers plugins, whether an error
handler already exists — inspect the repository and follow what is already
there. Do not restructure the application to fit the SDK.