|
1 | 1 | # VSCode Telemetry Extension |
2 | 2 |
|
3 | | -A Visual Studio Code extension demonstrating telemetry tracking using Azure Application Insights via the `vscode-extension-telemetry` package. Features a clean, reusable architecture with helper functions for easy telemetry integration. |
| 3 | +A Visual Studio Code extension demonstrating telemetry tracking using Azure Application Insights with an event-driven architecture. |
4 | 4 |
|
5 | 5 | ## Features |
6 | 6 |
|
7 | | -- **Reusable Telemetry Utilities** - Factory functions and helpers for consistent telemetry tracking |
8 | | -- **Rich Event Data** - Track custom properties and performance measurements |
9 | | -- **Component-based Tracking** - Organize telemetry by component for better insights |
10 | | -- **Azure Application Insights Integration** - Direct connection to Azure monitoring |
11 | | -- **Performance Metrics** - Built-in execution time and memory usage tracking |
| 7 | +- Event-driven telemetry using `TelemetryEventEmitter` |
| 8 | +- Clean, reusable API for tracking events |
| 9 | +- Component-based organization |
| 10 | +- Azure Application Insights integration |
12 | 11 |
|
13 | 12 | ## Setup |
14 | 13 |
|
15 | | -### Prerequisites |
16 | | - |
17 | | -- Visual Studio Code ^1.105.0 |
18 | | -- Node.js 22.x |
19 | | -- Azure Application Insights connection string |
20 | | - |
21 | | -### Installation |
22 | | - |
23 | | -1. Clone this repository |
24 | | -2. Install dependencies: |
| 14 | +1. Clone and install dependencies: |
25 | 15 | ```bash |
26 | 16 | npm install |
27 | 17 | ``` |
28 | | -3. Configure your Application Insights connection string in `src/extension.ts`: |
| 18 | + |
| 19 | +2. Add your Application Insights connection string in [src/extension.ts](src/extension.ts): |
29 | 20 | ```typescript |
30 | 21 | const connectionString = 'your-connection-string-here'; |
31 | 22 | ``` |
32 | | -4. Compile the extension: |
| 23 | + |
| 24 | +3. Run the extension: |
33 | 25 | ```bash |
34 | 26 | npm run compile |
| 27 | + # Press F5 to debug |
35 | 28 | ``` |
36 | | -5. Press `F5` to run the extension in debug mode |
37 | 29 |
|
38 | 30 | ## Usage |
39 | 31 |
|
40 | | -### Commands |
41 | | - |
42 | | -- **Hello World** (`extension.helloWorld`) - Demo command that sends telemetry with performance metrics |
43 | | - |
44 | | -Access via Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) |
45 | | - |
46 | | -### API Reference |
47 | | - |
48 | | -#### `createTelemetryReporter(context: ExtensionContext): TelemetryReporter` |
49 | | - |
50 | | -Factory function to create and initialize a telemetry reporter instance. |
| 32 | +### Sending Telemetry Events |
51 | 33 |
|
52 | | -**Parameters:** |
53 | | -- `context` - VSCode extension context for lifecycle management |
| 34 | +Use the `TelemetryEventEmitter` to fire events from anywhere in your extension: |
54 | 35 |
|
55 | | -**Returns:** Configured TelemetryReporter instance |
56 | | - |
57 | | -**Example:** |
58 | 36 | ```typescript |
59 | | -export function activate(context: vscode.ExtensionContext) { |
60 | | - const reporter = createTelemetryReporter(context); |
61 | | - // Use reporter for telemetry tracking |
62 | | -} |
63 | | -``` |
64 | | - |
65 | | -#### `sendTelemetryEvent(reporter, eventName, componentName, customDimensions?, measurements?)` |
66 | | - |
67 | | -Helper function to send telemetry events with standardized structure. |
68 | | - |
69 | | -**Parameters:** |
70 | | -- `reporter` - TelemetryReporter instance |
71 | | -- `eventName` - Name of the event to track |
72 | | -- `componentName` - Component that triggered the event |
73 | | -- `customDimensions` - Optional object with custom string properties |
74 | | -- `measurements` - Optional object with numeric measurements |
75 | | - |
76 | | -**Example:** |
77 | | -```typescript |
78 | | -sendTelemetryEvent( |
79 | | - reporter, |
80 | | - 'helloWorldCommand', |
81 | | - 'commandPalette', |
82 | | - { |
83 | | - source: 'command', |
84 | | - userId: '123456', |
85 | | - userName: 'yasithrashan' |
86 | | - }, |
87 | | - { |
88 | | - 'performance.executionTime': Date.now(), |
89 | | - 'performance.memoryUsed': process.memoryUsage().heapUsed |
90 | | - } |
91 | | -); |
92 | | -``` |
| 37 | +import { TelemetryEventEmitter } from './event-emitter'; |
93 | 38 |
|
94 | | -### Telemetry Events |
95 | | - |
96 | | -The extension tracks: |
97 | | -- `helloWorldCommand` - Fired when the Hello World command is executed |
98 | | - - Dimensions: source, userId, userName, component |
99 | | - - Measurements: performance.executionTime, performance.memoryUsed |
100 | | - |
101 | | -### Adding Custom Telemetry |
102 | | - |
103 | | -1. Get the reporter instance (created during activation) |
104 | | -2. Call `sendTelemetryEvent()` with your event data: |
105 | | - |
106 | | -```typescript |
107 | | -sendTelemetryEvent( |
108 | | - reporter, |
109 | | - 'myCustomEvent', |
110 | | - 'myComponent', |
111 | | - { |
| 39 | +TelemetryEventEmitter.instance.fire({ |
| 40 | + eventName: 'myEvent', |
| 41 | + componentName: 'myComponent', |
| 42 | + customDimensions: { |
112 | 43 | action: 'buttonClick', |
113 | 44 | feature: 'newFeature' |
114 | 45 | }, |
115 | | - { |
116 | | - 'response.time': responseTime, |
117 | | - 'data.size': dataSize |
| 46 | + measurements: { |
| 47 | + executionTime: 123, |
| 48 | + memoryUsed: 456789 |
118 | 49 | } |
119 | | -); |
| 50 | +}); |
120 | 51 | ``` |
121 | 52 |
|
122 | | -## Architecture |
123 | | - |
124 | | -### Core Components |
| 53 | +### API Reference |
125 | 54 |
|
126 | | -#### `createTelemetryReporter()` |
127 | | -Factory function that encapsulates TelemetryReporter initialization and lifecycle management. Automatically registers the reporter for disposal when the extension deactivates. |
| 55 | +#### `TelemetryEventEmitter` |
128 | 56 |
|
129 | | -#### `sendTelemetryEvent()` |
130 | | -Standardized telemetry helper that: |
131 | | -- Adds component tracking to all events |
132 | | -- Merges custom dimensions with standard properties |
133 | | -- Ensures consistent event structure across the extension |
134 | | -- Supports both properties (strings) and measurements (numbers) |
| 57 | +Singleton event emitter for telemetry events. |
135 | 58 |
|
136 | | -### Telemetry Data Structure |
| 59 | +**Methods:** |
| 60 | +- `fire(payload)` - Fire a telemetry event |
| 61 | +- `onDidFire(listener)` - Listen for telemetry events |
137 | 62 |
|
138 | | -Each event includes: |
| 63 | +#### `createTelemetryReporter(context)` |
139 | 64 |
|
140 | | -**Standard Properties:** |
141 | | -- `component` - Component name (e.g., 'commandPalette', 'sidebar', 'webview') |
| 65 | +Creates and initializes a telemetry reporter. |
142 | 66 |
|
143 | | -**Custom Dimensions (strings):** |
144 | | -- Any additional context properties you provide |
145 | | -- Examples: userId, source, action, feature |
| 67 | +#### `sendTelemetryEvent(reporter, eventName, componentName, customDimensions?, measurements?)` |
146 | 68 |
|
147 | | -**Measurements (numbers):** |
148 | | -- Performance metrics |
149 | | -- Usage statistics |
150 | | -- Any numeric data points |
| 69 | +Sends a telemetry event to Application Insights. |
151 | 70 |
|
152 | | -**Example Event Structure:** |
153 | | -```json |
154 | | -{ |
155 | | - "eventName": "helloWorldCommand", |
156 | | - "properties": { |
157 | | - "component": "commandPalette", |
158 | | - "source": "command", |
159 | | - "userId": "123456", |
160 | | - "userName": "yasithrashan" |
161 | | - }, |
162 | | - "measurements": { |
163 | | - "performance.executionTime": 1732435200000, |
164 | | - "performance.memoryUsed": 45678912 |
165 | | - } |
166 | | -} |
| 71 | +## Architecture |
167 | 72 |
|
168 | | -## Development |
| 73 | +The extension uses an event-driven architecture: |
169 | 74 |
|
170 | | -```bash |
171 | | -# Compile TypeScript |
172 | | -npm run compile |
| 75 | +1. Components fire telemetry events using `TelemetryEventEmitter` |
| 76 | +2. The extension listens for these events during activation |
| 77 | +3. Events are forwarded to Azure Application Insights via the reporter |
173 | 78 |
|
174 | | -# Watch mode |
175 | | -npm run watch |
| 79 | +This pattern decouples telemetry logic from business logic, making code cleaner and more maintainable. |
176 | 80 |
|
177 | | -# Lint code |
178 | | -npm run lint |
| 81 | +## Development |
179 | 82 |
|
180 | | -# Package extension |
181 | | -vsce package |
| 83 | +```bash |
| 84 | +npm run compile # Compile TypeScript |
| 85 | +npm run watch # Watch mode |
| 86 | +npm run lint # Lint code |
182 | 87 | ``` |
183 | 88 |
|
184 | | -## Dependencies |
185 | | - |
186 | | -- [vscode-extension-telemetry](https://www.npmjs.com/package/vscode-extension-telemetry) - Official telemetry library for VSCode extensions |
187 | | - |
188 | 89 | ## License |
189 | 90 |
|
190 | | -MIT License - see [LICENSE](LICENSE) file for details. |
191 | | - |
192 | | -## Resources |
193 | | - |
194 | | -- [VSCode Extension Telemetry Guide](https://code.visualstudio.com/api/extension-guides/telemetry) |
195 | | -- [Application Insights Documentation](https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview) |
196 | | -- [vscode-extension-telemetry GitHub](https://github.com/Microsoft/vscode-extension-telemetry) |
197 | | - |
198 | | ---- |
199 | | - |
200 | | -**Happy tracking!** |
| 91 | +[MIT](LICENSE) |
0 commit comments