Skip to content

Commit ccf877e

Browse files
penalosaedmundhung
andauthored
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]>
1 parent c47ad11 commit ccf877e

File tree

12 files changed

+375
-41
lines changed

12 files changed

+375
-41
lines changed

.changeset/fifty-snakes-drop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudflare/workers-playground": patch
3+
---
4+
5+
Use `tail_url` to power Workers Playground logging

.changeset/metal-garlics-stare.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudflare/playground-preview-worker": minor
3+
---
4+
5+
Return `tail_url` from Worker uploads

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ jobs:
5555
run: |
5656
output=$(pnpm --filter @cloudflare/chrome-devtools-patches run deploy)
5757
echo "Extracting deployed URL from command output"
58-
url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+')
58+
url=$(echo "$output" | sed -nE "s/.*Take a peek over at (\S+).*/\1/p")
5959
echo "Extracted URL: $url"
6060
echo "VITE_DEVTOOLS_PREVIEW_URL=$url" >> $GITHUB_ENV
6161
env:
@@ -74,7 +74,7 @@ jobs:
7474
run: |
7575
output=$(pnpm --filter workers-playground run build:testing && pnpm --filter workers-playground run deploy)
7676
echo "Extracting deployed URL from command output"
77-
url=$(echo "$output" | grep -oP 'Take a peek over at \K\S+')
77+
url=$(echo "$output" | sed -nE 's/.*Take a peek over at (https?:\/\/[^ ]+).*/\1/p')
7878
echo "Extracted URL: $url"
7979
echo "PLAYGROUND_URL=$url" >> $GITHUB_ENV
8080
env:
@@ -100,7 +100,7 @@ jobs:
100100
+ https://8afc7d3d.cloudflare-devtools.pages.dev/js_app?theme=systemPreferred&ws=127.0.0.1%3A9229%2Fws&domain=tester&debugger=true
101101
```
102102
103-
- name: "Comment on PR with Workers Playground Link"
103+
- name: "Comment on PR with Combined Link"
104104
if: contains(github.event.*.labels.*.name, 'preview:chrome-devtools-patches') && contains(github.event.*.labels.*.name, 'preview:workers-playground')
105105
uses: marocchino/sticky-pull-request-comment@v2
106106
with:

packages/playground-preview-worker/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"deploy": "wrangler deploy",
1212
"deploy:testing": "wrangler deploy -e testing",
1313
"start": "wrangler dev",
14-
"test:e2e": "vitest run"
14+
"test:e2e": "vitest run --test-timeout 30000"
1515
},
1616
"dependencies": {
1717
"hono": "^4.7.0",

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ type UploadToken = z.infer<typeof UploadToken>;
3939
const UploadResult = APIResponse(
4040
z.object({
4141
preview_token: z.string(),
42+
tail_url: z.string(),
4243
})
4344
);
4445
export type UploadResult = z.infer<typeof UploadResult>;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,13 @@ type UploadedMetadata = z.infer<typeof UploadedMetadata>;
3939
* - Maintains a Realish preview session on behalf of the user
4040
* - Handles worker uploads, inflating them with the relevant Realish preview authentication for the upload
4141
* - Proxies inspector connections to the current inspector URL for the Realish preview session
42+
* - Proxies tail connections to the current live logs URL for the Realish preview session
4243
* - Forwards requests to the running previewed user worker
4344
*/
4445
export class UserSession {
4546
config: RealishPreviewConfig | undefined;
4647
previewToken: string | undefined;
48+
tailUrl: string | undefined;
4749
inspectorUrl: string | undefined;
4850
workerName!: string;
4951
constructor(
@@ -61,6 +63,7 @@ export class UserSession {
6163
this.workerName = workerName;
6264

6365
this.previewToken = await this.state.storage.get<string>("previewToken");
66+
this.tailUrl = await this.state.storage.get<string>("tailUrl");
6467
this.inspectorUrl = await this.state.storage.get<string>("inspectorUrl");
6568
});
6669
}
@@ -116,9 +119,11 @@ export class UserSession {
116119
},
117120
});
118121
this.previewToken = uploadResult.result.preview_token;
122+
this.tailUrl = uploadResult.result.tail_url;
119123
this.inspectorUrl = inspector.href;
120124

121125
await this.state.storage.put("previewToken", this.previewToken);
126+
await this.state.storage.put("tailUrl", this.tailUrl);
122127
await this.state.storage.put("inspectorUrl", this.inspectorUrl);
123128
}
124129

@@ -130,6 +135,7 @@ export class UserSession {
130135
assert(this.inspectorUrl !== undefined);
131136
return fetch(this.inspectorUrl, request);
132137
}
138+
133139
// This is a request to run the user-worker. Forward, adding the correct authentication headers
134140
if (request.headers.has("cf-run-user-worker")) {
135141
assert(this.previewToken !== undefined);
@@ -238,13 +244,15 @@ export class UserSession {
238244
await this.uploadWorker(this.workerName, worker);
239245

240246
assert(this.inspectorUrl !== undefined);
247+
assert(this.tailUrl !== undefined);
241248

242249
return Response.json({
243250
// Include a hash of the inspector URL so as to ensure the client will reconnect
244251
// when the inspector URL has changed (because of an updated preview session)
245252
inspector: `/api/inspector?user=${userSession}&h=${await hash(
246253
this.inspectorUrl
247254
)}`,
255+
tail: this.tailUrl,
248256
preview: userSession,
249257
});
250258
}

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ describe("Preview Worker", () => {
9797
'"/hello?world"'
9898
);
9999
expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
100-
`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
100+
`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
101101
);
102102
});
103103
it("shouldn't be redirected with no token", async () => {
@@ -338,7 +338,7 @@ describe("Preview Worker", () => {
338338
'"/hello?world"'
339339
);
340340
expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
341-
`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
341+
`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
342342
);
343343
});
344344
it("should allow workers.cloudflare.com", async () => {
@@ -360,7 +360,7 @@ describe("Preview Worker", () => {
360360
'"/hello?world"'
361361
);
362362
expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
363-
`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
363+
`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
364364
);
365365
});
366366
it("should allow workers-playground.pages.dev", async () => {
@@ -383,7 +383,7 @@ describe("Preview Worker", () => {
383383
'"/hello?world"'
384384
);
385385
expect(resp.headers.get("set-cookie") ?? "").toMatchInlineSnapshot(
386-
`"token=${defaultUserToken}; Domain=random-data.playground-testing.devprod.cloudflare.dev; Path=/; HttpOnly; Secure; SameSite=None; Partitioned"`
386+
`"token=${defaultUserToken}; HttpOnly; SameSite=None; Partitioned; Secure; Path=/; Domain=random-data.playground-testing.devprod.cloudflare.dev"`
387387
);
388388
});
389389
it("should reject unknown referer", async () => {
@@ -451,6 +451,19 @@ describe("Upload Worker", () => {
451451
});
452452
expect(w.status).toMatchInlineSnapshot("200");
453453
});
454+
it("should upload valid worker and return tail url", async () => {
455+
const w = await fetch(`${REMOTE}/api/worker`, {
456+
method: "POST",
457+
headers: {
458+
cookie: `user=${defaultUserToken}`,
459+
"Content-Type": TEST_WORKER_CONTENT_TYPE,
460+
},
461+
body: TEST_WORKER,
462+
});
463+
expect(await w.json()).toMatchObject({
464+
tail: expect.stringContaining("tail.developers.workers.dev"),
465+
});
466+
});
454467
it("should provide error message on invalid worker", async () => {
455468
const w = await fetch(`${REMOTE}/api/worker`, {
456469
method: "POST",

packages/workers-playground/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"@typescript-eslint/parser": "catalog:default",
5353
"@vitejs/plugin-react": "^4.3.3",
5454
"eslint": "catalog:default",
55+
"react-use-websocket": "^4.13.0",
5556
"tsx": "^3.12.8",
5657
"undici": "catalog:default",
5758
"vite": "catalog:default",

0 commit comments

Comments
 (0)