@zhongxiaobing/monitor-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.
Files changed (8) hide show
  1. package/README.md +51 -0
  2. package/dist/index.d.mts +133 -0
  3. package/dist/index.d.ts +133 -0
  4. package/dist/index.js +750 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +723 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +42 -0
package/README.md ADDED
@@ -0,0 +1,51 @@
1
+ # @zhongxiaobing/monitor-vue Vue 接入
2
+
3
+ ## 极简接入
4
+
5
+ ```ts
6
+ import { createApp } from 'vue'
7
+ import { createRouter, createWebHistory } from 'vue-router'
8
+ import { createVueMonitor } from '@zhongxiaobing/monitor-vue'
9
+ import App from './App.vue'
10
+
11
+ const { plugin: monitorPlugin, monitor } = createVueMonitor({
12
+ appId: 'my-vue-app',
13
+ appName: 'My Vue App',
14
+ env: 'prod',
15
+ dsn: '/api/collect'
16
+ })
17
+
18
+ const router = createRouter({
19
+ history: createWebHistory(),
20
+ routes: []
21
+ })
22
+
23
+ const app = createApp(App)
24
+ app.use(router)
25
+ app.use(monitorPlugin)
26
+ app.mount('#app')
27
+ ```
28
+
29
+ 默认行为：
30
+ - 自动启用 error、network、blankScreen 三个默认插件
31
+ - 自动接管 `app.config.errorHandler`
32
+ - 可通过 `monitor.captureException(...)` 手动上报异常
33
+
34
+ ## 可选配置
35
+
36
+ ```ts
37
+ const { plugin } = createVueMonitor({
38
+ appId: 'my-vue-app',
39
+ env: 'prod',
40
+ dsn: '/api/collect',
41
+ blankScreen: {
42
+ detectOnRouteChange: true,
43
+ delayMs: 3000,
44
+ routeChangeDelayMs: 1500
45
+ },
46
+ disableDefaultPlugins: ['blankScreen'],
47
+ beforeSend(event) {
48
+ return event
49
+ }
50
+ })
51
+ ```
package/dist/index.d.mts ADDED
@@ -0,0 +1,133 @@
1
+ import { Plugin, App } from 'vue';
2
+
3
+ type MonitorEventType = 'exception' | 'resource_error' | 'http_error' | 'blank_screen';
4
+ interface Breadcrumb {
5
+ type: string;
6
+ category?: string;
7
+ message?: string;
8
+ timestamp: number;
9
+ data?: Record<string, unknown>;
10
+ }
11
+ interface BaseEvent {
12
+ eventId: string;
13
+ eventType: MonitorEventType;
14
+ appId: string;
15
+ appName?: string;
16
+ env: string;
17
+ release?: string;
18
+ url: string;
19
+ pathname: string;
20
+ title: string;
21
+ timestamp: number;
22
+ userAgent: string;
23
+ userId?: string;
24
+ deviceId?: string;
25
+ breadcrumbs?: Breadcrumb[];
26
+ tags?: Record<string, string>;
27
+ extra?: Record<string, unknown>;
28
+ }
29
+ interface ExceptionEvent extends BaseEvent {
30
+ eventType: 'exception';
31
+ error: {
32
+ name?: string;
33
+ message: string;
34
+ stack?: string;
35
+ source?: string;
36
+ };
37
+ }
38
+ interface HttpErrorEvent extends BaseEvent {
39
+ eventType: 'http_error';
40
+ request: {
41
+ url: string;
42
+ method: string;
43
+ status?: number;
44
+ duration?: number;
45
+ success: boolean;
46
+ source?: 'fetch' | 'xhr';
47
+ };
48
+ response?: {
49
+ code?: string | number;
50
+ message?: string;
51
+ };
52
+ }
53
+ interface BlankScreenEvent extends BaseEvent {
54
+ eventType: 'blank_screen';
55
+ blankScreen: {
56
+ score: number;
57
+ rootSelector?: string;
58
+ domSummary?: string[];
59
+ readyState?: string;
60
+ trigger?: 'initial' | 'route_change' | 'manual';
61
+ };
62
+ }
63
+ type MonitorEvent = ExceptionEvent | HttpErrorEvent | BlankScreenEvent;
64
+
65
+ interface MonitorApi {
66
+ emit(event: MonitorEvent): void;
67
+ captureException(error: unknown, extra?: Record<string, unknown>): void;
68
+ }
69
+ interface PluginSetupContext {
70
+ api: MonitorApi;
71
+ options: MonitorInitOptions;
72
+ }
73
+ interface MonitorPlugin {
74
+ name: string;
75
+ setup(context: PluginSetupContext): void | (() => void);
76
+ }
77
+
78
+ interface MonitorInitOptions {
79
+ appId: string;
80
+ appName?: string;
81
+ env: string;
82
+ release?: string;
83
+ dsn: string;
84
+ sampleRate?: number;
85
+ plugins?: MonitorPlugin[];
86
+ beforeSend?: (event: MonitorEvent) => MonitorEvent | null;
87
+ }
88
+
89
+ interface BlankScreenPluginOptions {
90
+ rootSelector?: string;
91
+ delayMs?: number;
92
+ scoreThreshold?: number;
93
+ samplePoints?: Array<[number, number]>;
94
+ ignoreSelectors?: string[];
95
+ detectOnRouteChange?: boolean;
96
+ routeChangeDelayMs?: number;
97
+ dedupeWindowMs?: number;
98
+ }
99
+
100
+ interface ErrorPluginOptions {
101
+ captureOnError?: boolean;
102
+ captureUnhandledRejection?: boolean;
103
+ }
104
+
105
+ interface NetworkPluginOptions {
106
+ timeoutMs?: number;
107
+ capture5xx?: boolean;
108
+ captureTimeout?: boolean;
109
+ captureNetworkError?: boolean;
110
+ }
111
+
112
+ type DefaultVueMonitorPluginName = 'error' | 'network' | 'blankScreen';
113
+ interface CreateVueMonitorOptions extends Omit<MonitorInitOptions, 'plugins'> {
114
+ plugins?: MonitorPlugin[];
115
+ disableDefaultPlugins?: DefaultVueMonitorPluginName[];
116
+ error?: ErrorPluginOptions;
117
+ network?: NetworkPluginOptions;
118
+ blankScreen?: BlankScreenPluginOptions;
119
+ }
120
+ interface VueMonitorInstance {
121
+ monitor: MonitorApi;
122
+ plugin: Plugin;
123
+ install: (app: App) => void;
124
+ }
125
+ declare function createVueMonitor(options: CreateVueMonitorOptions): VueMonitorInstance;
126
+
127
+ declare function createVueMonitorPlugin(monitor: MonitorApi): {
128
+ install(app: App): void;
129
+ };
130
+
131
+ declare function useMonitor(): MonitorApi;
132
+
133
+ export { type CreateVueMonitorOptions, type DefaultVueMonitorPluginName, type VueMonitorInstance, createVueMonitor, createVueMonitorPlugin, useMonitor };
package/dist/index.d.ts ADDED
@@ -0,0 +1,133 @@
1
+ import { Plugin, App } from 'vue';
2
+
3
+ type MonitorEventType = 'exception' | 'resource_error' | 'http_error' | 'blank_screen';
4
+ interface Breadcrumb {
5
+ type: string;
6
+ category?: string;
7
+ message?: string;
8
+ timestamp: number;
9
+ data?: Record<string, unknown>;
10
+ }
11
+ interface BaseEvent {
12
+ eventId: string;
13
+ eventType: MonitorEventType;
14
+ appId: string;
15
+ appName?: string;
16
+ env: string;
17
+ release?: string;
18
+ url: string;
19
+ pathname: string;
20
+ title: string;
21
+ timestamp: number;
22
+ userAgent: string;
23
+ userId?: string;
24
+ deviceId?: string;
25
+ breadcrumbs?: Breadcrumb[];
26
+ tags?: Record<string, string>;
27
+ extra?: Record<string, unknown>;
28
+ }
29
+ interface ExceptionEvent extends BaseEvent {
30
+ eventType: 'exception';
31
+ error: {
32
+ name?: string;
33
+ message: string;
34
+ stack?: string;
35
+ source?: string;
36
+ };
37
+ }
38
+ interface HttpErrorEvent extends BaseEvent {
39
+ eventType: 'http_error';
40
+ request: {
41
+ url: string;
42
+ method: string;
43
+ status?: number;
44
+ duration?: number;
45
+ success: boolean;
46
+ source?: 'fetch' | 'xhr';
47
+ };
48
+ response?: {
49
+ code?: string | number;
50
+ message?: string;
51
+ };
52
+ }
53
+ interface BlankScreenEvent extends BaseEvent {
54
+ eventType: 'blank_screen';
55
+ blankScreen: {
56
+ score: number;
57
+ rootSelector?: string;
58
+ domSummary?: string[];
59
+ readyState?: string;
60
+ trigger?: 'initial' | 'route_change' | 'manual';
61
+ };
62
+ }
63
+ type MonitorEvent = ExceptionEvent | HttpErrorEvent | BlankScreenEvent;
64
+
65
+ interface MonitorApi {
66
+ emit(event: MonitorEvent): void;
67
+ captureException(error: unknown, extra?: Record<string, unknown>): void;
68
+ }
69
+ interface PluginSetupContext {
70
+ api: MonitorApi;
71
+ options: MonitorInitOptions;
72
+ }
73
+ interface MonitorPlugin {
74
+ name: string;
75
+ setup(context: PluginSetupContext): void | (() => void);
76
+ }
77
+
78
+ interface MonitorInitOptions {
79
+ appId: string;
80
+ appName?: string;
81
+ env: string;
82
+ release?: string;
83
+ dsn: string;
84
+ sampleRate?: number;
85
+ plugins?: MonitorPlugin[];
86
+ beforeSend?: (event: MonitorEvent) => MonitorEvent | null;
87
+ }
88
+
89
+ interface BlankScreenPluginOptions {
90
+ rootSelector?: string;
91
+ delayMs?: number;
92
+ scoreThreshold?: number;
93
+ samplePoints?: Array<[number, number]>;
94
+ ignoreSelectors?: string[];
95
+ detectOnRouteChange?: boolean;
96
+ routeChangeDelayMs?: number;
97
+ dedupeWindowMs?: number;
98
+ }
99
+
100
+ interface ErrorPluginOptions {
101
+ captureOnError?: boolean;
102
+ captureUnhandledRejection?: boolean;
103
+ }
104
+
105
+ interface NetworkPluginOptions {
106
+ timeoutMs?: number;
107
+ capture5xx?: boolean;
108
+ captureTimeout?: boolean;
109
+ captureNetworkError?: boolean;
110
+ }
111
+
112
+ type DefaultVueMonitorPluginName = 'error' | 'network' | 'blankScreen';
113
+ interface CreateVueMonitorOptions extends Omit<MonitorInitOptions, 'plugins'> {
114
+ plugins?: MonitorPlugin[];
115
+ disableDefaultPlugins?: DefaultVueMonitorPluginName[];
116
+ error?: ErrorPluginOptions;
117
+ network?: NetworkPluginOptions;
118
+ blankScreen?: BlankScreenPluginOptions;
119
+ }
120
+ interface VueMonitorInstance {
121
+ monitor: MonitorApi;
122
+ plugin: Plugin;
123
+ install: (app: App) => void;
124
+ }
125
+ declare function createVueMonitor(options: CreateVueMonitorOptions): VueMonitorInstance;
126
+
127
+ declare function createVueMonitorPlugin(monitor: MonitorApi): {
128
+ install(app: App): void;
129
+ };
130
+
131
+ declare function useMonitor(): MonitorApi;
132
+
133
+ export { type CreateVueMonitorOptions, type DefaultVueMonitorPluginName, type VueMonitorInstance, createVueMonitor, createVueMonitorPlugin, useMonitor };