@fixwire/nuxt

Fixwire SDK for Nuxt

Welcome to @fixwire/nuxt, the official Nuxt module for Fixwire. One line in nuxt.config sets the SDK up on both sides: in the browser, Vue's errors with their component, page loads and navigations named after your routes (/users/:id); on the server, errors from server rendering, API routes and server middleware, each request named after its route. It builds on @fixwire/vue and @fixwire/node, and is part of the Fixwire SDK for JavaScript, whose README has the full guide.

📦 Getting started

Prerequisites

• A Fixwire account and project: sign up at fixwire.io.
• Nuxt 3.13 or newer (the example runs Nuxt 4), on Node.js.

Installation

npm install @fixwire/nuxt
pnpm add @fixwire/nuxt
yarn add @fixwire/nuxt

Basic configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@fixwire/nuxt"],
  fixwire: {
    release: "shop@1.4.0",
    tracesSampleRate: 0.2, // record 20% of page loads, navigations and requests
  },
  sourcemap: { client: "hidden" }, // for readable browser stack traces
});

Set the DSN when the server starts, as Nuxt reads runtime config from the environment:

NUXT_PUBLIC_FIXWIRE_DSN=https://<publishable key>@ingest.eu.fixwire.io node .output/server/index.mjs

(or put dsn in fixwire above). The key is publishable: the browser gets it too. Without a DSN, the SDK does nothing, and it never throws: a broken DSN or option is said in a warning and the SDK stays off.

Options that are functions go in fixwire.client.config.ts and fixwire.server.config.ts, next to nuxt.config.ts; both are optional:

// fixwire.server.config.ts
import type { ServerConfig } from "@fixwire/nuxt";

export default {
  beforeSend(event) {
    if (event.request?.url?.includes("/health")) return null;
    return event;
  },
} satisfies ServerConfig;

Source maps

With browser source maps on, the module stamps the browser files with debug ids while Nuxt builds. Nitro records each file's size when it builds the server, so stamping them afterwards would break them. Upload the maps after nuxt build with fixwire-cli, which deletes them from the output so they aren't served:

npx @fixwire/cli sourcemaps upload --delete .output/public

Quick usage example

<script setup lang="ts">
import { captureException } from "@fixwire/vue";

async function pay() {
  try {
    await $fetch("/api/pay", { method: "POST" });
  } catch (error) {
    captureException(error); // handled: the page carries on
  }
}
</script>

// server/api/orders/[id].get.ts
import { setTag } from "@fixwire/node";

export default defineEventHandler(async (event) => {
  setTag("order.id", getRouterParam(event, "id")); // stays with this request
  return await loadOrder(event); // if it throws, the error arrives as /api/orders/:id
});

✨ Why Fixwire

• One module, both sides. The browser and the server are set up from the same fixwire options, and the DSN can change without a rebuild.
• Nuxt keeps its behavior. Errors are read from Nuxt's own hooks, so Nuxt's error page shows when it would have, and not otherwise.
• Nothing is sent twice. An error a page throws while rendering on the server is reported once, however many layers Nuxt passes it through; expected HTTP errors (4xx) aren't reported.
• Secrets stay where they are. Request headers come from an allowlist (cookies and authorization never leave), props are sent only with attachProps, and secrets and personal data are masked before sending.
• Your data stays where you want it. Fixwire keeps it in the region you choose for your project: the EU today, more regions soon.

🧩 Integrations

The SDKs' functions are yours too: import them from @fixwire/vue in the app and from @fixwire/node on the server.

⚙️ Configuration

fixwire in nuxt.config takes dsn, release, environment, dist, sampleRate, tracesSampleRate, maxBreadcrumbs, sendDefaultPii, debug and attachProps (send components' props with their errors, default false). As runtime config, they can be set when the server starts: NUXT_PUBLIC_FIXWIRE_DSN, NUXT_PUBLIC_FIXWIRE_RELEASE and NUXT_PUBLIC_FIXWIRE_ENVIRONMENT always, the others (NUXT_PUBLIC_FIXWIRE_TRACES_SAMPLE_RATE…) when nuxt.config sets them. fixwire.client.config.ts and fixwire.server.config.ts export any of the browser's and the Node.js SDK's options (or a function returning them), which win; they're listed in the repository README.

🧪 Examples

• nuxt: an app made with create-nuxt (Nuxt 4), whose page, API route and buttons fail on purpose; its test type-checks it, builds it, runs it on Node.js and checks what Fixwire receives in Chromium.

📚 Documentation

The full guide lives in the repository README and the examples.

• Configuration
• Examples
• Changelog
• Security policy
• Contributing guide

🚧 Coming from another error tracker?

The module, its nuxt.config key and the client and server config files work the way most error-tracking SDKs' Nuxt modules do. npx @fixwire/cli migrate . shows the changes and --write makes them.

🙌 Want to contribute?

We'd love your help, whether it's a bug report, a fix or a new integration. Start with the contributing guide, then pick from the open issues or the good first issues.

🛟 Need help?

• Questions: ask on Discord or Slack.
• Bugs: open a GitHub issue.
• Found a security issue? Please don't open an issue; follow the security policy.

🔗 Resources

• Website
• Pricing
• Discord
• Slack
• (https://fixwire.io/x)
• Changelog
• Examples
• Security policy

📃 License

The SDK is open source under the MIT license; see LICENSE. Parts are derived from other MIT-licensed SDKs; see NOTICE.

😘 Contributors

Thanks to everyone who helps make Fixwire better!