@getmicdrop/svelte-components 1.0.1
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/README.md +98 -0
- package/dist/config.d.ts +3 -0
- package/dist/config.d.ts.map +1 -0
- package/dist/config.js +6 -0
- package/dist/config.spec.d.ts +2 -0
- package/dist/config.spec.d.ts.map +1 -0
- package/dist/config.spec.js +29 -0
- package/dist/constants/formOptions.d.ts +18 -0
- package/dist/constants/formOptions.d.ts.map +1 -0
- package/dist/constants/formOptions.js +25 -0
- package/dist/constants/formOptions.spec.d.ts +2 -0
- package/dist/constants/formOptions.spec.d.ts.map +1 -0
- package/dist/constants/formOptions.spec.js +88 -0
- package/dist/telemetry.d.ts +13 -0
- package/dist/telemetry.d.ts.map +1 -0
- package/dist/telemetry.js +358 -0
- package/dist/telemetry.server.d.ts +11 -0
- package/dist/telemetry.server.d.ts.map +1 -0
- package/dist/telemetry.server.js +212 -0
- package/dist/telemetry.server.spec.d.ts +2 -0
- package/dist/telemetry.server.spec.d.ts.map +1 -0
- package/dist/telemetry.server.spec.js +434 -0
- package/dist/telemetry.spec.d.ts +2 -0
- package/dist/telemetry.spec.d.ts.map +1 -0
- package/dist/telemetry.spec.js +660 -0
- package/package.json +153 -0
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @micdrop/components
|
|
2
|
+
|
|
3
|
+
Shared component library for Micdrop applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @micdrop/components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```svelte
|
|
14
|
+
<script>
|
|
15
|
+
import { Button, Input, Modal } from '@micdrop/components';
|
|
16
|
+
import '@micdrop/components/styles';
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<Button variant="primary">Click me</Button>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Development
|
|
23
|
+
|
|
24
|
+
### Install dependencies
|
|
25
|
+
```bash
|
|
26
|
+
npm install
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Run Storybook
|
|
30
|
+
```bash
|
|
31
|
+
npm run storybook
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Run tests
|
|
35
|
+
```bash
|
|
36
|
+
npm test
|
|
37
|
+
npm run test:watch # Watch mode
|
|
38
|
+
npm run test:ui # UI mode
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Build
|
|
42
|
+
```bash
|
|
43
|
+
npm run build
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Components
|
|
47
|
+
|
|
48
|
+
### Core UI Components
|
|
49
|
+
- **Alert** - Alert notifications
|
|
50
|
+
- **Badge** - Badge display
|
|
51
|
+
- **Breadcrumb** - Navigation breadcrumb
|
|
52
|
+
- **Button** - Primary button with variants
|
|
53
|
+
- **Card** - Card container
|
|
54
|
+
- **Spinner** - Loading spinner
|
|
55
|
+
- **Toaster** - Toast notifications
|
|
56
|
+
|
|
57
|
+
### Form Components
|
|
58
|
+
- **Input** - Text input with validation
|
|
59
|
+
- **Select** - Dropdown select
|
|
60
|
+
- **MultiSelect** - Multi-select dropdown
|
|
61
|
+
- **GenderInput** - Gender selector
|
|
62
|
+
- **EthnicityDropdown** - Ethnicity selector
|
|
63
|
+
- **PlaceAutocomplete** - Google Places autocomplete
|
|
64
|
+
- **CropImage** - Image cropping utility
|
|
65
|
+
|
|
66
|
+
### Layout Components
|
|
67
|
+
- **Header** - Application header
|
|
68
|
+
- **Sidebar** - Navigation sidebar
|
|
69
|
+
- **Modal** - Modal dialog
|
|
70
|
+
- **ConfirmationModal** - Confirmation modal
|
|
71
|
+
|
|
72
|
+
### Calendar Components
|
|
73
|
+
- **QuarterView** - Calendar quarter view
|
|
74
|
+
|
|
75
|
+
### Icon Components
|
|
76
|
+
- 26 icon components available in `Icons/` directory
|
|
77
|
+
|
|
78
|
+
### Page Components
|
|
79
|
+
Located in `pages/` directory:
|
|
80
|
+
- **performers/** - Performer-related components
|
|
81
|
+
- **profile/** - Profile components
|
|
82
|
+
- **settings/** - Settings components
|
|
83
|
+
- **shows/** - Show/event components
|
|
84
|
+
|
|
85
|
+
## Testing
|
|
86
|
+
|
|
87
|
+
All components include:
|
|
88
|
+
- Unit tests using Vitest
|
|
89
|
+
- Storybook stories for visual testing
|
|
90
|
+
- Type definitions
|
|
91
|
+
|
|
92
|
+
## Version History
|
|
93
|
+
|
|
94
|
+
### 1.0.0 (Upcoming)
|
|
95
|
+
- Initial release
|
|
96
|
+
- Core components from performersportal
|
|
97
|
+
- Full test coverage
|
|
98
|
+
- Storybook documentation
|
package/dist/config.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/lib/config.js"],"names":[],"mappings":"AAAA,+BACiE;AAEjE,6CAE4C"}
|
package/dist/config.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"config.spec.d.ts","sourceRoot":"","sources":["../src/lib/config.spec.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
|
2
|
+
|
|
3
|
+
describe('config.js', () => {
|
|
4
|
+
beforeEach(() => {
|
|
5
|
+
vi.resetModules();
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
it('exports API_BASE_URL', async () => {
|
|
9
|
+
const config = await import('./config.js');
|
|
10
|
+
expect(config.API_BASE_URL).toBeDefined();
|
|
11
|
+
expect(typeof config.API_BASE_URL).toBe('string');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('exports PUBLIC_GOOGLE_MAPS_API_KEY', async () => {
|
|
15
|
+
const config = await import('./config.js');
|
|
16
|
+
expect(config.PUBLIC_GOOGLE_MAPS_API_KEY).toBeDefined();
|
|
17
|
+
expect(typeof config.PUBLIC_GOOGLE_MAPS_API_KEY).toBe('string');
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('uses default API_BASE_URL when env var not set', async () => {
|
|
21
|
+
const config = await import('./config.js');
|
|
22
|
+
expect(config.API_BASE_URL).toContain('get-micdrop.com');
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
it('uses default Google Maps key when env var not set', async () => {
|
|
26
|
+
const config = await import('./config.js');
|
|
27
|
+
expect(config.PUBLIC_GOOGLE_MAPS_API_KEY).toContain('AIzaSy');
|
|
28
|
+
});
|
|
29
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Form options for dropdowns used across the performers portal.
|
|
3
|
+
* Use these with Select and MultiSelect components instead of
|
|
4
|
+
* creating wrapper components like GenderInput or EthnicityDropdown.
|
|
5
|
+
*
|
|
6
|
+
* Example:
|
|
7
|
+
* import { GENDER_OPTIONS } from './formOptions';
|
|
8
|
+
* <Select items={GENDER_OPTIONS} label="Gender" />
|
|
9
|
+
*/
|
|
10
|
+
export const GENDER_OPTIONS: {
|
|
11
|
+
name: string;
|
|
12
|
+
value: number;
|
|
13
|
+
}[];
|
|
14
|
+
export const ETHNICITY_OPTIONS: {
|
|
15
|
+
name: string;
|
|
16
|
+
value: number;
|
|
17
|
+
}[];
|
|
18
|
+
//# sourceMappingURL=formOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formOptions.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;IAIE;AAEF;;;IAQE"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Form options for dropdowns used across the performers portal.
|
|
3
|
+
* Use these with Select and MultiSelect components instead of
|
|
4
|
+
* creating wrapper components like GenderInput or EthnicityDropdown.
|
|
5
|
+
*
|
|
6
|
+
* Example:
|
|
7
|
+
* import { GENDER_OPTIONS } from './formOptions';
|
|
8
|
+
* <Select items={GENDER_OPTIONS} label="Gender" />
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
export const GENDER_OPTIONS = [
|
|
12
|
+
{ name: "Male", value: 1 },
|
|
13
|
+
{ name: "Female", value: 2 },
|
|
14
|
+
{ name: "Non-Binary", value: 3 },
|
|
15
|
+
];
|
|
16
|
+
|
|
17
|
+
export const ETHNICITY_OPTIONS = [
|
|
18
|
+
{ name: "American Indian or Alaska Native", value: 0 },
|
|
19
|
+
{ name: "Asian", value: 1 },
|
|
20
|
+
{ name: "Black or African American", value: 2 },
|
|
21
|
+
{ name: "Hispanic or Latino", value: 3 },
|
|
22
|
+
{ name: "Middle Eastern or North African", value: 4 },
|
|
23
|
+
{ name: "Native Hawaiian or Pacific Islander", value: 5 },
|
|
24
|
+
{ name: "White", value: 6 },
|
|
25
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formOptions.spec.d.ts","sourceRoot":"","sources":["../../src/lib/constants/formOptions.spec.js"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from './formOptions.js';
|
|
3
|
+
|
|
4
|
+
describe('formOptions', () => {
|
|
5
|
+
describe('GENDER_OPTIONS', () => {
|
|
6
|
+
it('exports gender options array', () => {
|
|
7
|
+
expect(GENDER_OPTIONS).toBeDefined();
|
|
8
|
+
expect(Array.isArray(GENDER_OPTIONS)).toBe(true);
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
it('has three options', () => {
|
|
12
|
+
expect(GENDER_OPTIONS.length).toBe(3);
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('contains Male option with value 1', () => {
|
|
16
|
+
const male = GENDER_OPTIONS.find(opt => opt.name === 'Male');
|
|
17
|
+
expect(male).toBeDefined();
|
|
18
|
+
expect(male.value).toBe(1);
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('contains Female option with value 2', () => {
|
|
22
|
+
const female = GENDER_OPTIONS.find(opt => opt.name === 'Female');
|
|
23
|
+
expect(female).toBeDefined();
|
|
24
|
+
expect(female.value).toBe(2);
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('contains Non-Binary option with value 3', () => {
|
|
28
|
+
const nonBinary = GENDER_OPTIONS.find(opt => opt.name === 'Non-Binary');
|
|
29
|
+
expect(nonBinary).toBeDefined();
|
|
30
|
+
expect(nonBinary.value).toBe(3);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
it('each option has name and value properties', () => {
|
|
34
|
+
GENDER_OPTIONS.forEach(option => {
|
|
35
|
+
expect(option).toHaveProperty('name');
|
|
36
|
+
expect(option).toHaveProperty('value');
|
|
37
|
+
expect(typeof option.name).toBe('string');
|
|
38
|
+
expect(typeof option.value).toBe('number');
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
describe('ETHNICITY_OPTIONS', () => {
|
|
44
|
+
it('exports ethnicity options array', () => {
|
|
45
|
+
expect(ETHNICITY_OPTIONS).toBeDefined();
|
|
46
|
+
expect(Array.isArray(ETHNICITY_OPTIONS)).toBe(true);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('has seven options', () => {
|
|
50
|
+
expect(ETHNICITY_OPTIONS.length).toBe(7);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it('contains all expected ethnicities', () => {
|
|
54
|
+
const names = ETHNICITY_OPTIONS.map(opt => opt.name);
|
|
55
|
+
expect(names).toContain('American Indian or Alaska Native');
|
|
56
|
+
expect(names).toContain('Asian');
|
|
57
|
+
expect(names).toContain('Black or African American');
|
|
58
|
+
expect(names).toContain('Hispanic or Latino');
|
|
59
|
+
expect(names).toContain('Middle Eastern or North African');
|
|
60
|
+
expect(names).toContain('Native Hawaiian or Pacific Islander');
|
|
61
|
+
expect(names).toContain('White');
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
it('has values 0 through 6', () => {
|
|
65
|
+
const values = ETHNICITY_OPTIONS.map(opt => opt.value).sort((a, b) => a - b);
|
|
66
|
+
expect(values).toEqual([0, 1, 2, 3, 4, 5, 6]);
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
it('each option has name and value properties', () => {
|
|
70
|
+
ETHNICITY_OPTIONS.forEach(option => {
|
|
71
|
+
expect(option).toHaveProperty('name');
|
|
72
|
+
expect(option).toHaveProperty('value');
|
|
73
|
+
expect(typeof option.name).toBe('string');
|
|
74
|
+
expect(typeof option.value).toBe('number');
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('American Indian or Alaska Native has value 0', () => {
|
|
79
|
+
const option = ETHNICITY_OPTIONS.find(opt => opt.name === 'American Indian or Alaska Native');
|
|
80
|
+
expect(option.value).toBe(0);
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
it('White has value 6', () => {
|
|
84
|
+
const option = ETHNICITY_OPTIONS.find(opt => opt.name === 'White');
|
|
85
|
+
expect(option.value).toBe(6);
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export function initTelemetry(): void;
|
|
2
|
+
export function startSpan(name: any, options?: {}): any;
|
|
3
|
+
export function endSpan(span: any, status?: {
|
|
4
|
+
code: number;
|
|
5
|
+
}): void;
|
|
6
|
+
export function trackPageView(pagePath: any, pageTitle: any): void;
|
|
7
|
+
export function trackEvent(eventName: any, attributes?: {}): void;
|
|
8
|
+
export function trackPerformerAction(action: any, metadata?: {}): void;
|
|
9
|
+
export function trackError(error: any, context?: {}): void;
|
|
10
|
+
export function trackAPICall(method: any, endpoint: any, status: any, duration: any, attributes?: {}): void;
|
|
11
|
+
export function trackUserAction(action: any, metadata?: {}): void;
|
|
12
|
+
export function shutdownTelemetry(): Promise<void>;
|
|
13
|
+
//# sourceMappingURL=telemetry.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"telemetry.d.ts","sourceRoot":"","sources":["../src/lib/telemetry.js"],"names":[],"mappings":"AAkCA,sCA4HC;AAGD,wDAcC;AAGD;;SAMC;AAGD,mEAeC;AAGD,kEAcC;AAGD,uEAeC;AAGD,2DAmBC;AAGD,4GAkBC;AAGD,kEAeC;AAGD,mDASC"}
|
|
@@ -0,0 +1,358 @@
|
|
|
1
|
+
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
|
|
2
|
+
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
|
|
3
|
+
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
|
|
4
|
+
import { Resource } from '@opentelemetry/resources';
|
|
5
|
+
import { SEMRESATTRS_SERVICE_NAME, SEMRESATTRS_SERVICE_VERSION, SEMRESATTRS_DEPLOYMENT_ENVIRONMENT } from '@opentelemetry/semantic-conventions';
|
|
6
|
+
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
|
|
7
|
+
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
|
|
8
|
+
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
|
|
9
|
+
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
|
|
10
|
+
import { ZoneContextManager } from '@opentelemetry/context-zone';
|
|
11
|
+
import { B3Propagator } from '@opentelemetry/propagator-b3';
|
|
12
|
+
|
|
13
|
+
// Telemetry configuration from environment or defaults
|
|
14
|
+
const TELEMETRY_CONFIG = {
|
|
15
|
+
serviceName: import.meta.env.VITE_OTEL_SERVICE_NAME || 'jetbook-performersportal',
|
|
16
|
+
serviceVersion: import.meta.env.VITE_OTEL_SERVICE_VERSION || '1.0.0',
|
|
17
|
+
environment: import.meta.env.VITE_ENVIRONMENT || 'development',
|
|
18
|
+
otlpEndpoint: import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
|
|
19
|
+
tracesEnabled: import.meta.env.VITE_OTEL_TRACES_ENABLED !== 'false',
|
|
20
|
+
sampleRate: parseFloat(import.meta.env.VITE_OTEL_TRACES_SAMPLER_ARG || '0.1'), // 10% sampling by default
|
|
21
|
+
consoleDebug: import.meta.env.VITE_OTEL_DEBUG === 'true'
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
let tracer = null;
|
|
25
|
+
let tracerProvider = null;
|
|
26
|
+
|
|
27
|
+
// Helper to log telemetry events when debugging
|
|
28
|
+
function debugLog(message, data) {
|
|
29
|
+
if (TELEMETRY_CONFIG.consoleDebug) {
|
|
30
|
+
console.log(`[Telemetry] ${message}`, data || '');
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Initialize OpenTelemetry
|
|
35
|
+
export function initTelemetry() {
|
|
36
|
+
if (!TELEMETRY_CONFIG.tracesEnabled) {
|
|
37
|
+
console.log('[Telemetry] Tracing is disabled');
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
try {
|
|
42
|
+
// Create resource with service information
|
|
43
|
+
const resource = new Resource({
|
|
44
|
+
[SEMRESATTRS_SERVICE_NAME]: TELEMETRY_CONFIG.serviceName,
|
|
45
|
+
[SEMRESATTRS_SERVICE_VERSION]: TELEMETRY_CONFIG.serviceVersion,
|
|
46
|
+
[SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: TELEMETRY_CONFIG.environment,
|
|
47
|
+
'browser.user_agent': navigator.userAgent,
|
|
48
|
+
'browser.language': navigator.language,
|
|
49
|
+
'browser.platform': navigator.platform
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Create tracer provider
|
|
53
|
+
tracerProvider = new WebTracerProvider({
|
|
54
|
+
resource,
|
|
55
|
+
sampler: {
|
|
56
|
+
shouldSample: () => {
|
|
57
|
+
return {
|
|
58
|
+
decision: Math.random() < TELEMETRY_CONFIG.sampleRate ? 1 : 0,
|
|
59
|
+
attributes: []
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Configure OTLP exporter
|
|
66
|
+
const exporter = new OTLPTraceExporter({
|
|
67
|
+
url: TELEMETRY_CONFIG.otlpEndpoint,
|
|
68
|
+
headers: {
|
|
69
|
+
'Content-Type': 'application/json'
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// Add batch span processor
|
|
74
|
+
tracerProvider.addSpanProcessor(new BatchSpanProcessor(exporter, {
|
|
75
|
+
maxQueueSize: 100,
|
|
76
|
+
maxExportBatchSize: 50,
|
|
77
|
+
scheduledDelayMillis: 500,
|
|
78
|
+
exportTimeoutMillis: 30000
|
|
79
|
+
}));
|
|
80
|
+
|
|
81
|
+
// Set global provider
|
|
82
|
+
tracerProvider.register({
|
|
83
|
+
contextManager: new ZoneContextManager(),
|
|
84
|
+
propagator: new B3Propagator()
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
// Enable browser instrumentations
|
|
88
|
+
// These auto-register with the global tracer provider when instantiated and enabled
|
|
89
|
+
new DocumentLoadInstrumentation({
|
|
90
|
+
applyCustomAttributesOnSpan: {
|
|
91
|
+
documentLoad: (span) => {
|
|
92
|
+
span.setAttribute('page.path', window.location.pathname);
|
|
93
|
+
span.setAttribute('page.search', window.location.search);
|
|
94
|
+
span.setAttribute('page.hash', window.location.hash);
|
|
95
|
+
span.setAttribute('portal.type', 'performers');
|
|
96
|
+
},
|
|
97
|
+
documentFetch: (span) => {
|
|
98
|
+
span.setAttribute('document.referrer', document.referrer);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}).enable();
|
|
102
|
+
|
|
103
|
+
new FetchInstrumentation({
|
|
104
|
+
propagateTraceHeaderCorsUrls: [
|
|
105
|
+
/^http:\/\/localhost:8080\/.*/,
|
|
106
|
+
/^https:\/\/api\.jetbook\.com\/.*/,
|
|
107
|
+
/^https:\/\/.*\.get-micdrop\.com\/.*/
|
|
108
|
+
],
|
|
109
|
+
clearTimingResources: true,
|
|
110
|
+
applyCustomAttributesOnSpan: (span, request, response) => {
|
|
111
|
+
const url = new URL(request.url || '');
|
|
112
|
+
span.setAttribute('http.url.pathname', url.pathname);
|
|
113
|
+
span.setAttribute('http.url.search', url.search);
|
|
114
|
+
span.setAttribute('portal.type', 'performers');
|
|
115
|
+
|
|
116
|
+
if (response) {
|
|
117
|
+
span.setAttribute('http.response.status', response.status);
|
|
118
|
+
span.setAttribute('http.response.content_length', response.headers?.get('content-length') || 0);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}).enable();
|
|
122
|
+
|
|
123
|
+
new XMLHttpRequestInstrumentation({
|
|
124
|
+
propagateTraceHeaderCorsUrls: [
|
|
125
|
+
/^http:\/\/localhost:8080\/.*/,
|
|
126
|
+
/^https:\/\/api\.jetbook\.com\/.*/,
|
|
127
|
+
/^https:\/\/.*\.get-micdrop\.com\/.*/
|
|
128
|
+
],
|
|
129
|
+
clearTimingResources: true
|
|
130
|
+
}).enable();
|
|
131
|
+
|
|
132
|
+
new UserInteractionInstrumentation({
|
|
133
|
+
eventNames: ['click', 'submit', 'change'],
|
|
134
|
+
shouldPreventSpanCreation: (eventType, element, span) => {
|
|
135
|
+
// Skip telemetry for certain elements
|
|
136
|
+
if (element.classList?.contains('no-telemetry')) {
|
|
137
|
+
return true;
|
|
138
|
+
}
|
|
139
|
+
// Skip very frequent events
|
|
140
|
+
if (eventType === 'change' && element.tagName === 'INPUT' && element.type === 'text') {
|
|
141
|
+
return true;
|
|
142
|
+
}
|
|
143
|
+
return false;
|
|
144
|
+
}
|
|
145
|
+
}).enable();
|
|
146
|
+
|
|
147
|
+
// Get tracer instance
|
|
148
|
+
tracer = tracerProvider.getTracer(
|
|
149
|
+
TELEMETRY_CONFIG.serviceName,
|
|
150
|
+
TELEMETRY_CONFIG.serviceVersion
|
|
151
|
+
);
|
|
152
|
+
|
|
153
|
+
debugLog('Telemetry initialized', TELEMETRY_CONFIG);
|
|
154
|
+
console.log(`[Telemetry] Initialized with ${TELEMETRY_CONFIG.sampleRate * 100}% sampling rate`);
|
|
155
|
+
|
|
156
|
+
} catch (error) {
|
|
157
|
+
console.error('[Telemetry] Failed to initialize:', error);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// Create custom span for tracking specific operations
|
|
162
|
+
export function startSpan(name, options = {}) {
|
|
163
|
+
if (!tracer) return null;
|
|
164
|
+
|
|
165
|
+
const span = tracer.startSpan(name, {
|
|
166
|
+
...options,
|
|
167
|
+
attributes: {
|
|
168
|
+
'span.kind': 'internal',
|
|
169
|
+
'portal.type': 'performers',
|
|
170
|
+
...options.attributes
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
debugLog(`Started span: ${name}`, options.attributes);
|
|
175
|
+
return span;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
// End a span and set its status
|
|
179
|
+
export function endSpan(span, status = { code: 0 }) {
|
|
180
|
+
if (!span) return;
|
|
181
|
+
|
|
182
|
+
span.setStatus(status);
|
|
183
|
+
span.end();
|
|
184
|
+
debugLog(`Ended span: ${span.name}`, status);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Track page views (for SPAs)
|
|
188
|
+
export function trackPageView(pagePath, pageTitle) {
|
|
189
|
+
if (!tracer) return;
|
|
190
|
+
|
|
191
|
+
const span = tracer.startSpan('page_view', {
|
|
192
|
+
attributes: {
|
|
193
|
+
'page.path': pagePath,
|
|
194
|
+
'page.title': pageTitle || document.title,
|
|
195
|
+
'page.url': window.location.href,
|
|
196
|
+
'page.referrer': document.referrer,
|
|
197
|
+
'portal.type': 'performers'
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
span.end();
|
|
202
|
+
debugLog(`Tracked page view: ${pagePath}`);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// Track custom events
|
|
206
|
+
export function trackEvent(eventName, attributes = {}) {
|
|
207
|
+
if (!tracer) return;
|
|
208
|
+
|
|
209
|
+
const span = tracer.startSpan(`event.${eventName}`, {
|
|
210
|
+
attributes: {
|
|
211
|
+
'event.name': eventName,
|
|
212
|
+
'event.timestamp': new Date().toISOString(),
|
|
213
|
+
'portal.type': 'performers',
|
|
214
|
+
...attributes
|
|
215
|
+
}
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
span.end();
|
|
219
|
+
debugLog(`Tracked event: ${eventName}`, attributes);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
// Track performer-specific actions
|
|
223
|
+
export function trackPerformerAction(action, metadata = {}) {
|
|
224
|
+
if (!tracer) return;
|
|
225
|
+
|
|
226
|
+
const span = tracer.startSpan(`performer.${action}`, {
|
|
227
|
+
attributes: {
|
|
228
|
+
'performer.action': action,
|
|
229
|
+
'performer.metadata': JSON.stringify(metadata),
|
|
230
|
+
'portal.type': 'performers',
|
|
231
|
+
'page.url': window.location.href,
|
|
232
|
+
'timestamp': new Date().toISOString()
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
|
|
236
|
+
span.end();
|
|
237
|
+
debugLog(`Tracked performer action: ${action}`, metadata);
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
// Track errors
|
|
241
|
+
export function trackError(error, context = {}) {
|
|
242
|
+
if (!tracer) return;
|
|
243
|
+
|
|
244
|
+
const span = tracer.startSpan('error', {
|
|
245
|
+
attributes: {
|
|
246
|
+
'error.message': error.message || String(error),
|
|
247
|
+
'error.stack': error.stack,
|
|
248
|
+
'error.type': error.name || 'Error',
|
|
249
|
+
'error.context': JSON.stringify(context),
|
|
250
|
+
'page.url': window.location.href,
|
|
251
|
+
'portal.type': 'performers'
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
span.setStatus({ code: 2, message: error.message });
|
|
256
|
+
span.recordException(error);
|
|
257
|
+
span.end();
|
|
258
|
+
|
|
259
|
+
debugLog(`Tracked error: ${error.message}`, context);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
// Track API calls with custom attributes
|
|
263
|
+
export function trackAPICall(method, endpoint, status, duration, attributes = {}) {
|
|
264
|
+
if (!tracer) return;
|
|
265
|
+
|
|
266
|
+
const span = tracer.startSpan('api_call', {
|
|
267
|
+
attributes: {
|
|
268
|
+
'http.method': method,
|
|
269
|
+
'http.url': endpoint,
|
|
270
|
+
'http.status_code': status,
|
|
271
|
+
'http.duration_ms': duration,
|
|
272
|
+
'portal.type': 'performers',
|
|
273
|
+
...attributes
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
span.setStatus({ code: status >= 400 ? 2 : 0 });
|
|
278
|
+
span.end();
|
|
279
|
+
|
|
280
|
+
debugLog(`Tracked API call: ${method} ${endpoint}`, { status, duration });
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// Track user actions
|
|
284
|
+
export function trackUserAction(action, metadata = {}) {
|
|
285
|
+
if (!tracer) return;
|
|
286
|
+
|
|
287
|
+
const span = tracer.startSpan(`user.${action}`, {
|
|
288
|
+
attributes: {
|
|
289
|
+
'user.action': action,
|
|
290
|
+
'user.metadata': JSON.stringify(metadata),
|
|
291
|
+
'portal.type': 'performers',
|
|
292
|
+
'page.url': window.location.href,
|
|
293
|
+
'timestamp': new Date().toISOString()
|
|
294
|
+
}
|
|
295
|
+
});
|
|
296
|
+
|
|
297
|
+
span.end();
|
|
298
|
+
debugLog(`Tracked user action: ${action}`, metadata);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
// Shutdown telemetry gracefully
|
|
302
|
+
export async function shutdownTelemetry() {
|
|
303
|
+
if (tracerProvider) {
|
|
304
|
+
try {
|
|
305
|
+
await tracerProvider.shutdown();
|
|
306
|
+
console.log('[Telemetry] Shutdown complete');
|
|
307
|
+
} catch (error) {
|
|
308
|
+
console.error('[Telemetry] Shutdown error:', error);
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
// Connect client spans with SSR spans using trace context
|
|
314
|
+
function connectWithSSRTrace() {
|
|
315
|
+
// Check if we have trace context from SSR
|
|
316
|
+
const ssrTraceContext = window.__TRACE_CONTEXT__;
|
|
317
|
+
if (ssrTraceContext && tracer) {
|
|
318
|
+
// Create a span linked to the SSR span
|
|
319
|
+
const span = tracer.startSpan('client.performer.init', {
|
|
320
|
+
attributes: {
|
|
321
|
+
'span.kind': 'client',
|
|
322
|
+
'client.type': 'browser',
|
|
323
|
+
'portal.type': 'performers',
|
|
324
|
+
'ssr.trace_id': ssrTraceContext.traceId,
|
|
325
|
+
'ssr.span_id': ssrTraceContext.spanId
|
|
326
|
+
},
|
|
327
|
+
links: [{
|
|
328
|
+
context: {
|
|
329
|
+
traceId: ssrTraceContext.traceId,
|
|
330
|
+
spanId: ssrTraceContext.spanId,
|
|
331
|
+
traceFlags: ssrTraceContext.traceFlags || 0
|
|
332
|
+
}
|
|
333
|
+
}]
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
span.end();
|
|
337
|
+
debugLog('Connected to SSR trace', ssrTraceContext);
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
// Auto-initialize on module load if in browser environment
|
|
342
|
+
if (typeof window !== 'undefined') {
|
|
343
|
+
// Initialize telemetry when DOM is ready
|
|
344
|
+
if (document.readyState === 'loading') {
|
|
345
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
346
|
+
initTelemetry();
|
|
347
|
+
connectWithSSRTrace();
|
|
348
|
+
});
|
|
349
|
+
} else {
|
|
350
|
+
initTelemetry();
|
|
351
|
+
connectWithSSRTrace();
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
// Cleanup on page unload
|
|
355
|
+
window.addEventListener('beforeunload', () => {
|
|
356
|
+
shutdownTelemetry();
|
|
357
|
+
});
|
|
358
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export function initServerTelemetry(): void;
|
|
2
|
+
export function createSSRSpan(name: any, request: any, attributes?: {}): import("@opentelemetry/api").Span;
|
|
3
|
+
export function trackPerformerSSRDataLoad(loadFunction: any, context: any): (event: any) => Promise<any>;
|
|
4
|
+
export function extractTraceContext(request: any): import("@opentelemetry/api").Context;
|
|
5
|
+
export function injectTraceContext(response: any, span: any): any;
|
|
6
|
+
export function shutdownServerTelemetry(): Promise<void>;
|
|
7
|
+
export namespace performersPortalTelemetry {
|
|
8
|
+
function wrapLoad(loadFn: any, context: any): (event: any) => Promise<any>;
|
|
9
|
+
function wrapAction(actionFn: any, actionName: any): (event: any) => Promise<any>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=telemetry.server.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"telemetry.server.d.ts","sourceRoot":"","sources":["../src/lib/telemetry.server.js"],"names":[],"mappings":"AAyBA,4CAqDC;AAGD,2GAkBC;AAGD,6EACgB,UAAK,kBA6BpB;AAGD,wFASC;AAGD,kEAiBC;AAGD,yDASC;;IAKW,2EAA+D;IAG7D,sDACI,UAAK,kBAmBpB"}
|