fix(egress-composite): run Playwright e2e in prod and version browser cache#2145
fix(egress-composite): run Playwright e2e in prod and version browser cache#2145
Conversation
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a CI step that resolves Playwright version for cache keys; introduces a production e2e script and bumps Playwright; makes Playwright config environment-driven (dev vs production preview, ports, timeout); adds a bootstrap entry that conditionally initializes Sentry and updates index.html to load it. Changes
Sequence Diagram(s)sequenceDiagram
participant CI as CI workflow
participant Cache as Playwright Cache
participant Web as Web Server (dev / preview)
participant PW as Playwright runner
participant App as App bootstrap
CI->>CI: Resolve Playwright version (outputs `version`)
CI->>Cache: Compute cache key using resolved `version`
CI->>Web: Run `webServerCommand` (dev OR build && preview)
Web-->>CI: Server ready on port 5173 or 4173
CI->>PW: Invoke tests (`test:e2e` or `test:e2e:prod`) with baseURL
PW->>Web: Execute E2E interactions against baseURL
App->>App: bootstrap.ts conditionally init Sentry, import main
PW-->>CI: Return test results
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.github/workflows/egress-composite-e2e.yml (1)
62-63:⚠️ Potential issue | 🟠 MajorCI is still running the default E2E script, not guaranteed production mode.
Line 63 invokes
test:e2e, which does not explicitly setPLAYWRIGHT_MODE=production. If the goal is prod-mode CI, call the prod script directly.Suggested patch
- - name: Run Playwright tests - run: yarn workspace `@stream-io/egress-composite` test:e2e + - name: Run Playwright tests + run: yarn workspace `@stream-io/egress-composite` test:e2e:prod🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/egress-composite-e2e.yml around lines 62 - 63, The workflow step "Run Playwright tests" currently invokes the package script test:e2e without forcing production mode; update the step to either run the production script (e.g. the package script that ensures PLAYWRIGHT_MODE=production) or export PLAYWRIGHT_MODE=production before running test:e2e so Playwright runs in prod mode; target the workflow step named "Run Playwright tests" and adjust the run command to set the PLAYWRIGHT_MODE environment variable or call the explicit prod script to guarantee production-mode execution.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/egress-composite-e2e.yml:
- Around line 38-41: The GitHub Actions workflow fetches the Playwright version
from the `@stream-io/egress-composite` workspace but runs browser installation
commands using root-level npx playwright, causing failures since Playwright is a
devDependency only in that workspace. Update the browser installation steps
(lines 57 and 60) to use the workspace-scoped Playwright CLI by prefixing the
commands with yarn workspace `@stream-io/egress-composite` exec to ensure the
correct Playwright binary is invoked.
In `@sample-apps/react/egress-composite/playwright.config.ts`:
- Around line 59-60: Update the Playwright webServer configuration by increasing
the webServer.timeout value (the timeout property paired with webServer.command)
from 10000 to a much larger value (e.g. 120000–180000) so yarn build && yarn
preview can complete in production mode; change the timeout constant in
playwright.config.ts and re-run a cold CI with PLAYWRIGHT_MODE=production to
verify stable startup.
---
Outside diff comments:
In @.github/workflows/egress-composite-e2e.yml:
- Around line 62-63: The workflow step "Run Playwright tests" currently invokes
the package script test:e2e without forcing production mode; update the step to
either run the production script (e.g. the package script that ensures
PLAYWRIGHT_MODE=production) or export PLAYWRIGHT_MODE=production before running
test:e2e so Playwright runs in prod mode; target the workflow step named "Run
Playwright tests" and adjust the run command to set the PLAYWRIGHT_MODE
environment variable or call the explicit prod script to guarantee
production-mode execution.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (4)
.github/workflows/egress-composite-e2e.ymlsample-apps/react/egress-composite/README.mdsample-apps/react/egress-composite/package.jsonsample-apps/react/egress-composite/playwright.config.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
sample-apps/react/egress-composite/package.json (1)
11-12: Cross-platform compatibility concern with inline environment variable.The
PLAYWRIGHT_MODE=productionsyntax works on Unix/macOS but fails on Windows cmd/PowerShell. If local Windows development is a use case, consider usingcross-env.Since the CI workflow likely runs on Linux, this is acceptable if local development on Windows isn't required.
♻️ Optional fix for cross-platform support
- "test:e2e:prod": "PLAYWRIGHT_MODE=production playwright test" + "test:e2e:prod": "cross-env PLAYWRIGHT_MODE=production playwright test"Then add
cross-envto devDependencies:"cross-env": "^7.0.3"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@sample-apps/react/egress-composite/package.json` around lines 11 - 12, The npm script "test:e2e:prod" in package.json uses inline env assignment (PLAYWRIGHT_MODE=production) which breaks on Windows; update the script to prefix with cross-env (e.g., use cross-env PLAYWRIGHT_MODE=production playwright test) and add "cross-env" as a devDependency (e.g., "cross-env": "^7.0.3") so the environment variable is set cross-platform; modify the "test:e2e:prod" script and install/declare cross-env in package.json's devDependencies to resolve Windows compatibility.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@sample-apps/react/egress-composite/package.json`:
- Around line 11-12: The npm script "test:e2e:prod" in package.json uses inline
env assignment (PLAYWRIGHT_MODE=production) which breaks on Windows; update the
script to prefix with cross-env (e.g., use cross-env PLAYWRIGHT_MODE=production
playwright test) and add "cross-env" as a devDependency (e.g., "cross-env":
"^7.0.3") so the environment variable is set cross-platform; modify the
"test:e2e:prod" script and install/declare cross-env in package.json's
devDependencies to resolve Windows compatibility.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
sample-apps/react/egress-composite/README.mdsample-apps/react/egress-composite/package.jsonsample-apps/react/egress-composite/playwright.config.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- sample-apps/react/egress-composite/playwright.config.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@sample-apps/react/egress-composite/src/bootstrap.ts`:
- Line 3: The environment variable name has a typo: change the reference from
VITE_EGRESS_SENTRY_DNS to VITE_EGRESS_SENTRY_DSN where used (the assignment to
sentryDsn in bootstrap.ts and any similar imports), and update the CI/deployment
workflow deploy-react-sample-apps.yml to pass the corrected
VITE_EGRESS_SENTRY_DSN and adjust the corresponding secret name to match; ensure
any documentation or other files using VITE_EGRESS_SENTRY_DNS are updated to
VITE_EGRESS_SENTRY_DSN as well so the sentryDsn variable receives the correct
DSN.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
.github/workflows/egress-composite-e2e.ymlsample-apps/react/egress-composite/index.htmlsample-apps/react/egress-composite/src/bootstrap.tssample-apps/react/egress-composite/src/main.tsx
💤 Files with no reviewable changes (1)
- sample-apps/react/egress-composite/src/main.tsx
| @@ -0,0 +1,32 @@ | |||
| import * as Sentry from '@sentry/react'; | |||
|
|
|||
| const sentryDsn = import.meta.env.VITE_EGRESS_SENTRY_DNS; | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for both DNS and DSN variants of the Sentry env var
rg -n "VITE_EGRESS_SENTRY_DN" --type ts --type tsx --type yaml --type json -A 2 -B 2
# Also check for .env files
fd -e env -o -e "env.*" | head -20
# Look at the full bootstrap.ts file
cat -n sample-apps/react/egress-composite/src/bootstrap.ts 2>/dev/null || echo "File not found"Repository: GetStream/stream-video-js
Length of output: 1266
🏁 Script executed:
# Search for both DNS and DSN variants across all files
rg "VITE_EGRESS_SENTRY_DS" -n
# Check for .env files in the sample app and root
find sample-apps/react/egress-composite -name ".env*" -o -name "vite.config.*"
# Check GitHub Actions and CI configs
find .github -name "*.yml" -o -name "*.yaml" | head -10
# Search for env var definitions in CI configs
rg "VITE_EGRESS_SENTRY" -n --type yaml --type yml 2>/dev/null || rg "VITE_EGRESS_SENTRY" -n
# Check monorepo root for vite or environment setup
ls -la | grep -E "vite|env"Repository: GetStream/stream-video-js
Length of output: 552
🏁 Script executed:
# Check the .env-example file to see what's documented
cat -n sample-apps/react/egress-composite/.env-example
# Check the deployment workflow
cat -n .github/workflows/deploy-react-sample-apps.yml | head -100
# Check the e2e workflow for test env setup
cat -n .github/workflows/egress-composite-e2e.yml | head -80Repository: GetStream/stream-video-js
Length of output: 7090
Typo: DNS should be DSN.
Sentry uses "DSN" (Data Source Name), not "DNS" (Domain Name System). The variable name sentryDsn is correct, but the environment variable name has a typo.
This typo is already deployed in the CI workflow. Fixing it requires updating both the code and .github/workflows/deploy-react-sample-apps.yml (line 64) to use VITE_EGRESS_SENTRY_DSN instead, along with the corresponding secret name.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@sample-apps/react/egress-composite/src/bootstrap.ts` at line 3, The
environment variable name has a typo: change the reference from
VITE_EGRESS_SENTRY_DNS to VITE_EGRESS_SENTRY_DSN where used (the assignment to
sentryDsn in bootstrap.ts and any similar imports), and update the CI/deployment
workflow deploy-react-sample-apps.yml to pass the corrected
VITE_EGRESS_SENTRY_DSN and adjust the corresponding secret name to match; ensure
any documentation or other files using VITE_EGRESS_SENTRY_DNS are updated to
VITE_EGRESS_SENTRY_DSN as well so the sentryDsn variable receives the correct
DSN.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
.github/workflows/egress-composite-e2e.yml (1)
56-61:⚠️ Potential issue | 🔴 CriticalUse workspace-scoped Playwright CLI for install steps.
You resolve Playwright from
@stream-io/egress-composite, but browser install commands still run via rootnpx playwright. If Playwright is only present in the workspace, these steps can fail or use the wrong binary.Suggested patch
- name: Install Playwright browsers if not cached if: steps.playwright-cache.outputs.cache-hit != 'true' - run: npx playwright install chromium + run: yarn workspace `@stream-io/egress-composite` exec playwright install chromium - name: Install Playwright system dependencies (always) - run: npx playwright install-deps + run: yarn workspace `@stream-io/egress-composite` exec playwright install-deps#!/bin/bash # Verify Playwright dependency location and workflow CLI scope. # Expected: # 1) `@playwright/test` present in workspace package.json # 2) root package.json may not contain it # 3) workflow currently uses root-level npx playwright commands rg -n '"@playwright/test"' package.json sample-apps/react/egress-composite/package.json rg -n 'run:\s*(npx playwright|yarn workspace .* exec playwright)' .github/workflows/egress-composite-e2e.yml🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.github/workflows/egress-composite-e2e.yml around lines 56 - 61, The workflow runs root-level "npx playwright" which can fail if Playwright is only installed in the workspace package; update the two steps named "Install Playwright browsers if not cached" and "Install Playwright system dependencies (always)" to invoke the workspace-scoped Playwright CLI for `@stream-io/egress-composite` (e.g. replace "npx playwright install chromium" with a workspace exec like "yarn workspace `@stream-io/egress-composite` exec playwright install chromium" or the equivalent pnpm/npm workspace invocation, and likewise replace "npx playwright install-deps" with the same workspace-scoped "playwright install-deps" command) so the workflow always uses the Playwright binary from the package that declares the dependency.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In @.github/workflows/egress-composite-e2e.yml:
- Around line 56-61: The workflow runs root-level "npx playwright" which can
fail if Playwright is only installed in the workspace package; update the two
steps named "Install Playwright browsers if not cached" and "Install Playwright
system dependencies (always)" to invoke the workspace-scoped Playwright CLI for
`@stream-io/egress-composite` (e.g. replace "npx playwright install chromium" with
a workspace exec like "yarn workspace `@stream-io/egress-composite` exec
playwright install chromium" or the equivalent pnpm/npm workspace invocation,
and likewise replace "npx playwright install-deps" with the same
workspace-scoped "playwright install-deps" command) so the workflow always uses
the Playwright binary from the package that declares the dependency.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
.github/workflows/egress-composite-e2e.ymlsample-apps/react/egress-composite/playwright.config.ts
2 participants
💡 Overview
@stream-io/egress-compositePlaywright e2e in production mode on CI📝 Implementation notes
@playwright/testversion and includes it in the cache key$GITHUB_OUTPUTyarn workspace @stream-io/egress-composite exec playwright ...yarn workspace @stream-io/egress-composite test:e2e:prodPLAYWRIGHT_MODE=production) and runs preview on port417325000test:e2e:prodas the canonical CI commandindex.htmlnow points tosrc/bootstrap.ts, which initializes Sentry before importingmain.tsxphase=bootstrap-import) and flushes before rethrowing🎫 Ticket: https://linear.app/stream/issue/REACT-823/run-egress-composite-e2e-tests-in-production-mode
📑 Docs: N/A
Summary by CodeRabbit
New Features
Documentation
Bug Fixes / Reliability
Chores