Track room load duration (tldraw#6530)

Track room load duration and send some basic metrics. Also segment the
metrics based on the room size.

[Posthog
chart](https://eu.posthog.com/project/45921/insights/URk77Mgl?dashboard=127276&variables_override=%7B%7D)
- tried it on preview link for this PR.

### Change type

- [x] `improvement`

Author: MitjaBezensek

apps/dotcom/client/src/hooks/useRoomLoadTracking.ts

@@ -0,0 +1,37 @@
+import { ROOM_SIZE_LIMIT_MB } from '@tldraw/dotcom-shared'
+import { useRef } from 'react'
+import { Editor } from 'tldraw'
+import { trackEvent } from '../utils/analytics'
+
+function getFileSizeBucket(sizeMB: number): string {
+	if (sizeMB <= 1) return '0-1 MB'
+	if (sizeMB <= 5) return '1-5 MB'
+	if (sizeMB <= 10) return '5-10 MB'
+	return '10+ MB'
+}
+
+export function useRoomLoadTracking() {
+	const loadStartTime = useRef(Date.now())
+
+	return (editor: Editor) => {
+		const loadTime = Date.now() - loadStartTime.current
+		let estimatedFileSizeMB = 0
+		try {
+			const meta = editor.getDocumentSettings().meta
+			const storagePercentage =
+				typeof meta.storageUsedPercentage === 'number' ? meta.storageUsedPercentage : 0
+			// Calculate estimated file size based on storage percentage
+			estimatedFileSizeMB = (storagePercentage / 100) * ROOM_SIZE_LIMIT_MB
+		} catch (error) {
+			console.warn('Failed to get storage percentage for analytics:', error)
+		}
+
+		const fileSizeBucket = getFileSizeBucket(estimatedFileSizeMB)
+
+		// Send analytics data to PostHog
+		trackEvent('room_load_duration', {
+			load_time_ms: loadTime,
+			file_size_bucket: fileSizeBucket,
+		})
+	}
+}

apps/dotcom/client/src/tla/components/TlaEditor/TlaEditor.tsx

@@ -23,6 +23,7 @@ import {
 } from 'tldraw'
 import { ThemeUpdater } from '../../../components/ThemeUpdater/ThemeUpdater'
 import { useOpenUrlAndTrack } from '../../../hooks/useOpenUrlAndTrack'
+import { useRoomLoadTracking } from '../../../hooks/useRoomLoadTracking'
 import { useHandleUiEvents } from '../../../utils/analytics'
 import { assetUrls } from '../../../utils/assetUrls'
 import { MULTIPLAYER_SERVER } from '../../../utils/config'
@@ -128,8 +129,11 @@ function TlaEditorInner({ fileSlug, deepLinks }: TlaEditorProps) {
 		})
 	}, [hideAllShapes])
 
+	const trackRoomLoaded = useRoomLoadTracking()
+
 	const handleMount = useCallback(
 		(editor: Editor) => {
+			trackRoomLoaded(editor)
 			;(window as any).app = app
 			;(window as any).editor = editor
 			// Register the editor globally
@@ -185,7 +189,7 @@ function TlaEditorInner({ fileSlug, deepLinks }: TlaEditorProps) {
 				cleanup()
 			}
 		},
-		[addDialog, app, fileId, remountImageShapes, setIsReady]
+		[addDialog, trackRoomLoaded, app, fileId, remountImageShapes, setIsReady]
 	)
 
 	const user = useTldrawUser()

apps/dotcom/client/src/tla/components/TlaEditor/TlaLegacyFileEditor.tsx

@@ -10,6 +10,7 @@ import { Editor, TLComponents, Tldraw } from 'tldraw'
 import { StoreErrorScreen } from '../../../components/StoreErrorScreen'
 import { ThemeUpdater } from '../../../components/ThemeUpdater/ThemeUpdater'
 import { useLegacyUrlParams } from '../../../hooks/useLegacyUrlParams'
+import { useRoomLoadTracking } from '../../../hooks/useRoomLoadTracking'
 import { trackEvent, useHandleUiEvents } from '../../../utils/analytics'
 import { assetUrls } from '../../../utils/assetUrls'
 import { MULTIPLAYER_SERVER } from '../../../utils/config'
@@ -85,8 +86,11 @@ function TlaEditorInner({
 	const isReadonly =
 		roomOpenMode === ROOM_OPEN_MODE.READ_ONLY || roomOpenMode === ROOM_OPEN_MODE.READ_ONLY_LEGACY
 
+	const trackRoomLoaded = useRoomLoadTracking()
+
 	const handleMount = useCallback(
 		(editor: Editor) => {
+			trackRoomLoaded(editor)
 			if (!isReadonly) {
 				;(window as any).app = editor
 				;(window as any).editor = editor
@@ -96,7 +100,7 @@ function TlaEditorInner({
 			editor.registerExternalAssetHandler('url', createAssetFromUrl)
 			setIsReady()
 		},
-		[isReadonly, setIsReady]
+		[isReadonly, trackRoomLoaded, setIsReady]
 	)
 
 	if (storeWithStatus.error) {

apps/dotcom/sync-worker/src/TLDrawDurableObject.ts

@@ -12,6 +12,7 @@ import {
 	READ_ONLY_PREFIX,
 	ROOM_OPEN_MODE,
 	ROOM_PREFIX,
+	ROOM_SIZE_LIMIT_MB,
 	SNAPSHOT_PREFIX,
 	TlaFile,
 	type RoomOpenMode,
@@ -84,7 +85,6 @@ async function canAccessTestProductionFile(
 }
 
 const MB = 1024 * 1024
-const ROOM_SIZE_LIMIT_MB = 25
 
 export class TLDrawDurableObject extends DurableObject {
 	// A unique identifier for this instance of the Durable Object

packages/dotcom-shared/src/constants.ts

@@ -1 +1,3 @@
 export const MAX_NUMBER_OF_FILES = 200
+
+export const ROOM_SIZE_LIMIT_MB = 25