Build a mechanism to E2E telemetry

.circleci/config.yml

@@ -419,7 +419,7 @@ jobs:
       class: medium+
       name: sb_node_16_browsers
     environment:
-        NODE_OPTIONS: --max_old_space_size=6144
+      NODE_OPTIONS: --max_old_space_size=6144
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout
@@ -495,9 +495,18 @@ jobs:
           clone_options: '--depth 1 --verbose'
       - attach_workspace:
           at: .
+      - run:
+          name: Starting Event Collector
+          command: yarn ts-node ./event-log-collector.ts
+          working_directory: scripts
+          background: true
       - run:
           name: Building Sandboxes
           command: yarn task --task build --template $(yarn get-template << pipeline.parameters.workflow >> build) --no-link --start-from=never --junit
+      - run:
+          name: Verifying Telemetry
+          command: yarn ts-node ./event-log-checker build $(yarn get-template << pipeline.parameters.workflow >> build)
+          working_directory: scripts
       - report-workflow-on-failure:
           template: $(yarn get-template << pipeline.parameters.workflow >> build)
       - store_test_results:

code/lib/telemetry/src/telemetry.ts

@@ -4,7 +4,7 @@ import { nanoid } from 'nanoid';
 import type { Options, TelemetryData } from './types';
 import { getAnonymousProjectId } from './anonymous-id';
 
-const URL = 'https://storybook.js.org/event-log';
+const URL = process.env.STORYBOOK_TELEMETRY_URL || 'https://storybook.js.org/event-log';
 
 const fetch = retry(originalFetch);
 

scripts/event-log-checker.ts

@@ -0,0 +1,57 @@
+import assert from 'assert';
+import fetch from 'node-fetch';
+import { allTemplates } from '../code/lib/cli/src/repro-templates';
+
+const PORT = process.env.PORT || 6007;
+
+const eventTypeExpectations = {
+  build: {},
+};
+
+async function run() {
+  const [eventType, templateName] = process.argv.slice(2);
+
+  if (!eventType || !templateName) {
+    throw new Error(
+      `Need eventType and templateName; call with ./event-log-checker <eventType> <templateName>`
+    );
+  }
+
+  const expectation = eventTypeExpectations[eventType as keyof typeof eventTypeExpectations];
+  if (!expectation) throw new Error(`Unexpected eventType '${eventType}'`);
+
+  const template = allTemplates[templateName as keyof typeof allTemplates];
+  if (!template) throw new Error(`Unexpected template '${templateName}'`);
+
+  const events = await (await fetch(`http://localhost:${PORT}/event-log`)).json();
+
+  assert.equal(events.length, 2);
+
+  const [bootEvent, mainEvent] = events;
+
+  assert.equal(bootEvent.eventType, 'boot');
+  assert.equal(bootEvent.payload?.eventType, eventType);
+
+  assert.equal(mainEvent.eventType, eventType);
+  assert.notEqual(mainEvent.eventId, bootEvent.eventId);
+  assert.equal(mainEvent.sessionId, bootEvent.sessionId);
+
+  const {
+    expected: { renderer, builder, framework },
+  } = template;
+
+  assert.equal(mainEvent.metadata.renderer, renderer);
+  assert.equal(mainEvent.metadata.builder, builder);
+  assert.equal(mainEvent.metadata.framework.name, framework);
+}
+
+export {};
+
+if (require.main === module) {
+  run()
+    .then(() => process.exit(0))
+    .catch((err) => {
+      console.log(err);
+      process.exit(1);
+    });
+}

scripts/event-log-collector.ts

@@ -0,0 +1,22 @@
+import express from 'express';
+
+const PORT = process.env.PORT || 6007;
+
+const server = express();
+server.use(express.json());
+
+const events: Record<string, unknown>[] = [];
+server.post('/event-log', (req, res) => {
+  console.log(`Received event ${req.body.eventType}`);
+  events.push(req.body);
+  res.end('OK');
+});
+
+server.get('/event-log', (req, res) => {
+  console.log(`Sending ${events.length} events`);
+  res.json(events);
+});
+
+server.listen(PORT, () => {
+  console.log(`Event log listening on ${PORT}`);
+});

scripts/tasks/sandbox-parts.ts

@@ -70,7 +70,6 @@ export const create: Task['run'] = async (
 
   const mainConfig = await readMainConfig({ cwd });
 
-  mainConfig.setFieldValue(['core', 'disableTelemetry'], true);
   if (template.expected.builder === '@storybook/builder-vite') setSandboxViteFinal(mainConfig);
   await writeConfig(mainConfig);
 };
@@ -109,7 +108,8 @@ export const install: Task['run'] = async ({ sandboxDir }, { link, dryRun, debug
   logger.info(`🔢 Adding package scripts:`);
   await updatePackageScripts({
     cwd,
-    prefix: 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main"',
+    prefix:
+      'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" STORYBOOK_TELEMETRY_URL="http://localhost:6007/event-log"',
   });
 };