Merge pull request #32770 from storybookjs/shilman/preview-first-load

Core: Add `preview-first-load` telemetry
(cherry picked from commit 124987d)

Author: yannbf

code/core/src/core-events/index.ts

@@ -58,6 +58,8 @@ enum events {
   // A global was just updated
   GLOBALS_UPDATED = 'globalsUpdated',
   REGISTER_SUBSCRIPTION = 'registerSubscription',
+  // Preview initialized for first-load-event
+  PREVIEW_INITIALIZED = 'previewInitialized',
   // Tell the manager that the user pressed a key in the preview
   PREVIEW_KEYDOWN = 'previewKeydown',
   // Tell the preview that the builder is in progress
@@ -111,6 +113,7 @@ export const {
   PLAY_FUNCTION_THREW_EXCEPTION,
   UNHANDLED_ERRORS_WHILE_PLAYING,
   PRELOAD_ENTRIES,
+  PREVIEW_INITIALIZED,
   PREVIEW_BUILDER_PROGRESS,
   PREVIEW_KEYDOWN,
   REGISTER_SUBSCRIPTION,

code/core/src/core-server/presets/common-preset.ts

@@ -29,6 +29,7 @@ import { dedent } from 'ts-dedent';
 
 import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel';
 import { initFileSearchChannel } from '../server-channel/file-search-channel';
+import { initPreviewInitializedChannel } from '../server-channel/preview-initialized-channel';
 import { defaultStaticDirs } from '../utils/constants';
 import { initializeSaveStory } from '../utils/save-story/save-story';
 import { parseStaticDir } from '../utils/server-statics';
@@ -257,6 +258,7 @@ export const experimental_serverChannel = async (
 
   initFileSearchChannel(channel, options, coreOptions);
   initCreateNewStoryChannel(channel, options, coreOptions);
+  initPreviewInitializedChannel(channel, options, coreOptions);
 
   return channel;
 };

code/core/src/core-server/server-channel/preview-initialized-channel.ts

@@ -0,0 +1,31 @@
+import type { Channel } from 'storybook/internal/channels';
+import { PREVIEW_INITIALIZED } from 'storybook/internal/core-events';
+import { telemetry } from 'storybook/internal/telemetry';
+import type { CoreConfig, Options } from 'storybook/internal/types';
+
+import { getLastEvents } from '../../telemetry/event-cache';
+import { getSessionId } from '../../telemetry/session-id';
+
+export function initPreviewInitializedChannel(
+  channel: Channel,
+  options: Options,
+  _coreConfig: CoreConfig
+) {
+  channel.on(PREVIEW_INITIALIZED, async ({ userAgent }) => {
+    if (!options.disableTelemetry) {
+      try {
+        const sessionId = await getSessionId();
+        const lastEvents = await getLastEvents();
+        const lastInit = lastEvents.init;
+        const lastPreviewFirstLoad = lastEvents['preview-first-load'];
+        if (!lastPreviewFirstLoad) {
+          const isInitSession = lastInit?.body.sessionId === sessionId;
+          const timeSinceInit = lastInit ? Date.now() - lastInit.body.timestamp : undefined;
+          telemetry('preview-first-load', { timeSinceInit, isInitSession, userAgent });
+        }
+      } catch (e) {
+        // do nothing
+      }
+    }
+  });
+}

code/core/src/manager/globals/exports.ts

@@ -618,6 +618,7 @@ export default {
     'PLAY_FUNCTION_THREW_EXCEPTION',
     'PRELOAD_ENTRIES',
     'PREVIEW_BUILDER_PROGRESS',
+    'PREVIEW_INITIALIZED',
     'PREVIEW_KEYDOWN',
     'REGISTER_SUBSCRIPTION',
     'REQUEST_WHATS_NEW_DATA',

code/core/src/preview-api/modules/preview-web/Preview.tsx

@@ -9,6 +9,7 @@ import {
   FORCE_REMOUNT,
   FORCE_RE_RENDER,
   GLOBALS_UPDATED,
+  PREVIEW_INITIALIZED,
   RESET_STORY_ARGS,
   type RequestData,
   type ResponseData,
@@ -128,6 +129,9 @@ export class Preview<TRenderer extends Renderer> {
       const projectAnnotations = await this.getProjectAnnotationsOrRenderError();
       await this.runBeforeAllHook(projectAnnotations);
       await this.initializeWithProjectAnnotations(projectAnnotations);
+      // eslint-disable-next-line compat/compat
+      const userAgent = globalThis?.navigator?.userAgent;
+      await this.channel.emit(PREVIEW_INITIALIZED, { userAgent });
     } catch (err) {
       this.rejectStoreInitializationPromise(err as Error);
     }

code/core/src/telemetry/event-cache.ts

@@ -24,8 +24,12 @@ export const set = async (eventType: EventType, body: any) => {
 };
 
 export const get = async (eventType: EventType) => {
-  const lastEvents = await cache.get('lastEvents');
-  return lastEvents?.[eventType];
+  const lastEvents = await getLastEvents();
+  return lastEvents[eventType];
+};
+
+export const getLastEvents = async () => {
+  return (await cache.get('lastEvents')) || {};
 };
 
 const upgradeFields = (event: any): UpgradeSummary => {

code/core/src/telemetry/telemetry.ts

@@ -97,17 +97,13 @@ export async function sendTelemetry(
   try {
     request = prepareRequest(data, context, options);
     tasks.push(request);
-    if (options.immediate) {
-      await Promise.all(tasks);
-    } else {
-      await request;
-    }
 
     const sessionId = await getSessionId();
     const eventId = nanoid();
     const body = { ...rest, eventType, eventId, sessionId, metadata, payload, context };
 
-    await saveToCache(eventType, body);
+    const waitFor = options.immediate ? tasks : [request];
+    await Promise.all([...waitFor, saveToCache(eventType, body)]);
   } catch (err) {
     //
   } finally {

code/core/src/telemetry/types.ts

@@ -31,7 +31,8 @@ export type EventType =
   | 'test-run'
   | 'addon-onboarding'
   | 'onboarding-survey'
-  | 'mocking';
+  | 'mocking'
+  | 'preview-first-load';
 
 export interface Dependency {
   version: string | undefined;