Use tail_url to power Workers Playground logging (#11435)

* Return tail_url from playground-preview-worker

* Create metal-garlics-stare.md

* Add test

* Switch out logs in the playground

* fix lockfile

* fix lockfile

* increase test timeout

* use sed instead of grep

* use sed instead of grep

* Make a new array

* Fix URL extraction

* Apply suggestion from @edmundhung

Co-authored-by: Edmund Hung <[email protected]>

* Create fifty-snakes-drop.md

---------

Co-authored-by: Edmund Hung <[email protected]>

Author: penalosa

.changeset/fifty-snakes-drop.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/workers-playground": patch
+---
+
+Use `tail_url` to power Workers Playground logging

.changeset/metal-garlics-stare.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/playground-preview-worker": minor
+---
+
+Return `tail_url` from Worker uploads

.github/workflows/deploy-pages-previews.yml

@@ -55,7 +55,7 @@ jobs:
         run: |
           output=$(pnpm --filter @cloudflare/chrome-devtools-patches run deploy)
           echo "Extracting deployed URL from command output"
-          url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+')
+          url=$(echo "$output" | sed -nE "s/.*Take a peek over at (\S+).*/\1/p")
           echo "Extracted URL: $url"
           echo "VITE_DEVTOOLS_PREVIEW_URL=$url" >> $GITHUB_ENV
         env:
@@ -74,7 +74,7 @@ jobs:
         run: |
           output=$(pnpm --filter workers-playground run build:testing && pnpm --filter workers-playground run deploy)
           echo "Extracting deployed URL from command output"
-          url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+')
+          url=$(echo "$output" | sed -nE 's/.*Take a peek over at (https?:\/\/[^ ]+).*/\1/p')
           echo "Extracted URL: $url"
           echo "PLAYGROUND_URL=$url" >> $GITHUB_ENV
         env:
@@ -100,7 +100,7 @@ jobs:
             + https://8afc7d3d.cloudflare-devtools.pages.dev/js_app?theme=systemPreferred&ws=127.0.0.1%3A9229%2Fws&domain=tester&debugger=true
             ```
 
-      - name: "Comment on PR with Workers Playground Link"
+      - name: "Comment on PR with Combined Link"
         if: contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') && contains(github.event.*.labels.*.name, 'preview:workers-playground')
         uses: marocchino/sticky-pull-request-comment@v2
         with:

packages/playground-preview-worker/package.json

@@ -11,7 +11,7 @@
 		"deploy": "wrangler deploy",
 		"deploy:testing": "wrangler deploy -e testing",
 		"start": "wrangler dev",
-		"test:e2e": "vitest run"
+		"test:e2e": "vitest run --test-timeout 30000"
 	},
 	"dependencies": {
 		"hono": "^4.7.0",

packages/playground-preview-worker/src/realish.ts

@@ -39,6 +39,7 @@ type UploadToken = z.infer<typeof UploadToken>;
 const UploadResult = APIResponse(
 	z.object({
 		preview_token: z.string(),
+		tail_url: z.string(),
 	})
 );
 export type UploadResult = z.infer<typeof UploadResult>;

packages/playground-preview-worker/src/user.do.ts

@@ -39,11 +39,13 @@ type UploadedMetadata = z.infer<typeof UploadedMetadata>;
  *  - Maintains a Realish preview session on behalf of the user
  *  - Handles worker uploads, inflating them with the relevant Realish preview authentication for the upload
  *  - Proxies inspector connections to the current inspector URL for the Realish preview session
+ *  - Proxies tail connections to the current live logs URL for the Realish preview session
  *  - Forwards requests to the running previewed user worker
  */
 export class UserSession {
 	config: RealishPreviewConfig | undefined;
 	previewToken: string | undefined;
+	tailUrl: string | undefined;
 	inspectorUrl: string | undefined;
 	workerName!: string;
 	constructor(
@@ -61,6 +63,7 @@ export class UserSession {
 			this.workerName = workerName;
 
 			this.previewToken = await this.state.storage.get<string>("previewToken");
+			this.tailUrl = await this.state.storage.get<string>("tailUrl");
 			this.inspectorUrl = await this.state.storage.get<string>("inspectorUrl");
 		});
 	}
@@ -116,9 +119,11 @@ export class UserSession {
 			},
 		});
 		this.previewToken = uploadResult.result.preview_token;
+		this.tailUrl = uploadResult.result.tail_url;
 		this.inspectorUrl = inspector.href;
 
 		await this.state.storage.put("previewToken", this.previewToken);
+		await this.state.storage.put("tailUrl", this.tailUrl);
 		await this.state.storage.put("inspectorUrl", this.inspectorUrl);
 	}
 
@@ -130,6 +135,7 @@ export class UserSession {
 			assert(this.inspectorUrl !== undefined);
 			return fetch(this.inspectorUrl, request);
 		}
+
 		// This is a request to run the user-worker. Forward, adding the correct authentication headers
 		if (request.headers.has("cf-run-user-worker")) {
 			assert(this.previewToken !== undefined);
@@ -238,13 +244,15 @@ export class UserSession {
 		await this.uploadWorker(this.workerName, worker);
 
 		assert(this.inspectorUrl !== undefined);
+		assert(this.tailUrl !== undefined);
 
 		return Response.json({
 			// Include a hash of the inspector URL so as to ensure the client will reconnect
 			// when the inspector URL has changed (because of an updated preview session)
 			inspector: `/api/inspector?user=${userSession}&h=${await hash(
 				this.inspectorUrl
 			)}`,
+			tail: this.tailUrl,
 			preview: userSession,
 		});
 	}

packages/playground-preview-worker/tests/index.test.ts

@@ -97,7 +97,7 @@ describe("Preview Worker", () => {
 			'"/hello?world"'
 		);
 		expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
-			`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
+			`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
 		);
 	});
 	it("shouldn't be redirected with no token", async () => {
@@ -338,7 +338,7 @@ describe("Preview Worker", () => {
 				'"/hello?world"'
 			);
 			expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
-				`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
+				`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
 			);
 		});
 		it("should allow workers.cloudflare.com", async () => {
@@ -360,7 +360,7 @@ describe("Preview Worker", () => {
 				'"/hello?world"'
 			);
 			expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
-				`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
+				`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
 			);
 		});
 		it("should allow workers-playground.pages.dev", async () => {
@@ -383,7 +383,7 @@ describe("Preview Worker", () => {
 				'"/hello?world"'
 			);
 			expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
-				`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
+				`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
 			);
 		});
 		it("should reject unknown referer", async () => {
@@ -451,6 +451,19 @@ describe("Upload Worker", () => {
 		});
 		expect(w.status).toMatchInlineSnapshot("200");
 	});
+	it("should upload valid worker and return tail url", async () => {
+		const w = await fetch(`${REMOTE}/api/worker`, {
+			method: "POST",
+			headers: {
+				cookie: `user=${defaultUserToken}`,
+				"Content-Type": TEST_WORKER_CONTENT_TYPE,
+			},
+			body: TEST_WORKER,
+		});
+		expect(await w.json()).toMatchObject({
+			tail: expect.stringContaining("tail.developers.workers.dev"),
+		});
+	});
 	it("should provide error message on invalid worker", async () => {
 		const w = await fetch(`${REMOTE}/api/worker`, {
 			method: "POST",

packages/workers-playground/package.json

@@ -52,6 +52,7 @@
 		"@typescript-eslint/parser": "catalog:default",
 		"@vitejs/plugin-react": "^4.3.3",
 		"eslint": "catalog:default",
+		"react-use-websocket": "^4.13.0",
 		"tsx": "^3.12.8",
 		"undici": "catalog:default",
 		"vite": "catalog:default",