@greenhat-services/magpie-vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Magpie contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,19 @@
-# Temporary Holding Version
+# @greenhat-services/magpie-vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Magpie error tracking and performance monitoring for Vue 3 and Vue Router.
+
+```sh
+npm install @greenhat-services/magpie-vue
+```
+
+Reports Vue errors with the component they came from (never its props), and names page loads and navigations by route pattern.
+
+```ts
+Magpie.init({ app, router, dsn: import.meta.env.VITE_MAGPIE_DSN, release: import.meta.env.VITE_MAGPIE_RELEASE, tracesSampleRate: 0.2 });
+```
+
+Pair it with `@greenhat-services/magpie-vite-plugin` for readable stack traces.
+
+Full documentation, options and what is (and is not) sent: https://github.com/Greenhat-Services/magpie-js#readme
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+var magpieBrowser = require('@greenhat-services/magpie-browser');
+
+// src/index.ts
+function componentHierarchy(instance) {
+  const names = [];
+  for (let node = instance, depth = 0; node && depth < 20; node = node.$parent, depth++) {
+    names.push(componentName(node));
+  }
+  return names;
+}
+function componentName(instance) {
+  const options = instance?.$options ?? {};
+  const file = options.__file?.split(/[\\/]/).pop()?.replace(/\.vue$/, "");
+  return options.name || options.__name || file || "Anonymous";
+}
+var VUE_ERROR_SITES = {
+  sp: "serverPrefetch hook",
+  bc: "beforeCreate hook",
+  c: "created hook",
+  bm: "beforeMount hook",
+  m: "mounted hook",
+  bu: "beforeUpdate hook",
+  u: "updated hook",
+  bum: "beforeUnmount hook",
+  um: "unmounted hook",
+  a: "activated hook",
+  da: "deactivated hook",
+  ec: "errorCaptured hook",
+  rtc: "renderTracked hook",
+  rtg: "renderTriggered hook",
+  "0": "setup function",
+  "1": "render function",
+  "2": "watcher getter",
+  "3": "watcher callback",
+  "4": "watcher cleanup function",
+  "5": "native event handler",
+  "6": "component event handler",
+  "7": "vnode hook",
+  "8": "directive hook",
+  "9": "transition hook",
+  "10": "app errorHandler",
+  "11": "app warnHandler",
+  "12": "ref function",
+  "13": "async component loader",
+  "14": "scheduler flush",
+  "15": "component update",
+  "16": "app unmount cleanup function"
+};
+function describeErrorSite(info) {
+  const code = /#runtime-([a-z0-9]+)$/i.exec(info)?.[1];
+  return code && VUE_ERROR_SITES[code] || info;
+}
+function captureVueError(error, instance, info) {
+  const client = magpieBrowser.getClient();
+  if (!client) return;
+  client.withScope((scope) => {
+    const file = instance?.$options?.__file;
+    scope.setContext("vue", {
+      componentName: componentName(instance),
+      lifecycleHook: describeErrorSite(info),
+      hierarchy: componentHierarchy(instance).join(" > "),
+      ...file ? { file: file.split(/[\\/]/).slice(-3).join("/") } : {}
+    });
+    scope.setTag("vue.component", componentName(instance));
+    magpieBrowser.captureException(error, { mechanism: { type: "vue", handled: false } });
+  });
+}
+function attachErrorHandler(app) {
+  const previous = app.config.errorHandler;
+  app.config.errorHandler = (error, instance, info) => {
+    try {
+      captureVueError(error, instance, info);
+    } catch {
+    }
+    if (previous) previous.call(app, error, instance, info);
+    else console.error(error);
+  };
+}
+function routeName(route) {
+  const pattern = route.matched[route.matched.length - 1]?.path?.replace(/\(\)/g, "");
+  return pattern || (typeof route.name === "string" ? route.name : "") || route.path;
+}
+function routerTracing(router) {
+  return {
+    name: "VueRouter",
+    setup(client) {
+      let initial = true;
+      const removeBefore = router.beforeEach((to) => {
+        const name = routeName(to);
+        if (initial) magpieBrowser.renameActiveTransaction(client, name);
+        else magpieBrowser.startNavigation(client, name);
+        client.scope.setTransactionName(name);
+        return void 0;
+      });
+      const removeAfter = router.afterEach(() => {
+        initial = false;
+      });
+      const removeError = router.onError((error) => {
+        magpieBrowser.captureException(error, { mechanism: { type: "vue-router", handled: true } });
+      });
+      return () => {
+        removeBefore();
+        removeAfter();
+        removeError();
+      };
+    }
+  };
+}
+var VUE_SDK_NAME = "magpie.javascript.vue";
+function init(options = {}) {
+  const { app, router, integrations = [], ...rest } = options;
+  const client = magpieBrowser.init({
+    ...rest,
+    sdkName: rest.sdkName ?? VUE_SDK_NAME,
+    integrations: [...router ? [routerTracing(router)] : [], ...integrations]
+  });
+  if (client && app) attachErrorHandler(app);
+  return client;
+}
+
+exports.VUE_SDK_NAME = VUE_SDK_NAME;
+exports.attachErrorHandler = attachErrorHandler;
+exports.captureVueError = captureVueError;
+exports.componentHierarchy = componentHierarchy;
+exports.componentName = componentName;
+exports.describeErrorSite = describeErrorSite;
+exports.init = init;
+exports.routeName = routeName;
+exports.routerTracing = routerTracing;
+Object.keys(magpieBrowser).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return magpieBrowser[k]; }
+  });
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/errorHandler.ts","../src/router.ts","../src/index.ts"],"names":["getClient","captureException","renameActiveTransaction","startNavigation","browserInit"],"mappings":";;;;;AAOO,SAAS,mBAAmB,QAAA,EAAgE;AAC/F,EAAA,MAAM,QAAkB,EAAC;AAEzB,EAAA,KAAA,IAAS,IAAA,GAAmD,QAAA,EAAU,KAAA,GAAQ,CAAA,EAAG,IAAA,IAAQ,QAAQ,EAAA,EAAI,IAAA,GAAO,IAAA,CAAK,OAAA,EAAS,KAAA,EAAA,EAAS;AAC/H,IAAA,KAAA,CAAM,IAAA,CAAK,aAAA,CAAc,IAAI,CAAC,CAAA;AAAA,EAClC;AAEA,EAAA,OAAO,KAAA;AACX;AAEO,SAAS,cAAc,QAAA,EAA8D;AACxF,EAAA,MAAM,OAAA,GAAW,QAAA,EAAU,QAAA,IAAY,EAAC;AACxC,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,MAAA,EAAQ,KAAA,CAAM,OAAO,EAAE,GAAA,EAAI,EAAG,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEvE,EAAA,OAAO,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,MAAA,IAAU,IAAA,IAAQ,WAAA;AACrD;AAOA,IAAM,eAAA,GAA0C;AAAA,EAC5C,EAAA,EAAI,qBAAA;AAAA,EAAuB,EAAA,EAAI,mBAAA;AAAA,EAAqB,CAAA,EAAG,cAAA;AAAA,EAAgB,EAAA,EAAI,kBAAA;AAAA,EAAoB,CAAA,EAAG,cAAA;AAAA,EAClG,EAAA,EAAI,mBAAA;AAAA,EAAqB,CAAA,EAAG,cAAA;AAAA,EAAgB,GAAA,EAAK,oBAAA;AAAA,EAAsB,EAAA,EAAI,gBAAA;AAAA,EAAkB,CAAA,EAAG,gBAAA;AAAA,EAChG,EAAA,EAAI,kBAAA;AAAA,EAAoB,EAAA,EAAI,oBAAA;AAAA,EAAsB,GAAA,EAAK,oBAAA;AAAA,EAAsB,GAAA,EAAK,sBAAA;AAAA,EAClF,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,iBAAA;AAAA,EAAmB,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,kBAAA;AAAA,EAAoB,GAAA,EAAK,0BAAA;AAAA,EACpG,GAAA,EAAK,sBAAA;AAAA,EAAwB,GAAA,EAAK,yBAAA;AAAA,EAA2B,GAAA,EAAK,YAAA;AAAA,EAAc,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,iBAAA;AAAA,EAC5G,IAAA,EAAM,kBAAA;AAAA,EAAoB,IAAA,EAAM,iBAAA;AAAA,EAAmB,IAAA,EAAM,cAAA;AAAA,EAAgB,IAAA,EAAM,wBAAA;AAAA,EAA0B,IAAA,EAAM,iBAAA;AAAA,EAC/G,IAAA,EAAM,kBAAA;AAAA,EAAoB,IAAA,EAAM;AACpC,CAAA;AAEO,SAAS,kBAAkB,IAAA,EAAsB;AACpD,EAAA,MAAM,IAAA,GAAO,wBAAA,CAAyB,IAAA,CAAK,IAAI,IAAI,CAAC,CAAA;AAEpD,EAAA,OAAQ,IAAA,IAAQ,eAAA,CAAgB,IAAI,CAAA,IAAM,IAAA;AAC9C;AAGO,SAAS,eAAA,CAAgB,KAAA,EAAgB,QAAA,EAAsD,IAAA,EAAoB;AACtH,EAAA,MAAM,SAASA,uBAAA,EAAU;AACzB,EAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,EAAA,MAAA,CAAO,SAAA,CAAU,CAAC,KAAA,KAAU;AACxB,IAAA,MAAM,IAAA,GAAQ,UAAU,QAAA,EAA8C,MAAA;AACtE,IAAA,KAAA,CAAM,WAAW,KAAA,EAAO;AAAA,MACpB,aAAA,EAAe,cAAc,QAAQ,CAAA;AAAA,MACrC,aAAA,EAAe,kBAAkB,IAAI,CAAA;AAAA,MACrC,SAAA,EAAW,kBAAA,CAAmB,QAAQ,CAAA,CAAE,KAAK,KAAK,CAAA;AAAA,MAClD,GAAI,IAAA,GAAO,EAAE,IAAA,EAAM,KAAK,KAAA,CAAM,OAAO,CAAA,CAAE,KAAA,CAAM,EAAE,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,KAAM;AAAC,KACnE,CAAA;AACD,IAAA,KAAA,CAAM,MAAA,CAAO,eAAA,EAAiB,aAAA,CAAc,QAAQ,CAAC,CAAA;AAErD,IAAAC,8BAAA,CAAiB,KAAA,EAAO,EAAE,SAAA,EAAW,EAAE,MAAM,KAAA,EAAO,OAAA,EAAS,KAAA,EAAM,EAAG,CAAA;AAAA,EAC1E,CAAC,CAAA;AACL;AAOO,SAAS,mBAAmB,GAAA,EAAgB;AAC/C,EAAA,MAAM,QAAA,GAAW,IAAI,MAAA,CAAO,YAAA;AAE5B,EAAA,GAAA,CAAI,MAAA,CAAO,YAAA,GAAe,CAAC,KAAA,EAAO,UAAU,IAAA,KAAS;AACjD,IAAA,IAAI;AACA,MAAA,eAAA,CAAgB,KAAA,EAAO,UAAU,IAAI,CAAA;AAAA,IACzC,CAAA,CAAA,MAAQ;AAAA,IAER;AAEA,IAAA,IAAI,UAAU,QAAA,CAAS,IAAA,CAAK,GAAA,EAAK,KAAA,EAAO,UAAU,IAAI,CAAA;AAAA,SACjD,OAAA,CAAQ,MAAM,KAAK,CAAA;AAAA,EAC5B,CAAA;AACJ;AC/DO,SAAS,UAAU,KAAA,EAA0B;AAEhD,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,OAAA,CAAQ,MAAA,GAAS,CAAC,CAAA,EAAG,IAAA,EAAM,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA;AAElF,EAAA,OAAO,OAAA,KAAY,OAAO,KAAA,CAAM,IAAA,KAAS,WAAW,KAAA,CAAM,IAAA,GAAO,OAAO,KAAA,CAAM,IAAA;AAClF;AAOO,SAAS,cAAc,MAAA,EAAiC;AAC3D,EAAA,OAAO;AAAA,IACH,IAAA,EAAM,WAAA;AAAA,IACN,MAAM,MAAA,EAAgB;AAClB,MAAA,IAAI,OAAA,GAAU,IAAA;AAEd,MAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,CAAW,CAAC,EAAA,KAAO;AAC3C,QAAA,MAAM,IAAA,GAAO,UAAU,EAAE,CAAA;AAEzB,QAAA,IAAI,OAAA,EAASC,qCAAA,CAAwB,MAAA,EAAQ,IAAI,CAAA;AAAA,aAC5CC,6BAAA,CAAgB,QAAQ,IAAI,CAAA;AACjC,QAAA,MAAA,CAAO,KAAA,CAAM,mBAAmB,IAAI,CAAA;AAEpC,QAAA,OAAO,MAAA;AAAA,MACX,CAAC,CAAA;AAID,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,SAAA,CAAU,MAAM;AACvC,QAAA,OAAA,GAAU,KAAA;AAAA,MACd,CAAC,CAAA;AAED,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,OAAA,CAAQ,CAAC,KAAA,KAAU;AAC1C,QAAAF,8BAAAA,CAAiB,KAAA,EAAO,EAAE,SAAA,EAAW,EAAE,MAAM,YAAA,EAAc,OAAA,EAAS,IAAA,EAAK,EAAG,CAAA;AAAA,MAChF,CAAC,CAAA;AAED,MAAA,OAAO,MAAM;AACT,QAAA,YAAA,EAAa;AACb,QAAA,WAAA,EAAY;AACZ,QAAA,WAAA,EAAY;AAAA,MAChB,CAAA;AAAA,IACJ;AAAA,GACJ;AACJ;ACvDO,IAAM,YAAA,GAAe;AAmBrB,SAAS,IAAA,CAAK,OAAA,GAAsB,EAAC,EAAuB;AAC/D,EAAA,MAAM,EAAE,KAAK,MAAA,EAAQ,YAAA,GAAe,EAAC,EAAG,GAAG,MAAK,GAAI,OAAA;AAEpD,EAAA,MAAM,SAASG,kBAAA,CAAY;AAAA,IACvB,GAAG,IAAA;AAAA,IACH,OAAA,EAAS,KAAK,OAAA,IAAW,YAAA;AAAA,IACzB,YAAA,EAAc,CAAC,GAAI,MAAA,GAAS,CAAC,aAAA,CAAc,MAAM,CAAC,CAAA,GAAI,EAAC,EAAI,GAAG,YAAY;AAAA,GAC7E,CAAA;AAED,EAAA,IAAI,MAAA,IAAU,GAAA,EAAK,kBAAA,CAAmB,GAAG,CAAA;AAEzC,EAAA,OAAO,MAAA;AACX","file":"index.cjs","sourcesContent":["import { captureException, getClient } from '@greenhat-services/magpie-browser';\nimport type { App, ComponentPublicInstance } from 'vue';\n\n/**\n * Where in the component tree a Vue error happened, in words: `UserCard > UserList > App`. Names only, no props or\n * state, which can hold personal data. Capped so a deep tree stays small.\n */\nexport function componentHierarchy(instance: ComponentPublicInstance | null | undefined): string[] {\n    const names: string[] = [];\n\n    for (let node: ComponentPublicInstance | null | undefined = instance, depth = 0; node && depth < 20; node = node.$parent, depth++) {\n        names.push(componentName(node));\n    }\n\n    return names;\n}\n\nexport function componentName(instance: ComponentPublicInstance | null | undefined): string {\n    const options = (instance?.$options ?? {}) as { name?: string; __name?: string; __file?: string };\n    const file = options.__file?.split(/[\\\\/]/).pop()?.replace(/\\.vue$/, '');\n\n    return options.name || options.__name || file || 'Anonymous';\n}\n\n/**\n * Vue's names for where an error happened. Development builds pass these as words; production builds pass a link\n * (`https://vuejs.org/error-reference/#runtime-5`) to save bytes, so the code is turned back into the words here.\n * Numbering is Vue 3.5's `ErrorCodes`; an unknown code is kept as given.\n */\nconst VUE_ERROR_SITES: Record<string, string> = {\n    sp: 'serverPrefetch hook', bc: 'beforeCreate hook', c: 'created hook', bm: 'beforeMount hook', m: 'mounted hook',\n    bu: 'beforeUpdate hook', u: 'updated hook', bum: 'beforeUnmount hook', um: 'unmounted hook', a: 'activated hook',\n    da: 'deactivated hook', ec: 'errorCaptured hook', rtc: 'renderTracked hook', rtg: 'renderTriggered hook',\n    '0': 'setup function', '1': 'render function', '2': 'watcher getter', '3': 'watcher callback', '4': 'watcher cleanup function',\n    '5': 'native event handler', '6': 'component event handler', '7': 'vnode hook', '8': 'directive hook', '9': 'transition hook',\n    '10': 'app errorHandler', '11': 'app warnHandler', '12': 'ref function', '13': 'async component loader', '14': 'scheduler flush',\n    '15': 'component update', '16': 'app unmount cleanup function',\n};\n\nexport function describeErrorSite(info: string): string {\n    const code = /#runtime-([a-z0-9]+)$/i.exec(info)?.[1];\n\n    return (code && VUE_ERROR_SITES[code]) || info;\n}\n\n/** Reports an error Vue caught, with the component it came from and the lifecycle step it was in (\"setup function\", \"event handler\"). */\nexport function captureVueError(error: unknown, instance: ComponentPublicInstance | null | undefined, info: string): void {\n    const client = getClient();\n    if (!client) return;\n\n    client.withScope((scope) => {\n        const file = (instance?.$options as { __file?: string } | undefined)?.__file;\n        scope.setContext('vue', {\n            componentName: componentName(instance),\n            lifecycleHook: describeErrorSite(info),\n            hierarchy: componentHierarchy(instance).join(' > '),\n            ...(file ? { file: file.split(/[\\\\/]/).slice(-3).join('/') } : {}),\n        });\n        scope.setTag('vue.component', componentName(instance));\n\n        captureException(error, { mechanism: { type: 'vue', handled: false } });\n    });\n}\n\n/**\n * Sets `app.config.errorHandler`, keeping whatever handler the app already had. Vue stops logging errors to the\n * console as soon as a handler exists, so when there was none the error is logged here: Magpie never hides an error\n * from the developer who is looking at the console.\n */\nexport function attachErrorHandler(app: App): void {\n    const previous = app.config.errorHandler;\n\n    app.config.errorHandler = (error, instance, info) => {\n        try {\n            captureVueError(error, instance, info);\n        } catch {\n            // Reporting must never be the thing that breaks the app.\n        }\n\n        if (previous) previous.call(app, error, instance, info);\n        else console.error(error);\n    };\n}\n","import { captureException, type Client, type Integration, renameActiveTransaction, startNavigation } from '@greenhat-services/magpie-browser';\n\n/** The parts of a Vue Router route this reads. Structural, so the SDK needs no import from `vue-router`. */\nexport interface RouteLike {\n    path: string;\n    name?: string | symbol | null;\n    matched: Array<{ path: string }>;\n}\n\nexport interface RouterLike {\n    beforeEach(guard: (to: RouteLike, from: RouteLike) => unknown): () => void;\n    afterEach(hook: (to: RouteLike, from: RouteLike, failure?: unknown) => unknown): () => void;\n    onError(handler: (error: unknown) => unknown): () => void;\n}\n\n/**\n * The name a route is traced under: its pattern (`/users/:id`), so every user's page is one transaction rather\n * than one per id. Falls back to the route's name, then to its path.\n */\nexport function routeName(route: RouteLike): string {\n    // Nuxt's file routes come out as `/users/:id()`; the empty group says nothing, so it is dropped.\n    const pattern = route.matched[route.matched.length - 1]?.path?.replace(/\\(\\)/g, '');\n\n    return pattern || (typeof route.name === 'string' ? route.name : '') || route.path;\n}\n\n/**\n * Names and times page loads and route changes with Vue Router. The first route gives the page load its pattern;\n * every later navigation is its own `navigation` transaction, which includes the requests it triggers. Errors the\n * router raises (a lazy route whose chunk failed to download) are reported as handled, since the app carries on.\n */\nexport function routerTracing(router: RouterLike): Integration {\n    return {\n        name: 'VueRouter',\n        setup(client: Client) {\n            let initial = true;\n\n            const removeBefore = router.beforeEach((to) => {\n                const name = routeName(to);\n\n                if (initial) renameActiveTransaction(client, name);\n                else startNavigation(client, name);\n                client.scope.setTransactionName(name);\n\n                return undefined;\n            });\n\n            // A cancelled or duplicated navigation is not a failure (Magpie counts any status but \"ok\" as one), so the\n            // outcome is not recorded: this only notes that the first route has been seen.\n            const removeAfter = router.afterEach(() => {\n                initial = false;\n            });\n\n            const removeError = router.onError((error) => {\n                captureException(error, { mechanism: { type: 'vue-router', handled: true } });\n            });\n\n            return () => {\n                removeBefore();\n                removeAfter();\n                removeError();\n            };\n        },\n    };\n}\n","import { type BrowserOptions, type Client, init as browserInit } from '@greenhat-services/magpie-browser';\nimport type { App } from 'vue';\nimport { attachErrorHandler } from './errorHandler';\nimport { type RouterLike, routerTracing } from './router';\n\nexport * from '@greenhat-services/magpie-browser';\nexport { attachErrorHandler, captureVueError, componentHierarchy, componentName, describeErrorSite } from './errorHandler';\nexport { routeName, routerTracing, type RouteLike, type RouterLike } from './router';\n\nexport const VUE_SDK_NAME = 'magpie.javascript.vue';\n\nexport interface VueOptions extends BrowserOptions {\n    /** The app to report errors from. Its `errorHandler` is wrapped, not replaced. */\n    app?: App;\n    /** The router to name and time page loads and route changes with. */\n    router?: RouterLike;\n}\n\n/**\n * Starts Magpie for a Vue 3 app: everything the browser SDK does, plus Vue's own errors (with the component they came\n * from) and, given a router, page loads and navigations named by route pattern.\n *\n * ```ts\n * const app = createApp(App);\n * Magpie.init({ app, router, dsn: import.meta.env.VITE_MAGPIE_DSN, release: import.meta.env.VITE_MAGPIE_RELEASE, tracesSampleRate: 0.2 });\n * app.use(router).mount('#app');\n * ```\n */\nexport function init(options: VueOptions = {}): Client | undefined {\n    const { app, router, integrations = [], ...rest } = options;\n\n    const client = browserInit({\n        ...rest,\n        sdkName: rest.sdkName ?? VUE_SDK_NAME,\n        integrations: [...(router ? [routerTracing(router)] : []), ...integrations],\n    });\n\n    if (client && app) attachErrorHandler(app);\n\n    return client;\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,65 @@
+import { Integration, BrowserOptions, Client } from '@greenhat-services/magpie-browser';
+export * from '@greenhat-services/magpie-browser';
+import { App, ComponentPublicInstance } from 'vue';
+
+/** The parts of a Vue Router route this reads. Structural, so the SDK needs no import from `vue-router`. */
+interface RouteLike {
+    path: string;
+    name?: string | symbol | null;
+    matched: Array<{
+        path: string;
+    }>;
+}
+interface RouterLike {
+    beforeEach(guard: (to: RouteLike, from: RouteLike) => unknown): () => void;
+    afterEach(hook: (to: RouteLike, from: RouteLike, failure?: unknown) => unknown): () => void;
+    onError(handler: (error: unknown) => unknown): () => void;
+}
+/**
+ * The name a route is traced under: its pattern (`/users/:id`), so every user's page is one transaction rather
+ * than one per id. Falls back to the route's name, then to its path.
+ */
+declare function routeName(route: RouteLike): string;
+/**
+ * Names and times page loads and route changes with Vue Router. The first route gives the page load its pattern;
+ * every later navigation is its own `navigation` transaction, which includes the requests it triggers. Errors the
+ * router raises (a lazy route whose chunk failed to download) are reported as handled, since the app carries on.
+ */
+declare function routerTracing(router: RouterLike): Integration;
+
+/**
+ * Where in the component tree a Vue error happened, in words: `UserCard > UserList > App`. Names only, no props or
+ * state, which can hold personal data. Capped so a deep tree stays small.
+ */
+declare function componentHierarchy(instance: ComponentPublicInstance | null | undefined): string[];
+declare function componentName(instance: ComponentPublicInstance | null | undefined): string;
+declare function describeErrorSite(info: string): string;
+/** Reports an error Vue caught, with the component it came from and the lifecycle step it was in ("setup function", "event handler"). */
+declare function captureVueError(error: unknown, instance: ComponentPublicInstance | null | undefined, info: string): void;
+/**
+ * Sets `app.config.errorHandler`, keeping whatever handler the app already had. Vue stops logging errors to the
+ * console as soon as a handler exists, so when there was none the error is logged here: Magpie never hides an error
+ * from the developer who is looking at the console.
+ */
+declare function attachErrorHandler(app: App): void;
+
+declare const VUE_SDK_NAME = "magpie.javascript.vue";
+interface VueOptions extends BrowserOptions {
+    /** The app to report errors from. Its `errorHandler` is wrapped, not replaced. */
+    app?: App;
+    /** The router to name and time page loads and route changes with. */
+    router?: RouterLike;
+}
+/**
+ * Starts Magpie for a Vue 3 app: everything the browser SDK does, plus Vue's own errors (with the component they came
+ * from) and, given a router, page loads and navigations named by route pattern.
+ *
+ * ```ts
+ * const app = createApp(App);
+ * Magpie.init({ app, router, dsn: import.meta.env.VITE_MAGPIE_DSN, release: import.meta.env.VITE_MAGPIE_RELEASE, tracesSampleRate: 0.2 });
+ * app.use(router).mount('#app');
+ * ```
+ */
+declare function init(options?: VueOptions): Client | undefined;
+
+export { type RouteLike, type RouterLike, VUE_SDK_NAME, type VueOptions, attachErrorHandler, captureVueError, componentHierarchy, componentName, describeErrorSite, init, routeName, routerTracing };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+import { Integration, BrowserOptions, Client } from '@greenhat-services/magpie-browser';
+export * from '@greenhat-services/magpie-browser';
+import { App, ComponentPublicInstance } from 'vue';
+
+/** The parts of a Vue Router route this reads. Structural, so the SDK needs no import from `vue-router`. */
+interface RouteLike {
+    path: string;
+    name?: string | symbol | null;
+    matched: Array<{
+        path: string;
+    }>;
+}
+interface RouterLike {
+    beforeEach(guard: (to: RouteLike, from: RouteLike) => unknown): () => void;
+    afterEach(hook: (to: RouteLike, from: RouteLike, failure?: unknown) => unknown): () => void;
+    onError(handler: (error: unknown) => unknown): () => void;
+}
+/**
+ * The name a route is traced under: its pattern (`/users/:id`), so every user's page is one transaction rather
+ * than one per id. Falls back to the route's name, then to its path.
+ */
+declare function routeName(route: RouteLike): string;
+/**
+ * Names and times page loads and route changes with Vue Router. The first route gives the page load its pattern;
+ * every later navigation is its own `navigation` transaction, which includes the requests it triggers. Errors the
+ * router raises (a lazy route whose chunk failed to download) are reported as handled, since the app carries on.
+ */
+declare function routerTracing(router: RouterLike): Integration;
+
+/**
+ * Where in the component tree a Vue error happened, in words: `UserCard > UserList > App`. Names only, no props or
+ * state, which can hold personal data. Capped so a deep tree stays small.
+ */
+declare function componentHierarchy(instance: ComponentPublicInstance | null | undefined): string[];
+declare function componentName(instance: ComponentPublicInstance | null | undefined): string;
+declare function describeErrorSite(info: string): string;
+/** Reports an error Vue caught, with the component it came from and the lifecycle step it was in ("setup function", "event handler"). */
+declare function captureVueError(error: unknown, instance: ComponentPublicInstance | null | undefined, info: string): void;
+/**
+ * Sets `app.config.errorHandler`, keeping whatever handler the app already had. Vue stops logging errors to the
+ * console as soon as a handler exists, so when there was none the error is logged here: Magpie never hides an error
+ * from the developer who is looking at the console.
+ */
+declare function attachErrorHandler(app: App): void;
+
+declare const VUE_SDK_NAME = "magpie.javascript.vue";
+interface VueOptions extends BrowserOptions {
+    /** The app to report errors from. Its `errorHandler` is wrapped, not replaced. */
+    app?: App;
+    /** The router to name and time page loads and route changes with. */
+    router?: RouterLike;
+}
+/**
+ * Starts Magpie for a Vue 3 app: everything the browser SDK does, plus Vue's own errors (with the component they came
+ * from) and, given a router, page loads and navigations named by route pattern.
+ *
+ * ```ts
+ * const app = createApp(App);
+ * Magpie.init({ app, router, dsn: import.meta.env.VITE_MAGPIE_DSN, release: import.meta.env.VITE_MAGPIE_RELEASE, tracesSampleRate: 0.2 });
+ * app.use(router).mount('#app');
+ * ```
+ */
+declare function init(options?: VueOptions): Client | undefined;
+
+export { type RouteLike, type RouterLike, VUE_SDK_NAME, type VueOptions, attachErrorHandler, captureVueError, componentHierarchy, componentName, describeErrorSite, init, routeName, routerTracing };

package/dist/index.js

@@ -0,0 +1,124 @@
+import { getClient, captureException, renameActiveTransaction, init as init$1, startNavigation } from '@greenhat-services/magpie-browser';
+export * from '@greenhat-services/magpie-browser';
+
+// src/index.ts
+function componentHierarchy(instance) {
+  const names = [];
+  for (let node = instance, depth = 0; node && depth < 20; node = node.$parent, depth++) {
+    names.push(componentName(node));
+  }
+  return names;
+}
+function componentName(instance) {
+  const options = instance?.$options ?? {};
+  const file = options.__file?.split(/[\\/]/).pop()?.replace(/\.vue$/, "");
+  return options.name || options.__name || file || "Anonymous";
+}
+var VUE_ERROR_SITES = {
+  sp: "serverPrefetch hook",
+  bc: "beforeCreate hook",
+  c: "created hook",
+  bm: "beforeMount hook",
+  m: "mounted hook",
+  bu: "beforeUpdate hook",
+  u: "updated hook",
+  bum: "beforeUnmount hook",
+  um: "unmounted hook",
+  a: "activated hook",
+  da: "deactivated hook",
+  ec: "errorCaptured hook",
+  rtc: "renderTracked hook",
+  rtg: "renderTriggered hook",
+  "0": "setup function",
+  "1": "render function",
+  "2": "watcher getter",
+  "3": "watcher callback",
+  "4": "watcher cleanup function",
+  "5": "native event handler",
+  "6": "component event handler",
+  "7": "vnode hook",
+  "8": "directive hook",
+  "9": "transition hook",
+  "10": "app errorHandler",
+  "11": "app warnHandler",
+  "12": "ref function",
+  "13": "async component loader",
+  "14": "scheduler flush",
+  "15": "component update",
+  "16": "app unmount cleanup function"
+};
+function describeErrorSite(info) {
+  const code = /#runtime-([a-z0-9]+)$/i.exec(info)?.[1];
+  return code && VUE_ERROR_SITES[code] || info;
+}
+function captureVueError(error, instance, info) {
+  const client = getClient();
+  if (!client) return;
+  client.withScope((scope) => {
+    const file = instance?.$options?.__file;
+    scope.setContext("vue", {
+      componentName: componentName(instance),
+      lifecycleHook: describeErrorSite(info),
+      hierarchy: componentHierarchy(instance).join(" > "),
+      ...file ? { file: file.split(/[\\/]/).slice(-3).join("/") } : {}
+    });
+    scope.setTag("vue.component", componentName(instance));
+    captureException(error, { mechanism: { type: "vue", handled: false } });
+  });
+}
+function attachErrorHandler(app) {
+  const previous = app.config.errorHandler;
+  app.config.errorHandler = (error, instance, info) => {
+    try {
+      captureVueError(error, instance, info);
+    } catch {
+    }
+    if (previous) previous.call(app, error, instance, info);
+    else console.error(error);
+  };
+}
+function routeName(route) {
+  const pattern = route.matched[route.matched.length - 1]?.path?.replace(/\(\)/g, "");
+  return pattern || (typeof route.name === "string" ? route.name : "") || route.path;
+}
+function routerTracing(router) {
+  return {
+    name: "VueRouter",
+    setup(client) {
+      let initial = true;
+      const removeBefore = router.beforeEach((to) => {
+        const name = routeName(to);
+        if (initial) renameActiveTransaction(client, name);
+        else startNavigation(client, name);
+        client.scope.setTransactionName(name);
+        return void 0;
+      });
+      const removeAfter = router.afterEach(() => {
+        initial = false;
+      });
+      const removeError = router.onError((error) => {
+        captureException(error, { mechanism: { type: "vue-router", handled: true } });
+      });
+      return () => {
+        removeBefore();
+        removeAfter();
+        removeError();
+      };
+    }
+  };
+}
+var VUE_SDK_NAME = "magpie.javascript.vue";
+function init(options = {}) {
+  const { app, router, integrations = [], ...rest } = options;
+  const client = init$1({
+    ...rest,
+    sdkName: rest.sdkName ?? VUE_SDK_NAME,
+    integrations: [...router ? [routerTracing(router)] : [], ...integrations]
+  });
+  if (client && app) attachErrorHandler(app);
+  return client;
+}
+
+export { VUE_SDK_NAME, attachErrorHandler, captureVueError, componentHierarchy, componentName, describeErrorSite, init, routeName, routerTracing };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/errorHandler.ts","../src/router.ts","../src/index.ts"],"names":["captureException","browserInit"],"mappings":";;;;AAOO,SAAS,mBAAmB,QAAA,EAAgE;AAC/F,EAAA,MAAM,QAAkB,EAAC;AAEzB,EAAA,KAAA,IAAS,IAAA,GAAmD,QAAA,EAAU,KAAA,GAAQ,CAAA,EAAG,IAAA,IAAQ,QAAQ,EAAA,EAAI,IAAA,GAAO,IAAA,CAAK,OAAA,EAAS,KAAA,EAAA,EAAS;AAC/H,IAAA,KAAA,CAAM,IAAA,CAAK,aAAA,CAAc,IAAI,CAAC,CAAA;AAAA,EAClC;AAEA,EAAA,OAAO,KAAA;AACX;AAEO,SAAS,cAAc,QAAA,EAA8D;AACxF,EAAA,MAAM,OAAA,GAAW,QAAA,EAAU,QAAA,IAAY,EAAC;AACxC,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,MAAA,EAAQ,KAAA,CAAM,OAAO,EAAE,GAAA,EAAI,EAAG,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AAEvE,EAAA,OAAO,OAAA,CAAQ,IAAA,IAAQ,OAAA,CAAQ,MAAA,IAAU,IAAA,IAAQ,WAAA;AACrD;AAOA,IAAM,eAAA,GAA0C;AAAA,EAC5C,EAAA,EAAI,qBAAA;AAAA,EAAuB,EAAA,EAAI,mBAAA;AAAA,EAAqB,CAAA,EAAG,cAAA;AAAA,EAAgB,EAAA,EAAI,kBAAA;AAAA,EAAoB,CAAA,EAAG,cAAA;AAAA,EAClG,EAAA,EAAI,mBAAA;AAAA,EAAqB,CAAA,EAAG,cAAA;AAAA,EAAgB,GAAA,EAAK,oBAAA;AAAA,EAAsB,EAAA,EAAI,gBAAA;AAAA,EAAkB,CAAA,EAAG,gBAAA;AAAA,EAChG,EAAA,EAAI,kBAAA;AAAA,EAAoB,EAAA,EAAI,oBAAA;AAAA,EAAsB,GAAA,EAAK,oBAAA;AAAA,EAAsB,GAAA,EAAK,sBAAA;AAAA,EAClF,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,iBAAA;AAAA,EAAmB,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,kBAAA;AAAA,EAAoB,GAAA,EAAK,0BAAA;AAAA,EACpG,GAAA,EAAK,sBAAA;AAAA,EAAwB,GAAA,EAAK,yBAAA;AAAA,EAA2B,GAAA,EAAK,YAAA;AAAA,EAAc,GAAA,EAAK,gBAAA;AAAA,EAAkB,GAAA,EAAK,iBAAA;AAAA,EAC5G,IAAA,EAAM,kBAAA;AAAA,EAAoB,IAAA,EAAM,iBAAA;AAAA,EAAmB,IAAA,EAAM,cAAA;AAAA,EAAgB,IAAA,EAAM,wBAAA;AAAA,EAA0B,IAAA,EAAM,iBAAA;AAAA,EAC/G,IAAA,EAAM,kBAAA;AAAA,EAAoB,IAAA,EAAM;AACpC,CAAA;AAEO,SAAS,kBAAkB,IAAA,EAAsB;AACpD,EAAA,MAAM,IAAA,GAAO,wBAAA,CAAyB,IAAA,CAAK,IAAI,IAAI,CAAC,CAAA;AAEpD,EAAA,OAAQ,IAAA,IAAQ,eAAA,CAAgB,IAAI,CAAA,IAAM,IAAA;AAC9C;AAGO,SAAS,eAAA,CAAgB,KAAA,EAAgB,QAAA,EAAsD,IAAA,EAAoB;AACtH,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,IAAI,CAAC,MAAA,EAAQ;AAEb,EAAA,MAAA,CAAO,SAAA,CAAU,CAAC,KAAA,KAAU;AACxB,IAAA,MAAM,IAAA,GAAQ,UAAU,QAAA,EAA8C,MAAA;AACtE,IAAA,KAAA,CAAM,WAAW,KAAA,EAAO;AAAA,MACpB,aAAA,EAAe,cAAc,QAAQ,CAAA;AAAA,MACrC,aAAA,EAAe,kBAAkB,IAAI,CAAA;AAAA,MACrC,SAAA,EAAW,kBAAA,CAAmB,QAAQ,CAAA,CAAE,KAAK,KAAK,CAAA;AAAA,MAClD,GAAI,IAAA,GAAO,EAAE,IAAA,EAAM,KAAK,KAAA,CAAM,OAAO,CAAA,CAAE,KAAA,CAAM,EAAE,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,KAAM;AAAC,KACnE,CAAA;AACD,IAAA,KAAA,CAAM,MAAA,CAAO,eAAA,EAAiB,aAAA,CAAc,QAAQ,CAAC,CAAA;AAErD,IAAA,gBAAA,CAAiB,KAAA,EAAO,EAAE,SAAA,EAAW,EAAE,MAAM,KAAA,EAAO,OAAA,EAAS,KAAA,EAAM,EAAG,CAAA;AAAA,EAC1E,CAAC,CAAA;AACL;AAOO,SAAS,mBAAmB,GAAA,EAAgB;AAC/C,EAAA,MAAM,QAAA,GAAW,IAAI,MAAA,CAAO,YAAA;AAE5B,EAAA,GAAA,CAAI,MAAA,CAAO,YAAA,GAAe,CAAC,KAAA,EAAO,UAAU,IAAA,KAAS;AACjD,IAAA,IAAI;AACA,MAAA,eAAA,CAAgB,KAAA,EAAO,UAAU,IAAI,CAAA;AAAA,IACzC,CAAA,CAAA,MAAQ;AAAA,IAER;AAEA,IAAA,IAAI,UAAU,QAAA,CAAS,IAAA,CAAK,GAAA,EAAK,KAAA,EAAO,UAAU,IAAI,CAAA;AAAA,SACjD,OAAA,CAAQ,MAAM,KAAK,CAAA;AAAA,EAC5B,CAAA;AACJ;AC/DO,SAAS,UAAU,KAAA,EAA0B;AAEhD,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,OAAA,CAAQ,KAAA,CAAM,OAAA,CAAQ,MAAA,GAAS,CAAC,CAAA,EAAG,IAAA,EAAM,OAAA,CAAQ,OAAA,EAAS,EAAE,CAAA;AAElF,EAAA,OAAO,OAAA,KAAY,OAAO,KAAA,CAAM,IAAA,KAAS,WAAW,KAAA,CAAM,IAAA,GAAO,OAAO,KAAA,CAAM,IAAA;AAClF;AAOO,SAAS,cAAc,MAAA,EAAiC;AAC3D,EAAA,OAAO;AAAA,IACH,IAAA,EAAM,WAAA;AAAA,IACN,MAAM,MAAA,EAAgB;AAClB,MAAA,IAAI,OAAA,GAAU,IAAA;AAEd,MAAA,MAAM,YAAA,GAAe,MAAA,CAAO,UAAA,CAAW,CAAC,EAAA,KAAO;AAC3C,QAAA,MAAM,IAAA,GAAO,UAAU,EAAE,CAAA;AAEzB,QAAA,IAAI,OAAA,EAAS,uBAAA,CAAwB,MAAA,EAAQ,IAAI,CAAA;AAAA,aAC5C,eAAA,CAAgB,QAAQ,IAAI,CAAA;AACjC,QAAA,MAAA,CAAO,KAAA,CAAM,mBAAmB,IAAI,CAAA;AAEpC,QAAA,OAAO,MAAA;AAAA,MACX,CAAC,CAAA;AAID,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,SAAA,CAAU,MAAM;AACvC,QAAA,OAAA,GAAU,KAAA;AAAA,MACd,CAAC,CAAA;AAED,MAAA,MAAM,WAAA,GAAc,MAAA,CAAO,OAAA,CAAQ,CAAC,KAAA,KAAU;AAC1C,QAAAA,gBAAAA,CAAiB,KAAA,EAAO,EAAE,SAAA,EAAW,EAAE,MAAM,YAAA,EAAc,OAAA,EAAS,IAAA,EAAK,EAAG,CAAA;AAAA,MAChF,CAAC,CAAA;AAED,MAAA,OAAO,MAAM;AACT,QAAA,YAAA,EAAa;AACb,QAAA,WAAA,EAAY;AACZ,QAAA,WAAA,EAAY;AAAA,MAChB,CAAA;AAAA,IACJ;AAAA,GACJ;AACJ;ACvDO,IAAM,YAAA,GAAe;AAmBrB,SAAS,IAAA,CAAK,OAAA,GAAsB,EAAC,EAAuB;AAC/D,EAAA,MAAM,EAAE,KAAK,MAAA,EAAQ,YAAA,GAAe,EAAC,EAAG,GAAG,MAAK,GAAI,OAAA;AAEpD,EAAA,MAAM,SAASC,MAAA,CAAY;AAAA,IACvB,GAAG,IAAA;AAAA,IACH,OAAA,EAAS,KAAK,OAAA,IAAW,YAAA;AAAA,IACzB,YAAA,EAAc,CAAC,GAAI,MAAA,GAAS,CAAC,aAAA,CAAc,MAAM,CAAC,CAAA,GAAI,EAAC,EAAI,GAAG,YAAY;AAAA,GAC7E,CAAA;AAED,EAAA,IAAI,MAAA,IAAU,GAAA,EAAK,kBAAA,CAAmB,GAAG,CAAA;AAEzC,EAAA,OAAO,MAAA;AACX","file":"index.js","sourcesContent":["import { captureException, getClient } from '@greenhat-services/magpie-browser';\nimport type { App, ComponentPublicInstance } from 'vue';\n\n/**\n * Where in the component tree a Vue error happened, in words: `UserCard > UserList > App`. Names only, no props or\n * state, which can hold personal data. Capped so a deep tree stays small.\n */\nexport function componentHierarchy(instance: ComponentPublicInstance | null | undefined): string[] {\n    const names: string[] = [];\n\n    for (let node: ComponentPublicInstance | null | undefined = instance, depth = 0; node && depth < 20; node = node.$parent, depth++) {\n        names.push(componentName(node));\n    }\n\n    return names;\n}\n\nexport function componentName(instance: ComponentPublicInstance | null | undefined): string {\n    const options = (instance?.$options ?? {}) as { name?: string; __name?: string; __file?: string };\n    const file = options.__file?.split(/[\\\\/]/).pop()?.replace(/\\.vue$/, '');\n\n    return options.name || options.__name || file || 'Anonymous';\n}\n\n/**\n * Vue's names for where an error happened. Development builds pass these as words; production builds pass a link\n * (`https://vuejs.org/error-reference/#runtime-5`) to save bytes, so the code is turned back into the words here.\n * Numbering is Vue 3.5's `ErrorCodes`; an unknown code is kept as given.\n */\nconst VUE_ERROR_SITES: Record<string, string> = {\n    sp: 'serverPrefetch hook', bc: 'beforeCreate hook', c: 'created hook', bm: 'beforeMount hook', m: 'mounted hook',\n    bu: 'beforeUpdate hook', u: 'updated hook', bum: 'beforeUnmount hook', um: 'unmounted hook', a: 'activated hook',\n    da: 'deactivated hook', ec: 'errorCaptured hook', rtc: 'renderTracked hook', rtg: 'renderTriggered hook',\n    '0': 'setup function', '1': 'render function', '2': 'watcher getter', '3': 'watcher callback', '4': 'watcher cleanup function',\n    '5': 'native event handler', '6': 'component event handler', '7': 'vnode hook', '8': 'directive hook', '9': 'transition hook',\n    '10': 'app errorHandler', '11': 'app warnHandler', '12': 'ref function', '13': 'async component loader', '14': 'scheduler flush',\n    '15': 'component update', '16': 'app unmount cleanup function',\n};\n\nexport function describeErrorSite(info: string): string {\n    const code = /#runtime-([a-z0-9]+)$/i.exec(info)?.[1];\n\n    return (code && VUE_ERROR_SITES[code]) || info;\n}\n\n/** Reports an error Vue caught, with the component it came from and the lifecycle step it was in (\"setup function\", \"event handler\"). */\nexport function captureVueError(error: unknown, instance: ComponentPublicInstance | null | undefined, info: string): void {\n    const client = getClient();\n    if (!client) return;\n\n    client.withScope((scope) => {\n        const file = (instance?.$options as { __file?: string } | undefined)?.__file;\n        scope.setContext('vue', {\n            componentName: componentName(instance),\n            lifecycleHook: describeErrorSite(info),\n            hierarchy: componentHierarchy(instance).join(' > '),\n            ...(file ? { file: file.split(/[\\\\/]/).slice(-3).join('/') } : {}),\n        });\n        scope.setTag('vue.component', componentName(instance));\n\n        captureException(error, { mechanism: { type: 'vue', handled: false } });\n    });\n}\n\n/**\n * Sets `app.config.errorHandler`, keeping whatever handler the app already had. Vue stops logging errors to the\n * console as soon as a handler exists, so when there was none the error is logged here: Magpie never hides an error\n * from the developer who is looking at the console.\n */\nexport function attachErrorHandler(app: App): void {\n    const previous = app.config.errorHandler;\n\n    app.config.errorHandler = (error, instance, info) => {\n        try {\n            captureVueError(error, instance, info);\n        } catch {\n            // Reporting must never be the thing that breaks the app.\n        }\n\n        if (previous) previous.call(app, error, instance, info);\n        else console.error(error);\n    };\n}\n","import { captureException, type Client, type Integration, renameActiveTransaction, startNavigation } from '@greenhat-services/magpie-browser';\n\n/** The parts of a Vue Router route this reads. Structural, so the SDK needs no import from `vue-router`. */\nexport interface RouteLike {\n    path: string;\n    name?: string | symbol | null;\n    matched: Array<{ path: string }>;\n}\n\nexport interface RouterLike {\n    beforeEach(guard: (to: RouteLike, from: RouteLike) => unknown): () => void;\n    afterEach(hook: (to: RouteLike, from: RouteLike, failure?: unknown) => unknown): () => void;\n    onError(handler: (error: unknown) => unknown): () => void;\n}\n\n/**\n * The name a route is traced under: its pattern (`/users/:id`), so every user's page is one transaction rather\n * than one per id. Falls back to the route's name, then to its path.\n */\nexport function routeName(route: RouteLike): string {\n    // Nuxt's file routes come out as `/users/:id()`; the empty group says nothing, so it is dropped.\n    const pattern = route.matched[route.matched.length - 1]?.path?.replace(/\\(\\)/g, '');\n\n    return pattern || (typeof route.name === 'string' ? route.name : '') || route.path;\n}\n\n/**\n * Names and times page loads and route changes with Vue Router. The first route gives the page load its pattern;\n * every later navigation is its own `navigation` transaction, which includes the requests it triggers. Errors the\n * router raises (a lazy route whose chunk failed to download) are reported as handled, since the app carries on.\n */\nexport function routerTracing(router: RouterLike): Integration {\n    return {\n        name: 'VueRouter',\n        setup(client: Client) {\n            let initial = true;\n\n            const removeBefore = router.beforeEach((to) => {\n                const name = routeName(to);\n\n                if (initial) renameActiveTransaction(client, name);\n                else startNavigation(client, name);\n                client.scope.setTransactionName(name);\n\n                return undefined;\n            });\n\n            // A cancelled or duplicated navigation is not a failure (Magpie counts any status but \"ok\" as one), so the\n            // outcome is not recorded: this only notes that the first route has been seen.\n            const removeAfter = router.afterEach(() => {\n                initial = false;\n            });\n\n            const removeError = router.onError((error) => {\n                captureException(error, { mechanism: { type: 'vue-router', handled: true } });\n            });\n\n            return () => {\n                removeBefore();\n                removeAfter();\n                removeError();\n            };\n        },\n    };\n}\n","import { type BrowserOptions, type Client, init as browserInit } from '@greenhat-services/magpie-browser';\nimport type { App } from 'vue';\nimport { attachErrorHandler } from './errorHandler';\nimport { type RouterLike, routerTracing } from './router';\n\nexport * from '@greenhat-services/magpie-browser';\nexport { attachErrorHandler, captureVueError, componentHierarchy, componentName, describeErrorSite } from './errorHandler';\nexport { routeName, routerTracing, type RouteLike, type RouterLike } from './router';\n\nexport const VUE_SDK_NAME = 'magpie.javascript.vue';\n\nexport interface VueOptions extends BrowserOptions {\n    /** The app to report errors from. Its `errorHandler` is wrapped, not replaced. */\n    app?: App;\n    /** The router to name and time page loads and route changes with. */\n    router?: RouterLike;\n}\n\n/**\n * Starts Magpie for a Vue 3 app: everything the browser SDK does, plus Vue's own errors (with the component they came\n * from) and, given a router, page loads and navigations named by route pattern.\n *\n * ```ts\n * const app = createApp(App);\n * Magpie.init({ app, router, dsn: import.meta.env.VITE_MAGPIE_DSN, release: import.meta.env.VITE_MAGPIE_RELEASE, tracesSampleRate: 0.2 });\n * app.use(router).mount('#app');\n * ```\n */\nexport function init(options: VueOptions = {}): Client | undefined {\n    const { app, router, integrations = [], ...rest } = options;\n\n    const client = browserInit({\n        ...rest,\n        sdkName: rest.sdkName ?? VUE_SDK_NAME,\n        integrations: [...(router ? [routerTracing(router)] : []), ...integrations],\n    });\n\n    if (client && app) attachErrorHandler(app);\n\n    return client;\n}\n"]}

package/package.json

@@ -1,6 +1,50 @@
 {
-  "name": "@greenhat-services/magpie-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@greenhat-services/magpie-vue",
+    "version": "0.1.1",
+    "description": "Magpie error tracking and performance monitoring for Vue 3 and Vue Router.",
+    "license": "MIT",
+    "type": "module",
+    "sideEffects": false,
+    "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"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "prepack": "npm run build"
+    },
+    "dependencies": {
+        "@greenhat-services/magpie-browser": "^0.1.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.3.0"
+    },
+    "devDependencies": {
+        "vue": "^3.5.0",
+        "vue-router": "^4.5.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Greenhat-Services/magpie-js.git",
+        "directory": "packages/vue"
+    },
+    "keywords": [
+        "magpie",
+        "error-tracking",
+        "monitoring",
+        "vue",
+        "vue-router"
+    ]
+}