chore(DRAFT): make the @packages/telemetry an independent bundle

guides/esm-migration.md

@@ -65,7 +65,7 @@ When migrating some of these projects away from the `ts-node` entry [see `@packa
 - [ ] packages/server **PARTIAL** - many source/test files in JS. highest priority
 - [ ] packages/socket **PARTIAL** - entry point is JS. Tests are JS
 - [x] packages/stderr-filtering ✅ **COMPLETED**
-- [ ] packages/telemetry **PARTIAL** - entry point is JS
+- [x] packages/telemetry ✅ **COMPLETED**
 - [ ] packages/ts **PARTIAL** - ultimate goal is removal and likely not worth the effort to convert
 - [x] packages/types ✅ **COMPLETED**
 - [x] packages/v8-snapshot-require

packages/app/src/main.ts

@@ -13,7 +13,7 @@ import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 import { createWebsocket } from './runner'
 import { getRunnerConfigFromWindow } from './runner/get-runner-config-from-window'
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 // Grab the time just before loading config to include that in the cypress:app span
 const now = performance.now()

packages/app/src/runner/event-manager.ts

@@ -14,7 +14,7 @@ import { useStudioStore } from '../store/studio-store'
 import { getAutIframeModel } from '.'
 import { handlePausing } from './events/pausing'
 import { addTelemetryListeners } from './events/telemetry'
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 import { addCaptureProtocolListeners } from './events/capture-protocol'
 import { getRunnerConfigFromWindow } from './get-runner-config-from-window'
 import { usePromptStore } from '../store/prompt-store'

packages/app/src/runner/events/telemetry.ts

@@ -1,4 +1,4 @@
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 export const addTelemetryListeners = (Cypress: Cypress.Cypress) => {
   Cypress.on('test:before:run', (attributes, test) => {

packages/driver/src/cypress.ts

@@ -48,7 +48,7 @@ import type { CachedTestState, ReporterRunState, RunState } from '@packages/type
 import { DocumentDomainInjection } from '@packages/network/lib/document-domain-injection'
 import { setSpecContentSecurityPolicy } from './util/privileged_channel'
 
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 const debug = debugFn('cypress:driver:cypress')
 

packages/driver/src/main.ts

@@ -4,7 +4,7 @@ import './config/bluebird'
 import './config/jquery'
 import './config/lodash'
 import $Cypress from './cypress'
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 // Telemetry has already been initialized in the 'app' package
 // but since this is a different package we have to link up the instances.

packages/proxy/lib/network-proxy.ts

@@ -55,7 +55,7 @@ export class NetworkProxy {
       isVerbose: true,
     })
 
-    await this.http.handleHttpRequest(req, res, span).finally(() => {
+    await this.http.handleHttpRequest(req, res, span || undefined).finally(() => {
       span?.end()
     })
   }

packages/telemetry/.gitignore

@@ -0,0 +1,4 @@
+cjs/
+esm/
+browser/
+!src/browser

packages/telemetry/README.md

@@ -140,18 +140,18 @@ const { OTLPTraceExporterIPC } = require('@packages/telemetry')
 
 ### Browser
 
-To access the browser telemetry singleton use the browser export directly.
+To access the browser telemetry singleton use the browser export.
 
 ```js
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 telemetry.init({options})
 ```
 
 The browser singleton is also stored on window, in some cases when the telemetry package is included in multiple packages you can use the `attach` method to retrieve and setup the singleton from the instance saved on window.
 
 ```js
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 
 telemetry.attach()
 ```
@@ -198,7 +198,7 @@ const { telemetry } = require('@packages/telemetry')
 Browser:
 
 ```js
-import { telemetry } from '@packages/telemetry/src/browser'
+import { telemetry } from '@packages/telemetry/browser/client'
 ```
 
 ### Spans
@@ -290,4 +290,12 @@ The metrics api is tbd.
 ## Open Telemetry Links
 
 * [otel docs](https://opentelemetry.io/docs/)
-* [otel sdk](https://open-telemetry.github.io/opentelemetry-js/index.html)
+* [otel sdk](https://open-telemetry.github.io/opentelemetry-js/index.html)
+
+###  Bundling
+
+For the frontend telemetry collector, we use `rollup` to bundle the telemetry collector for frontend consumption. This DOES ship with the binary.
+
+For the server, we bundle a CommonJS version to be used in the Node.js context. 
+
+We also build an ESM version of `@packages/scaffold-config` for the `node` client but it isn't currently in use as the consumption server-side is CommonJS currently.

packages/telemetry/package.json

@@ -3,12 +3,16 @@
   "version": "0.0.0-development",
   "description": "open telemetry wrapper used throughout the cypress monorepo to instrument the cypress app",
   "private": true,
-  "main": "dist/node.js",
-  "browser": "src/browser.ts",
+  "main": "cjs/node.js",
   "scripts": {
-    "build": "tsc",
-    "check-ts": "tsc --noEmit && yarn -s tslint",
-    "clean": "rimraf dist",
+    "build": "yarn build:esm && yarn build:cjs && yarn build:browser",
+    "build-prod": "yarn build",
+    "build:browser": "rimraf browser && rollup -c rollup.config.mjs",
+    "build:cjs": "rimraf cjs && tsc -p tsconfig.cjs.json",
+    "build:esm": "rimraf esm && tsc -p tsconfig.esm.json",
+    "check-ts": "tsc -p tsconfig.cjs.json --noEmit && yarn -s tslint -p tsconfig.cjs.json",
+    "clean": "rimraf esm cjs",
+    "clean-deps": "rimraf node_modules",
     "test": "yarn test-unit",
     "test-debug": "vitest --inspect-brk --no-file-parallelism --test-timeout=0",
     "test-unit": "vitest run",
@@ -28,12 +32,18 @@
   },
   "devDependencies": {
     "@packages/ts": "0.0.0-development",
+    "@rollup/plugin-typescript": "12.0.0",
+    "rimraf": "6.0.1",
+    "rollup": "4.52.0",
+    "typescript": "5.6.3",
     "vitest": "^3.2.4"
   },
   "files": [
-    "dist",
-    "src"
+    "esm",
+    "cjs",
+    "browser"
   ],
-  "types": "src/node.ts",
+  "types": "cjs/node.d.ts",
+  "module": "esm/node.js",
   "nx": {}
 }

packages/telemetry/rollup.config.mjs

@@ -0,0 +1,20 @@
+import typescript from '@rollup/plugin-typescript'
+
+// inline all the values/imports from the entry point client.ts into the browser/client.js bundle
+// and provides declarations for the browser/client.d.ts bundle
+const config = [
+  {
+    input: 'src/client.ts',
+    output: {
+      file: 'browser/client.js',
+      format: 'esm',
+    },
+    plugins: [
+      typescript({
+        tsconfig: 'tsconfig.browser.json',
+      }),
+    ],
+  },
+]
+
+export default config

packages/telemetry/src/browser.ts → packages/telemetry/src/client.ts

@@ -1,6 +1,6 @@
 import type { Span, Attributes } from '@opentelemetry/api'
-import type { startSpanOptions, findActiveSpanOptions, contextObject } from './index'
-import { Telemetry as TelemetryClass, TelemetryNoop } from './index'
+import type { startSpanOptions, findActiveSpanOptions, contextObject } from './telemetry/index'
+import { Telemetry as TelemetryClass, TelemetryNoop } from './telemetry/index'
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
 import { browserDetectorSync } from '@opentelemetry/resources'
 import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'

packages/telemetry/src/node.ts

@@ -1,12 +1,12 @@
 import type { Span } from '@opentelemetry/api'
-import type { startSpanOptions, findActiveSpanOptions, contextObject } from './index'
+import type { startSpanOptions, findActiveSpanOptions, contextObject } from './telemetry/index'
 import {
   envDetectorSync, hostDetectorSync, osDetectorSync, processDetectorSync,
 } from '@opentelemetry/resources'
 import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node'
 import { circleCiDetectorSync } from './detectors/circleCiDetectorSync'
-import { enabledValues, Telemetry as TelemetryClass, TelemetryNoop } from './index'
+import { enabledValues, Telemetry as TelemetryClass, TelemetryNoop } from './telemetry/index'
 import { OTLPTraceExporter as OTLPTraceExporterCloud } from './span-exporters/cloud-span-exporter'
 import { OTLPTraceExporter as OTLPTraceExporterIpc } from './span-exporters/ipc-span-exporter'
 

packages/telemetry/src/index.ts → packages/telemetry/src/telemetry/index.ts

@@ -1,8 +1,8 @@
 import openTelemetry from '@opentelemetry/api'
 import { detectResourcesSync, Resource } from '@opentelemetry/resources'
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
-import { OnStartSpanProcessor } from './processors/on-start-span-processor'
-import { ConsoleTraceLinkExporter } from './span-exporters/console-trace-link-exporter'
+import { OnStartSpanProcessor } from '../processors/on-start-span-processor'
+import { ConsoleTraceLinkExporter } from '../span-exporters/console-trace-link-exporter'
 
 import type { Span, SpanOptions, Tracer, Context, Attributes } from '@opentelemetry/api'
 import type { BasicTracerProvider, SimpleSpanProcessor, BatchSpanProcessor, SpanExporter } from '@opentelemetry/sdk-trace-base'
@@ -350,29 +350,31 @@ export class Telemetry implements TelemetryApi {
  * all operations.
  */
 export class TelemetryNoop implements TelemetryApi {
-  startSpan () {
+  startSpan (arg: startSpanOptions): Span | undefined {
     return undefined
   }
-  getSpan () {
+  getSpan (name: string): Span | undefined {
     return undefined
   }
-  findActiveSpan () {
+  findActiveSpan (fn: findActiveSpanOptions): Span | undefined {
     return undefined
   }
-  endActiveSpanAndChildren () {
+  endActiveSpanAndChildren (span?: Span | undefined): void {
     return undefined
   }
   getActiveContextObject (): contextObject {
     return {}
   }
-  getResources () {
+  getResources (): Attributes {
     return {}
   }
-  shutdown () {
+  shutdown (): Promise<void> {
     return Promise.resolve()
   }
-  getExporter () {
+  getExporter (): SpanExporter | undefined {
+    return undefined
+  }
+  setRootContext (rootContextObject?: contextObject): void {
     return undefined
   }
-  setRootContext () {}
 }

packages/telemetry/test/browser.spec.ts

@@ -2,8 +2,8 @@
 global.window = {}
 
 import { describe, it, expect, beforeAll } from 'vitest'
-import { telemetry } from '../src/browser'
-import { Telemetry as TelemetryClass } from '../src/index'
+import { telemetry } from '../src/client'
+import { Telemetry as TelemetryClass } from '../src/telemetry/index'
 
 describe('telemetry is disabled', () => {
   describe('init', () => {