Merge pull request #126 from cloudflare/send-correlation-id

Send correlation id
cloudflare · Oct 4, 2024 · 036b9d6 · 036b9d6
2 parents 787a098 + 389d998
commit 036b9d6
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/app/routes/_room.tsx b/app/routes/_room.tsx
@@ -7,6 +7,7 @@ import invariant from 'tiny-invariant'
 import { EnsureOnline } from '~/components/EnsureOnline'
 import { EnsurePermissions } from '~/components/EnsurePermissions'
 import { Icon } from '~/components/Icon/Icon'
+import { Spinner } from '~/components/Spinner'
 import { useStateObservable, useSubscribedState } from '~/hooks/rxjsHooks'
 
 import { usePeerConnection } from '~/hooks/usePeerConnection'
@@ -74,12 +75,28 @@ export default function RoomWithPermissions() {
 					</div>
 				}
 			>
-				<Room />
+				<RoomPreparation />
 			</EnsureOnline>
 		</EnsurePermissions>
 	)
 }
 
+function RoomPreparation() {
+	const { mode } = useLoaderData<typeof loader>()
+	const { roomName } = useParams()
+	invariant(roomName)
+	const userMedia = useUserMedia(mode)
+	const room = useRoom({ roomName, userMedia })
+
+	return room.roomState.meetingId ? (
+		<Room room={room} userMedia={userMedia} />
+	) : (
+		<div className="grid place-items-center h-full">
+			<Spinner className="text-gray-500" />
+		</div>
+	)
+}
+
 function tryToGetDimensions(videoStreamTrack?: MediaStreamTrack) {
 	if (
 		videoStreamTrack === undefined ||
@@ -98,14 +115,18 @@ function tryToGetDimensions(videoStreamTrack?: MediaStreamTrack) {
 	return { height, width }
 }
 
-function Room() {
+interface RoomProps {
+	room: ReturnType<typeof useRoom>
+	userMedia: ReturnType<typeof useUserMedia>
+}
+
+function Room({ room, userMedia }: RoomProps) {
 	const [joined, setJoined] = useState(false)
 	const [dataSaverMode, setDataSaverMode] = useState(false)
 	const { roomName } = useParams()
 	invariant(roomName)
 
 	const {
-		mode,
 		userDirectoryUrl,
 		traceLink,
 		feedbackEnabled,
@@ -117,11 +138,14 @@ function Room() {
 		maxApiHistory = 100,
 	} = useLoaderData<typeof loader>()
 
-	const userMedia = useUserMedia(mode)
-	const room = useRoom({ roomName, userMedia })
+	const params = new URLSearchParams(apiExtraParams)
+
+	invariant(room.roomState.meetingId, 'Meeting ID cannot be missing')
+	params.set('correlationId', room.roomState.meetingId)
+
 	const { peer, iceConnectionState } = usePeerConnection({
 		maxApiHistory,
-		apiExtraParams,
+		apiExtraParams: params.toString(),
 		iceServers,
 		apiBase: '/api/calls',
 	})

diff --git a/app/utils/rxjs/RxjsPeer.client.ts b/app/utils/rxjs/RxjsPeer.client.ts
@@ -182,7 +182,7 @@ export class RxjsPeer {
 		console.debug('🆕 creating new session')
 		const { apiBase } = this.config
 		const response = await this.fetchWithRecordedHistory(
-			`${apiBase}/sessions/new?SESSION`,
+			`${apiBase}/sessions/new?CreatingSession&${this.config.apiExtraParams}`,
 			{ method: 'POST' }
 		)
 		if (response.status > 400) {
@@ -260,7 +260,7 @@ export class RxjsPeer {
 								})),
 							}
 							const response = await this.fetchWithRecordedHistory(
-								`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PUSHING`,
+								`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PushingTrack&${this.config.apiExtraParams}`,
 								{
 									method: 'POST',
 									body: JSON.stringify(requestBody),
@@ -393,7 +393,7 @@ export class RxjsPeer {
 						this.taskScheduler.schedule(async () => {
 							const newTrackResponse: TracksResponse =
 								await this.fetchWithRecordedHistory(
-									`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PULLING`,
+									`${this.config.apiBase}/sessions/${sessionId}/tracks/new?PullingTrack&${this.config.apiExtraParams}`,
 									{
 										method: 'POST',
 										body: JSON.stringify({
@@ -434,7 +434,7 @@ export class RxjsPeer {
 
 								const renegotiationResponse =
 									await this.fetchWithRecordedHistory(
-										`${this.config.apiBase}/sessions/${sessionId}/renegotiate`,
+										`${this.config.apiBase}/sessions/${sessionId}/renegotiate?${this.config.apiExtraParams}`,
 										{
 											method: 'PUT',
 											body: JSON.stringify({
@@ -537,7 +537,7 @@ export class RxjsPeer {
 			force: false,
 		}
 		const response = await this.fetchWithRecordedHistory(
-			`${apiBase}/sessions/${sessionId}/tracks/close`,
+			`${apiBase}/sessions/${sessionId}/tracks/close?${this.config.apiExtraParams}`,
 			{
 				method: 'PUT',
 				body: JSON.stringify(requestBody),