@tracewayapp/vue 0.2.0

package/README.md

@@ -0,0 +1,72 @@
+# @tracewayapp/vue
+
+Vue.js integration for Traceway. Provides a plugin with automatic error handling and a composable hook.
+
+## Setup
+
+```ts
+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://your-server.com/api/report",
+    options: { debug: true }, // optional
+  })
+);
+
+app.mount("#app");
+```
+
+## Automatic Error Handling
+
+The plugin automatically installs a global error handler (`app.config.errorHandler`) that captures all Vue component errors and reports them to Traceway.
+
+## useTraceway Composable
+
+Access capture methods from any component.
+
+```vue
+<script setup lang="ts">
+import { useTraceway } from "@tracewayapp/vue";
+
+const { captureException, captureMessage } = useTraceway();
+
+function handleClick() {
+  try {
+    doSomething();
+  } catch (err) {
+    captureException(err as Error);
+  }
+}
+</script>
+
+<template>
+  <button @click="handleClick">Do Something</button>
+</template>
+```
+
+## API
+
+### createTracewayPlugin(options)
+
+Creates a Vue plugin that initializes Traceway.
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `connectionString` | `string` | Traceway connection string (`token@url`) |
+| `options` | `TracewayFrontendOptions` | Optional SDK configuration |
+
+### useTraceway()
+
+Returns `{ captureException, captureExceptionWithAttributes, captureMessage }`.
+
+Throws if used outside a Vue app with the Traceway plugin installed.
+
+## Requirements
+
+- Vue >= 3.3
+- `@tracewayapp/frontend` (installed automatically as dependency)

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import { InjectionKey, App } from 'vue';
+import * as traceway from '@tracewayapp/frontend';
+import { TracewayFrontendOptions } from '@tracewayapp/frontend';
+
+interface TracewayPluginOptions {
+    connectionString: string;
+    options?: TracewayFrontendOptions;
+}
+interface TracewayContextValue {
+    captureException: typeof traceway.captureException;
+    captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;
+    captureMessage: typeof traceway.captureMessage;
+}
+
+declare const TracewayKey: InjectionKey<TracewayContextValue>;
+declare function createTracewayPlugin(pluginOptions: TracewayPluginOptions): {
+    install(app: App): void;
+};
+
+declare function useTraceway(): TracewayContextValue;
+
+export { type TracewayContextValue, TracewayKey, type TracewayPluginOptions, createTracewayPlugin, useTraceway };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { InjectionKey, App } from 'vue';
+import * as traceway from '@tracewayapp/frontend';
+import { TracewayFrontendOptions } from '@tracewayapp/frontend';
+
+interface TracewayPluginOptions {
+    connectionString: string;
+    options?: TracewayFrontendOptions;
+}
+interface TracewayContextValue {
+    captureException: typeof traceway.captureException;
+    captureExceptionWithAttributes: typeof traceway.captureExceptionWithAttributes;
+    captureMessage: typeof traceway.captureMessage;
+}
+
+declare const TracewayKey: InjectionKey<TracewayContextValue>;
+declare function createTracewayPlugin(pluginOptions: TracewayPluginOptions): {
+    install(app: App): void;
+};
+
+declare function useTraceway(): TracewayContextValue;
+
+export { type TracewayContextValue, TracewayKey, type TracewayPluginOptions, createTracewayPlugin, useTraceway };

package/dist/index.js

@@ -0,0 +1,81 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TracewayKey: () => TracewayKey,
+  createTracewayPlugin: () => createTracewayPlugin,
+  useTraceway: () => useTraceway
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.ts
+var traceway = __toESM(require("@tracewayapp/frontend"));
+var TracewayKey = /* @__PURE__ */ Symbol("traceway");
+function createTracewayPlugin(pluginOptions) {
+  return {
+    install(app) {
+      traceway.init(pluginOptions.connectionString, pluginOptions.options);
+      const context = {
+        captureException: traceway.captureException,
+        captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,
+        captureMessage: traceway.captureMessage
+      };
+      app.provide(TracewayKey, context);
+      app.config.errorHandler = (err, instance, info) => {
+        if (err instanceof Error) {
+          traceway.captureException(err);
+        } else {
+          traceway.captureMessage(String(err));
+        }
+        console.error("[Traceway] Vue error:", err);
+        console.error("[Traceway] Component:", instance);
+        console.error("[Traceway] Info:", info);
+      };
+    }
+  };
+}
+
+// src/use-traceway.ts
+var import_vue = require("vue");
+function useTraceway() {
+  const context = (0, import_vue.inject)(TracewayKey);
+  if (!context) {
+    throw new Error("useTraceway must be used within a Vue app that has installed the Traceway plugin");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TracewayKey,
+  createTracewayPlugin,
+  useTraceway
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/use-traceway.ts"],"sourcesContent":["export { createTracewayPlugin, TracewayKey } from \"./plugin.js\";\nexport { useTraceway } from \"./use-traceway.js\";\nexport type { TracewayPluginOptions, TracewayContextValue } from \"./types.js\";\n","import type { App, InjectionKey } from \"vue\";\nimport * as traceway from \"@tracewayapp/frontend\";\nimport type { TracewayPluginOptions, TracewayContextValue } from \"./types.js\";\n\nexport const TracewayKey: InjectionKey<TracewayContextValue> = Symbol(\"traceway\");\n\nexport function createTracewayPlugin(pluginOptions: TracewayPluginOptions) {\n  return {\n    install(app: App) {\n      traceway.init(pluginOptions.connectionString, pluginOptions.options);\n\n      const context: TracewayContextValue = {\n        captureException: traceway.captureException,\n        captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,\n        captureMessage: traceway.captureMessage,\n      };\n\n      app.provide(TracewayKey, context);\n\n      app.config.errorHandler = (err, instance, info) => {\n        if (err instanceof Error) {\n          traceway.captureException(err);\n        } else {\n          traceway.captureMessage(String(err));\n        }\n        console.error(\"[Traceway] Vue error:\", err);\n        console.error(\"[Traceway] Component:\", instance);\n        console.error(\"[Traceway] Info:\", info);\n      };\n    },\n  };\n}\n","import { inject } from \"vue\";\nimport { TracewayKey } from \"./plugin.js\";\nimport type { TracewayContextValue } from \"./types.js\";\n\nexport function useTraceway(): TracewayContextValue {\n  const context = inject(TracewayKey);\n  if (!context) {\n    throw new Error(\"useTraceway must be used within a Vue app that has installed the Traceway plugin\");\n  }\n  return context;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,eAA0B;AAGnB,IAAM,cAAkD,uBAAO,UAAU;AAEzE,SAAS,qBAAqB,eAAsC;AACzE,SAAO;AAAA,IACL,QAAQ,KAAU;AAChB,MAAS,cAAK,cAAc,kBAAkB,cAAc,OAAO;AAEnE,YAAM,UAAgC;AAAA,QACpC,kBAA2B;AAAA,QAC3B,gCAAyC;AAAA,QACzC,gBAAyB;AAAA,MAC3B;AAEA,UAAI,QAAQ,aAAa,OAAO;AAEhC,UAAI,OAAO,eAAe,CAAC,KAAK,UAAU,SAAS;AACjD,YAAI,eAAe,OAAO;AACxB,UAAS,0BAAiB,GAAG;AAAA,QAC/B,OAAO;AACL,UAAS,wBAAe,OAAO,GAAG,CAAC;AAAA,QACrC;AACA,gBAAQ,MAAM,yBAAyB,GAAG;AAC1C,gBAAQ,MAAM,yBAAyB,QAAQ;AAC/C,gBAAQ,MAAM,oBAAoB,IAAI;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AACF;;;AC/BA,iBAAuB;AAIhB,SAAS,cAAoC;AAClD,QAAM,cAAU,mBAAO,WAAW;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kFAAkF;AAAA,EACpG;AACA,SAAO;AACT;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,42 @@
+// src/plugin.ts
+import * as traceway from "@tracewayapp/frontend";
+var TracewayKey = /* @__PURE__ */ Symbol("traceway");
+function createTracewayPlugin(pluginOptions) {
+  return {
+    install(app) {
+      traceway.init(pluginOptions.connectionString, pluginOptions.options);
+      const context = {
+        captureException: traceway.captureException,
+        captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,
+        captureMessage: traceway.captureMessage
+      };
+      app.provide(TracewayKey, context);
+      app.config.errorHandler = (err, instance, info) => {
+        if (err instanceof Error) {
+          traceway.captureException(err);
+        } else {
+          traceway.captureMessage(String(err));
+        }
+        console.error("[Traceway] Vue error:", err);
+        console.error("[Traceway] Component:", instance);
+        console.error("[Traceway] Info:", info);
+      };
+    }
+  };
+}
+
+// src/use-traceway.ts
+import { inject } from "vue";
+function useTraceway() {
+  const context = inject(TracewayKey);
+  if (!context) {
+    throw new Error("useTraceway must be used within a Vue app that has installed the Traceway plugin");
+  }
+  return context;
+}
+export {
+  TracewayKey,
+  createTracewayPlugin,
+  useTraceway
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/use-traceway.ts"],"sourcesContent":["import type { App, InjectionKey } from \"vue\";\nimport * as traceway from \"@tracewayapp/frontend\";\nimport type { TracewayPluginOptions, TracewayContextValue } from \"./types.js\";\n\nexport const TracewayKey: InjectionKey<TracewayContextValue> = Symbol(\"traceway\");\n\nexport function createTracewayPlugin(pluginOptions: TracewayPluginOptions) {\n  return {\n    install(app: App) {\n      traceway.init(pluginOptions.connectionString, pluginOptions.options);\n\n      const context: TracewayContextValue = {\n        captureException: traceway.captureException,\n        captureExceptionWithAttributes: traceway.captureExceptionWithAttributes,\n        captureMessage: traceway.captureMessage,\n      };\n\n      app.provide(TracewayKey, context);\n\n      app.config.errorHandler = (err, instance, info) => {\n        if (err instanceof Error) {\n          traceway.captureException(err);\n        } else {\n          traceway.captureMessage(String(err));\n        }\n        console.error(\"[Traceway] Vue error:\", err);\n        console.error(\"[Traceway] Component:\", instance);\n        console.error(\"[Traceway] Info:\", info);\n      };\n    },\n  };\n}\n","import { inject } from \"vue\";\nimport { TracewayKey } from \"./plugin.js\";\nimport type { TracewayContextValue } from \"./types.js\";\n\nexport function useTraceway(): TracewayContextValue {\n  const context = inject(TracewayKey);\n  if (!context) {\n    throw new Error(\"useTraceway must be used within a Vue app that has installed the Traceway plugin\");\n  }\n  return context;\n}\n"],"mappings":";AACA,YAAY,cAAc;AAGnB,IAAM,cAAkD,uBAAO,UAAU;AAEzE,SAAS,qBAAqB,eAAsC;AACzE,SAAO;AAAA,IACL,QAAQ,KAAU;AAChB,MAAS,cAAK,cAAc,kBAAkB,cAAc,OAAO;AAEnE,YAAM,UAAgC;AAAA,QACpC,kBAA2B;AAAA,QAC3B,gCAAyC;AAAA,QACzC,gBAAyB;AAAA,MAC3B;AAEA,UAAI,QAAQ,aAAa,OAAO;AAEhC,UAAI,OAAO,eAAe,CAAC,KAAK,UAAU,SAAS;AACjD,YAAI,eAAe,OAAO;AACxB,UAAS,0BAAiB,GAAG;AAAA,QAC/B,OAAO;AACL,UAAS,wBAAe,OAAO,GAAG,CAAC;AAAA,QACrC;AACA,gBAAQ,MAAM,yBAAyB,GAAG;AAC1C,gBAAQ,MAAM,yBAAyB,QAAQ;AAC/C,gBAAQ,MAAM,oBAAoB,IAAI;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AACF;;;AC/BA,SAAS,cAAc;AAIhB,SAAS,cAAoC;AAClD,QAAM,UAAU,OAAO,WAAW;AAClC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kFAAkF;AAAA,EACpG;AACA,SAAO;AACT;","names":[]}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tracewayapp/vue",
+  "version": "0.2.0",
+  "description": "Traceway Vue.js integration with plugin and composable",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@tracewayapp/frontend": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  }
+}