@allstak/vue 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -0
- package/LICENSE +21 -0
- package/README.md +130 -0
- package/dist/index.d.mts +228 -0
- package/dist/index.d.ts +228 -0
- package/dist/index.js +317 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +249 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +72 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to `@allstak/vue` are documented here.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.1.0] — 2026-05-29
|
|
9
|
+
|
|
10
|
+
Initial release of the official AllStak SDK for Vue 3.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- `init(config)` — thin bootstrap over `@allstak/js` that stamps the wrapper
|
|
15
|
+
identity (`sdkName: 'allstak-vue'`, `sdkVersion`) so backend ingest can
|
|
16
|
+
distinguish Vue traffic. The SDK version is injected at build time from
|
|
17
|
+
`package.json`, never hand-written.
|
|
18
|
+
- `AllStakPlugin` — `app.use(AllStakPlugin, { apiKey, … })` installer that:
|
|
19
|
+
- hooks `app.config.errorHandler` to capture uncaught render/lifecycle
|
|
20
|
+
errors with component name and lifecycle-hook context, preserving any
|
|
21
|
+
previously registered handler;
|
|
22
|
+
- optionally hooks `app.config.warnHandler` to record Vue warnings as
|
|
23
|
+
breadcrumbs (`attachWarnHandler`, off by default);
|
|
24
|
+
- optionally installs component-render performance tracing
|
|
25
|
+
(`tracingOptions`);
|
|
26
|
+
- provides the client via the `$allstak` injection key and
|
|
27
|
+
`globalProperties.$allstak`.
|
|
28
|
+
- Composition API helpers: `useAllStak`, `useAllStakUser` (sets the user for
|
|
29
|
+
the component lifetime and clears it on unmount), and `useAllStakSpan`
|
|
30
|
+
(opens a span finished automatically on scope dispose).
|
|
31
|
+
- `installRouterInstrumentation` / `useAllStakRouter` — vue-router
|
|
32
|
+
instrumentation that opens a navigation span per route change, records a
|
|
33
|
+
navigation breadcrumb, finishes the span on completion, and captures
|
|
34
|
+
router errors.
|
|
35
|
+
- `AllStakErrorBoundary` — error boundary component that reports subtree
|
|
36
|
+
errors and re-throws by default (configurable via the `rethrow` prop) with
|
|
37
|
+
an optional `fallback` slot.
|
|
38
|
+
- `createTracingMixins` / `installComponentTracing` — component-render
|
|
39
|
+
performance tracing. Opens a `ui.vue.<operation>` span (described as
|
|
40
|
+
`Vue <ComponentName>`) around the configured lifecycle phases of tracked
|
|
41
|
+
components. Tracking is opt-in via `trackComponents` (`true` or a list of
|
|
42
|
+
component names) and configurable lifecycle `hooks` (`mount`, `update`,
|
|
43
|
+
`unmount`).
|
|
44
|
+
- Full re-export of the `@allstak/js` public surface so consumers can pull
|
|
45
|
+
the entire observability API from a single namespaced import.
|
|
46
|
+
- Dual CJS/ESM builds with bundled type declarations.
|
|
47
|
+
|
|
48
|
+
[0.1.0]: https://github.com/AllStak/allstak-vue/releases/tag/v0.1.0
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 AllStak
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# @allstak/vue
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@allstak/vue)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
Official AllStak SDK for **Vue 3**. Captures uncaught exceptions, structured logs, navigation spans, HTTP requests, and web vitals — with first-class composition-API ergonomics.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @allstak/vue
|
|
12
|
+
# or
|
|
13
|
+
pnpm add @allstak/vue
|
|
14
|
+
# or
|
|
15
|
+
yarn add @allstak/vue
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`vue@^3.2` is a peer dependency; `vue-router@^4` is optional.
|
|
19
|
+
|
|
20
|
+
## Setup
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { createApp } from 'vue';
|
|
24
|
+
import { AllStakPlugin } from '@allstak/vue';
|
|
25
|
+
import App from './App.vue';
|
|
26
|
+
|
|
27
|
+
createApp(App)
|
|
28
|
+
.use(AllStakPlugin, {
|
|
29
|
+
apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
|
|
30
|
+
environment: import.meta.env.MODE,
|
|
31
|
+
release: import.meta.env.VITE_APP_VERSION,
|
|
32
|
+
})
|
|
33
|
+
.mount('#app');
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
That single `use(AllStakPlugin, …)` wires:
|
|
37
|
+
|
|
38
|
+
- `app.config.errorHandler` — every uncaught render/lifecycle error becomes an Issue
|
|
39
|
+
- A `$allstak` injection key + `globalProperties.$allstak`
|
|
40
|
+
- Auto release-health sessions
|
|
41
|
+
- The full `@allstak/js` ingest pipeline (HTTP, db, logs, breadcrumbs, web-vitals)
|
|
42
|
+
|
|
43
|
+
## Composition API
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { useAllStak, useAllStakUser, useAllStakSpan } from '@allstak/vue';
|
|
47
|
+
|
|
48
|
+
const allstak = useAllStak();
|
|
49
|
+
allstak.captureException(new Error('payment declined'));
|
|
50
|
+
|
|
51
|
+
// Bind a user for the lifetime of this component (cleared on unmount)
|
|
52
|
+
useAllStakUser({ id: currentUser.id, email: currentUser.email });
|
|
53
|
+
|
|
54
|
+
// Open a span; finished automatically on unmount
|
|
55
|
+
const span = useAllStakSpan({ op: 'checkout.review', description: 'review-cart' });
|
|
56
|
+
span.setTag('cart_size', items.value.length);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## vue-router
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import { createRouter, createWebHistory } from 'vue-router';
|
|
63
|
+
import { installRouterInstrumentation } from '@allstak/vue';
|
|
64
|
+
|
|
65
|
+
const router = createRouter({ history: createWebHistory(), routes });
|
|
66
|
+
installRouterInstrumentation(router);
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Every navigation becomes a `navigation` span + breadcrumb. Router errors become Issues.
|
|
70
|
+
|
|
71
|
+
## Component performance tracing
|
|
72
|
+
|
|
73
|
+
Opt in to per-component render timing. A span (`ui.vue.<operation>`, described
|
|
74
|
+
as `Vue <ComponentName>`) is opened around each tracked component's lifecycle
|
|
75
|
+
phase.
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
import { createApp } from 'vue';
|
|
79
|
+
import { AllStakPlugin } from '@allstak/vue';
|
|
80
|
+
|
|
81
|
+
createApp(App)
|
|
82
|
+
.use(AllStakPlugin, {
|
|
83
|
+
apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
|
|
84
|
+
tracingOptions: {
|
|
85
|
+
trackComponents: true, // or a list: ['Checkout', 'Cart']
|
|
86
|
+
hooks: ['mount', 'update'], // default: ['mount']
|
|
87
|
+
},
|
|
88
|
+
})
|
|
89
|
+
.mount('#app');
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Or install it standalone on an existing app:
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
import { installComponentTracing } from '@allstak/vue';
|
|
96
|
+
|
|
97
|
+
installComponentTracing(app, { trackComponents: ['Dashboard'] });
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Error boundary
|
|
101
|
+
|
|
102
|
+
```vue
|
|
103
|
+
<script setup>
|
|
104
|
+
import { AllStakErrorBoundary } from '@allstak/vue';
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
<template>
|
|
108
|
+
<AllStakErrorBoundary>
|
|
109
|
+
<RiskyWidget />
|
|
110
|
+
<template #fallback="{ error }">
|
|
111
|
+
<p>Sorry — something broke. ({{ error?.message }})</p>
|
|
112
|
+
</template>
|
|
113
|
+
</AllStakErrorBoundary>
|
|
114
|
+
</template>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Configuration
|
|
118
|
+
|
|
119
|
+
`AllStakPlugin` accepts every option that `@allstak/js`'s `AllStak.init` accepts, plus:
|
|
120
|
+
|
|
121
|
+
| Option | Default | Purpose |
|
|
122
|
+
|---|---|---|
|
|
123
|
+
| `attachErrorHandler` | `true` | Install `app.config.errorHandler` |
|
|
124
|
+
| `attachWarnHandler` | `false` | Install `app.config.warnHandler` as breadcrumbs |
|
|
125
|
+
| `skipInit` | `false` | Skip the `AllStak.init` call if you've already done it |
|
|
126
|
+
| `tracingOptions` | — | Enable component-render tracing (`trackComponents`, `hooks`) |
|
|
127
|
+
|
|
128
|
+
## License
|
|
129
|
+
|
|
130
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { AllStakConfig, AllStak, SpanOptions, Span } from '@allstak/js';
|
|
2
|
+
export { AllStak, AllStakConfig, AllStakIntegration, Breadcrumb, DbQueryItem, ErrorEvent, ErrorEventProcessor, HeartbeatOptions, HttpRequestItem, LogEvent, LogLevel, SamplingContext, Scope, Session, SessionStatus, SessionTracker, Span, SpanData, SpanOptions, SpanProcessor, TracesSampler, WebVitalsContext, WebVitalsModule, consoleIntegration, databaseIntegration, dedupeIntegration, defineIntegration, eventFiltersIntegration, httpClientIntegration, inboundFiltersIntegration, isWebVitalsSupported } from '@allstak/js';
|
|
3
|
+
import * as vue from 'vue';
|
|
4
|
+
import { ComponentOptions, App, Plugin } from 'vue';
|
|
5
|
+
import { Router } from 'vue-router';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The core client instance returned by `AllStak.init`. `@allstak/js` does
|
|
9
|
+
* not export the `AllStakClient` class by name, so we derive the type from
|
|
10
|
+
* the value. This keeps the emitted declaration referential (no inlining of
|
|
11
|
+
* the core class's private members, which would trip TS4094).
|
|
12
|
+
*/
|
|
13
|
+
type AllStakClientInstance = ReturnType<typeof AllStak.init>;
|
|
14
|
+
/**
|
|
15
|
+
* Initialize the AllStak SDK for a Vue 3 application.
|
|
16
|
+
*
|
|
17
|
+
* This is a thin shim over `AllStak.init` from `@allstak/js` that stamps
|
|
18
|
+
* the wrapper identity (`sdkName`, `sdkVersion`) so the backend can tell
|
|
19
|
+
* Vue traffic apart from plain JS traffic. Everything else — buffering,
|
|
20
|
+
* sampling, session health, offline queue, PII scrubbing — is delegated
|
|
21
|
+
* to the underlying core client.
|
|
22
|
+
*
|
|
23
|
+
* Call this once at app boot, BEFORE `app.use(AllStakPlugin)` if you want
|
|
24
|
+
* the plugin to surface the same client instance.
|
|
25
|
+
*/
|
|
26
|
+
declare function init(config: AllStakConfig): AllStakClientInstance;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Component-lifecycle operations that can be traced. Each maps to a
|
|
30
|
+
* before/after lifecycle-hook pair on the Vue component instance.
|
|
31
|
+
*/
|
|
32
|
+
type TracingOperation = 'mount' | 'update' | 'unmount';
|
|
33
|
+
interface ComponentTracingOptions {
|
|
34
|
+
/**
|
|
35
|
+
* Which components to trace.
|
|
36
|
+
* - `false` (default): trace nothing.
|
|
37
|
+
* - `true`: trace every component.
|
|
38
|
+
* - `string[]`: trace only components whose name is in the list.
|
|
39
|
+
*/
|
|
40
|
+
trackComponents?: boolean | string[];
|
|
41
|
+
/**
|
|
42
|
+
* Which lifecycle operations to time. Default: `['mount']`.
|
|
43
|
+
* A span is opened on the `before*` hook and finished on the matching
|
|
44
|
+
* `*ed`/`*ted` hook.
|
|
45
|
+
*/
|
|
46
|
+
hooks?: TracingOperation[];
|
|
47
|
+
/**
|
|
48
|
+
* Span operation prefix. Resulting spans use `ui.vue.<operation>`
|
|
49
|
+
* (e.g. `ui.vue.mount`). Default: `'ui.vue'`.
|
|
50
|
+
*/
|
|
51
|
+
opPrefix?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Build a Vue mixin that opens a span around the configured lifecycle
|
|
55
|
+
* phases of each tracked component. The span is named after the
|
|
56
|
+
* component and tagged with the lifecycle operation, giving render-time
|
|
57
|
+
* visibility comparable to a dedicated component profiler.
|
|
58
|
+
*
|
|
59
|
+
* Spans use operation `ui.vue.<operation>` and description
|
|
60
|
+
* `Vue <ComponentName>`.
|
|
61
|
+
*/
|
|
62
|
+
declare function createTracingMixins(options?: ComponentTracingOptions): ComponentOptions;
|
|
63
|
+
/**
|
|
64
|
+
* Install component performance tracing on a Vue app via `app.mixin`.
|
|
65
|
+
*
|
|
66
|
+
* import { createApp } from 'vue';
|
|
67
|
+
* import { installComponentTracing } from '@allstak/vue';
|
|
68
|
+
*
|
|
69
|
+
* const app = createApp(App);
|
|
70
|
+
* installComponentTracing(app, { trackComponents: true });
|
|
71
|
+
*/
|
|
72
|
+
declare function installComponentTracing(app: App, options?: ComponentTracingOptions): void;
|
|
73
|
+
|
|
74
|
+
interface AllStakVueOptions extends AllStakConfig {
|
|
75
|
+
/**
|
|
76
|
+
* Hook into `app.config.errorHandler` to capture every uncaught error
|
|
77
|
+
* thrown from a render function or watcher. Default: `true`.
|
|
78
|
+
*
|
|
79
|
+
* Set to `false` if you have your own error handler and want to call
|
|
80
|
+
* `AllStak.captureException` from it manually.
|
|
81
|
+
*/
|
|
82
|
+
attachErrorHandler?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Hook into `app.config.warnHandler` to capture every Vue warning as a
|
|
85
|
+
* breadcrumb. Useful while you're stabilising — turn it off in prod
|
|
86
|
+
* for noisy apps. Default: `false`.
|
|
87
|
+
*/
|
|
88
|
+
attachWarnHandler?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Skip calling `AllStak.init`. Pass this when you've already called
|
|
91
|
+
* `init(...)` yourself (or imported a module that did) and just want
|
|
92
|
+
* the plugin's Vue-side hooks. Default: `false`.
|
|
93
|
+
*/
|
|
94
|
+
skipInit?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Component-render performance tracing. When `trackComponents` is set
|
|
97
|
+
* (to `true` or a list of component names), a span is opened around
|
|
98
|
+
* each tracked component's lifecycle phase. Disabled by default.
|
|
99
|
+
*/
|
|
100
|
+
tracingOptions?: ComponentTracingOptions;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Vue 3 plugin.
|
|
104
|
+
*
|
|
105
|
+
* import { createApp } from 'vue';
|
|
106
|
+
* import { AllStakPlugin } from '@allstak/vue';
|
|
107
|
+
* import App from './App.vue';
|
|
108
|
+
*
|
|
109
|
+
* createApp(App)
|
|
110
|
+
* .use(AllStakPlugin, {
|
|
111
|
+
* apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
|
|
112
|
+
* environment: import.meta.env.MODE,
|
|
113
|
+
* release: import.meta.env.VITE_APP_VERSION,
|
|
114
|
+
* })
|
|
115
|
+
* .mount('#app');
|
|
116
|
+
*/
|
|
117
|
+
declare const AllStakPlugin: Plugin;
|
|
118
|
+
|
|
119
|
+
type AllStakNS = typeof AllStak;
|
|
120
|
+
/**
|
|
121
|
+
* Access the AllStak client inside a `<script setup>` block.
|
|
122
|
+
*
|
|
123
|
+
* import { useAllStak } from '@allstak/vue';
|
|
124
|
+
*
|
|
125
|
+
* const allstak = useAllStak();
|
|
126
|
+
* allstak.captureException(new Error('boom'));
|
|
127
|
+
*/
|
|
128
|
+
declare function useAllStak(): AllStakNS;
|
|
129
|
+
/**
|
|
130
|
+
* Set the active user for the duration of this component's lifetime,
|
|
131
|
+
* automatically clearing it on unmount.
|
|
132
|
+
*
|
|
133
|
+
* useAllStakUser({ id: currentUser.value.id, email: currentUser.value.email });
|
|
134
|
+
*
|
|
135
|
+
* The core client identifies users by `id` and/or `email` only. To clear
|
|
136
|
+
* the user we call `setUser({})` (there is no dedicated clear method).
|
|
137
|
+
*/
|
|
138
|
+
declare function useAllStakUser(user: {
|
|
139
|
+
id?: string;
|
|
140
|
+
email?: string;
|
|
141
|
+
} | null): void;
|
|
142
|
+
/**
|
|
143
|
+
* Open a span and finish it when the component (or effect scope) tears
|
|
144
|
+
* down. Mirrors the pattern of React's `useSpan`.
|
|
145
|
+
*
|
|
146
|
+
* const span = useAllStakSpan({ op: 'checkout.flow', description: 'review → pay' });
|
|
147
|
+
* span.setTag('flow', 'web');
|
|
148
|
+
*/
|
|
149
|
+
declare function useAllStakSpan(opts: SpanOptions): Span;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Instrument vue-router so every route change opens a navigation span +
|
|
153
|
+
* a breadcrumb.
|
|
154
|
+
*
|
|
155
|
+
* import { createRouter } from 'vue-router';
|
|
156
|
+
* import { installRouterInstrumentation } from '@allstak/vue';
|
|
157
|
+
*
|
|
158
|
+
* const router = createRouter({ ... });
|
|
159
|
+
* installRouterInstrumentation(router);
|
|
160
|
+
*
|
|
161
|
+
* Or composition-API style:
|
|
162
|
+
*
|
|
163
|
+
* const router = useRouter();
|
|
164
|
+
* useAllStakRouter(router);
|
|
165
|
+
*/
|
|
166
|
+
declare function installRouterInstrumentation(router: Router): void;
|
|
167
|
+
/** Composable-style alias for `installRouterInstrumentation`. */
|
|
168
|
+
declare function useAllStakRouter(router: Router): void;
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* A drop-in error boundary component that reports any error thrown in
|
|
172
|
+
* its subtree to AllStak and then re-throws so the next boundary up the
|
|
173
|
+
* tree (or the global handler) still sees it.
|
|
174
|
+
*
|
|
175
|
+
* <AllStakErrorBoundary>
|
|
176
|
+
* <RiskyWidget />
|
|
177
|
+
* </AllStakErrorBoundary>
|
|
178
|
+
*
|
|
179
|
+
* Slots:
|
|
180
|
+
* default — the wrapped subtree
|
|
181
|
+
* fallback — optional; if provided, rendered when the subtree throws.
|
|
182
|
+
* Receives `{ error }` as a slot prop.
|
|
183
|
+
*/
|
|
184
|
+
declare const AllStakErrorBoundary: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
185
|
+
/**
|
|
186
|
+
* Re-throw the error after capturing. Default: `true`. Disable only
|
|
187
|
+
* when this boundary should fully consume the error (i.e. you've
|
|
188
|
+
* supplied a useful `fallback` slot).
|
|
189
|
+
*/
|
|
190
|
+
rethrow: {
|
|
191
|
+
type: BooleanConstructor;
|
|
192
|
+
default: boolean;
|
|
193
|
+
};
|
|
194
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
195
|
+
[key: string]: any;
|
|
196
|
+
}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
197
|
+
/**
|
|
198
|
+
* Re-throw the error after capturing. Default: `true`. Disable only
|
|
199
|
+
* when this boundary should fully consume the error (i.e. you've
|
|
200
|
+
* supplied a useful `fallback` slot).
|
|
201
|
+
*/
|
|
202
|
+
rethrow: {
|
|
203
|
+
type: BooleanConstructor;
|
|
204
|
+
default: boolean;
|
|
205
|
+
};
|
|
206
|
+
}>> & Readonly<{}>, {
|
|
207
|
+
rethrow: boolean;
|
|
208
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
209
|
+
|
|
210
|
+
/**
|
|
211
|
+
* AllStak for Vue 3.
|
|
212
|
+
*
|
|
213
|
+
* Public surface:
|
|
214
|
+
* - `init` — bootstrap (delegates to @allstak/js with Vue tagging)
|
|
215
|
+
* - `AllStakPlugin` — `app.use(AllStakPlugin, { apiKey, ... })`
|
|
216
|
+
* - `useAllStak` — composition API access to the client
|
|
217
|
+
* - `useAllStakUser` — set/clear user from inside a setup()
|
|
218
|
+
* - `useAllStakSpan` — open a manual span within a setup
|
|
219
|
+
* - `useAllStakRouter` — instrument vue-router (route change → span)
|
|
220
|
+
* - `AllStakErrorBoundary` — re-throwing error boundary component
|
|
221
|
+
* - `createTracingMixins` / `installComponentTracing` — component-render spans
|
|
222
|
+
* - re-exports — every top-level @allstak/js export
|
|
223
|
+
*/
|
|
224
|
+
|
|
225
|
+
declare const SDK_NAME = "allstak-vue";
|
|
226
|
+
declare const SDK_VERSION: string;
|
|
227
|
+
|
|
228
|
+
export { AllStakErrorBoundary, AllStakPlugin, type AllStakVueOptions, type ComponentTracingOptions, SDK_NAME, SDK_VERSION, type TracingOperation, createTracingMixins, init, installComponentTracing, installRouterInstrumentation, useAllStak, useAllStakRouter, useAllStakSpan, useAllStakUser };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { AllStakConfig, AllStak, SpanOptions, Span } from '@allstak/js';
|
|
2
|
+
export { AllStak, AllStakConfig, AllStakIntegration, Breadcrumb, DbQueryItem, ErrorEvent, ErrorEventProcessor, HeartbeatOptions, HttpRequestItem, LogEvent, LogLevel, SamplingContext, Scope, Session, SessionStatus, SessionTracker, Span, SpanData, SpanOptions, SpanProcessor, TracesSampler, WebVitalsContext, WebVitalsModule, consoleIntegration, databaseIntegration, dedupeIntegration, defineIntegration, eventFiltersIntegration, httpClientIntegration, inboundFiltersIntegration, isWebVitalsSupported } from '@allstak/js';
|
|
3
|
+
import * as vue from 'vue';
|
|
4
|
+
import { ComponentOptions, App, Plugin } from 'vue';
|
|
5
|
+
import { Router } from 'vue-router';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The core client instance returned by `AllStak.init`. `@allstak/js` does
|
|
9
|
+
* not export the `AllStakClient` class by name, so we derive the type from
|
|
10
|
+
* the value. This keeps the emitted declaration referential (no inlining of
|
|
11
|
+
* the core class's private members, which would trip TS4094).
|
|
12
|
+
*/
|
|
13
|
+
type AllStakClientInstance = ReturnType<typeof AllStak.init>;
|
|
14
|
+
/**
|
|
15
|
+
* Initialize the AllStak SDK for a Vue 3 application.
|
|
16
|
+
*
|
|
17
|
+
* This is a thin shim over `AllStak.init` from `@allstak/js` that stamps
|
|
18
|
+
* the wrapper identity (`sdkName`, `sdkVersion`) so the backend can tell
|
|
19
|
+
* Vue traffic apart from plain JS traffic. Everything else — buffering,
|
|
20
|
+
* sampling, session health, offline queue, PII scrubbing — is delegated
|
|
21
|
+
* to the underlying core client.
|
|
22
|
+
*
|
|
23
|
+
* Call this once at app boot, BEFORE `app.use(AllStakPlugin)` if you want
|
|
24
|
+
* the plugin to surface the same client instance.
|
|
25
|
+
*/
|
|
26
|
+
declare function init(config: AllStakConfig): AllStakClientInstance;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Component-lifecycle operations that can be traced. Each maps to a
|
|
30
|
+
* before/after lifecycle-hook pair on the Vue component instance.
|
|
31
|
+
*/
|
|
32
|
+
type TracingOperation = 'mount' | 'update' | 'unmount';
|
|
33
|
+
interface ComponentTracingOptions {
|
|
34
|
+
/**
|
|
35
|
+
* Which components to trace.
|
|
36
|
+
* - `false` (default): trace nothing.
|
|
37
|
+
* - `true`: trace every component.
|
|
38
|
+
* - `string[]`: trace only components whose name is in the list.
|
|
39
|
+
*/
|
|
40
|
+
trackComponents?: boolean | string[];
|
|
41
|
+
/**
|
|
42
|
+
* Which lifecycle operations to time. Default: `['mount']`.
|
|
43
|
+
* A span is opened on the `before*` hook and finished on the matching
|
|
44
|
+
* `*ed`/`*ted` hook.
|
|
45
|
+
*/
|
|
46
|
+
hooks?: TracingOperation[];
|
|
47
|
+
/**
|
|
48
|
+
* Span operation prefix. Resulting spans use `ui.vue.<operation>`
|
|
49
|
+
* (e.g. `ui.vue.mount`). Default: `'ui.vue'`.
|
|
50
|
+
*/
|
|
51
|
+
opPrefix?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Build a Vue mixin that opens a span around the configured lifecycle
|
|
55
|
+
* phases of each tracked component. The span is named after the
|
|
56
|
+
* component and tagged with the lifecycle operation, giving render-time
|
|
57
|
+
* visibility comparable to a dedicated component profiler.
|
|
58
|
+
*
|
|
59
|
+
* Spans use operation `ui.vue.<operation>` and description
|
|
60
|
+
* `Vue <ComponentName>`.
|
|
61
|
+
*/
|
|
62
|
+
declare function createTracingMixins(options?: ComponentTracingOptions): ComponentOptions;
|
|
63
|
+
/**
|
|
64
|
+
* Install component performance tracing on a Vue app via `app.mixin`.
|
|
65
|
+
*
|
|
66
|
+
* import { createApp } from 'vue';
|
|
67
|
+
* import { installComponentTracing } from '@allstak/vue';
|
|
68
|
+
*
|
|
69
|
+
* const app = createApp(App);
|
|
70
|
+
* installComponentTracing(app, { trackComponents: true });
|
|
71
|
+
*/
|
|
72
|
+
declare function installComponentTracing(app: App, options?: ComponentTracingOptions): void;
|
|
73
|
+
|
|
74
|
+
interface AllStakVueOptions extends AllStakConfig {
|
|
75
|
+
/**
|
|
76
|
+
* Hook into `app.config.errorHandler` to capture every uncaught error
|
|
77
|
+
* thrown from a render function or watcher. Default: `true`.
|
|
78
|
+
*
|
|
79
|
+
* Set to `false` if you have your own error handler and want to call
|
|
80
|
+
* `AllStak.captureException` from it manually.
|
|
81
|
+
*/
|
|
82
|
+
attachErrorHandler?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Hook into `app.config.warnHandler` to capture every Vue warning as a
|
|
85
|
+
* breadcrumb. Useful while you're stabilising — turn it off in prod
|
|
86
|
+
* for noisy apps. Default: `false`.
|
|
87
|
+
*/
|
|
88
|
+
attachWarnHandler?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Skip calling `AllStak.init`. Pass this when you've already called
|
|
91
|
+
* `init(...)` yourself (or imported a module that did) and just want
|
|
92
|
+
* the plugin's Vue-side hooks. Default: `false`.
|
|
93
|
+
*/
|
|
94
|
+
skipInit?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Component-render performance tracing. When `trackComponents` is set
|
|
97
|
+
* (to `true` or a list of component names), a span is opened around
|
|
98
|
+
* each tracked component's lifecycle phase. Disabled by default.
|
|
99
|
+
*/
|
|
100
|
+
tracingOptions?: ComponentTracingOptions;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Vue 3 plugin.
|
|
104
|
+
*
|
|
105
|
+
* import { createApp } from 'vue';
|
|
106
|
+
* import { AllStakPlugin } from '@allstak/vue';
|
|
107
|
+
* import App from './App.vue';
|
|
108
|
+
*
|
|
109
|
+
* createApp(App)
|
|
110
|
+
* .use(AllStakPlugin, {
|
|
111
|
+
* apiKey: import.meta.env.VITE_ALLSTAK_API_KEY,
|
|
112
|
+
* environment: import.meta.env.MODE,
|
|
113
|
+
* release: import.meta.env.VITE_APP_VERSION,
|
|
114
|
+
* })
|
|
115
|
+
* .mount('#app');
|
|
116
|
+
*/
|
|
117
|
+
declare const AllStakPlugin: Plugin;
|
|
118
|
+
|
|
119
|
+
type AllStakNS = typeof AllStak;
|
|
120
|
+
/**
|
|
121
|
+
* Access the AllStak client inside a `<script setup>` block.
|
|
122
|
+
*
|
|
123
|
+
* import { useAllStak } from '@allstak/vue';
|
|
124
|
+
*
|
|
125
|
+
* const allstak = useAllStak();
|
|
126
|
+
* allstak.captureException(new Error('boom'));
|
|
127
|
+
*/
|
|
128
|
+
declare function useAllStak(): AllStakNS;
|
|
129
|
+
/**
|
|
130
|
+
* Set the active user for the duration of this component's lifetime,
|
|
131
|
+
* automatically clearing it on unmount.
|
|
132
|
+
*
|
|
133
|
+
* useAllStakUser({ id: currentUser.value.id, email: currentUser.value.email });
|
|
134
|
+
*
|
|
135
|
+
* The core client identifies users by `id` and/or `email` only. To clear
|
|
136
|
+
* the user we call `setUser({})` (there is no dedicated clear method).
|
|
137
|
+
*/
|
|
138
|
+
declare function useAllStakUser(user: {
|
|
139
|
+
id?: string;
|
|
140
|
+
email?: string;
|
|
141
|
+
} | null): void;
|
|
142
|
+
/**
|
|
143
|
+
* Open a span and finish it when the component (or effect scope) tears
|
|
144
|
+
* down. Mirrors the pattern of React's `useSpan`.
|
|
145
|
+
*
|
|
146
|
+
* const span = useAllStakSpan({ op: 'checkout.flow', description: 'review → pay' });
|
|
147
|
+
* span.setTag('flow', 'web');
|
|
148
|
+
*/
|
|
149
|
+
declare function useAllStakSpan(opts: SpanOptions): Span;
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Instrument vue-router so every route change opens a navigation span +
|
|
153
|
+
* a breadcrumb.
|
|
154
|
+
*
|
|
155
|
+
* import { createRouter } from 'vue-router';
|
|
156
|
+
* import { installRouterInstrumentation } from '@allstak/vue';
|
|
157
|
+
*
|
|
158
|
+
* const router = createRouter({ ... });
|
|
159
|
+
* installRouterInstrumentation(router);
|
|
160
|
+
*
|
|
161
|
+
* Or composition-API style:
|
|
162
|
+
*
|
|
163
|
+
* const router = useRouter();
|
|
164
|
+
* useAllStakRouter(router);
|
|
165
|
+
*/
|
|
166
|
+
declare function installRouterInstrumentation(router: Router): void;
|
|
167
|
+
/** Composable-style alias for `installRouterInstrumentation`. */
|
|
168
|
+
declare function useAllStakRouter(router: Router): void;
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* A drop-in error boundary component that reports any error thrown in
|
|
172
|
+
* its subtree to AllStak and then re-throws so the next boundary up the
|
|
173
|
+
* tree (or the global handler) still sees it.
|
|
174
|
+
*
|
|
175
|
+
* <AllStakErrorBoundary>
|
|
176
|
+
* <RiskyWidget />
|
|
177
|
+
* </AllStakErrorBoundary>
|
|
178
|
+
*
|
|
179
|
+
* Slots:
|
|
180
|
+
* default — the wrapped subtree
|
|
181
|
+
* fallback — optional; if provided, rendered when the subtree throws.
|
|
182
|
+
* Receives `{ error }` as a slot prop.
|
|
183
|
+
*/
|
|
184
|
+
declare const AllStakErrorBoundary: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
185
|
+
/**
|
|
186
|
+
* Re-throw the error after capturing. Default: `true`. Disable only
|
|
187
|
+
* when this boundary should fully consume the error (i.e. you've
|
|
188
|
+
* supplied a useful `fallback` slot).
|
|
189
|
+
*/
|
|
190
|
+
rethrow: {
|
|
191
|
+
type: BooleanConstructor;
|
|
192
|
+
default: boolean;
|
|
193
|
+
};
|
|
194
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
195
|
+
[key: string]: any;
|
|
196
|
+
}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
197
|
+
/**
|
|
198
|
+
* Re-throw the error after capturing. Default: `true`. Disable only
|
|
199
|
+
* when this boundary should fully consume the error (i.e. you've
|
|
200
|
+
* supplied a useful `fallback` slot).
|
|
201
|
+
*/
|
|
202
|
+
rethrow: {
|
|
203
|
+
type: BooleanConstructor;
|
|
204
|
+
default: boolean;
|
|
205
|
+
};
|
|
206
|
+
}>> & Readonly<{}>, {
|
|
207
|
+
rethrow: boolean;
|
|
208
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
209
|
+
|
|
210
|
+
/**
|
|
211
|
+
* AllStak for Vue 3.
|
|
212
|
+
*
|
|
213
|
+
* Public surface:
|
|
214
|
+
* - `init` — bootstrap (delegates to @allstak/js with Vue tagging)
|
|
215
|
+
* - `AllStakPlugin` — `app.use(AllStakPlugin, { apiKey, ... })`
|
|
216
|
+
* - `useAllStak` — composition API access to the client
|
|
217
|
+
* - `useAllStakUser` — set/clear user from inside a setup()
|
|
218
|
+
* - `useAllStakSpan` — open a manual span within a setup
|
|
219
|
+
* - `useAllStakRouter` — instrument vue-router (route change → span)
|
|
220
|
+
* - `AllStakErrorBoundary` — re-throwing error boundary component
|
|
221
|
+
* - `createTracingMixins` / `installComponentTracing` — component-render spans
|
|
222
|
+
* - re-exports — every top-level @allstak/js export
|
|
223
|
+
*/
|
|
224
|
+
|
|
225
|
+
declare const SDK_NAME = "allstak-vue";
|
|
226
|
+
declare const SDK_VERSION: string;
|
|
227
|
+
|
|
228
|
+
export { AllStakErrorBoundary, AllStakPlugin, type AllStakVueOptions, type ComponentTracingOptions, SDK_NAME, SDK_VERSION, type TracingOperation, createTracingMixins, init, installComponentTracing, installRouterInstrumentation, useAllStak, useAllStakRouter, useAllStakSpan, useAllStakUser };
|