feat(dev): frontend browser metrics report#17630
Draft
syuilo wants to merge 27 commits into
Draft
Conversation
Member
|
github actions上でやるべきなのか、e2e（Cypress）の再整備をしつつそちらのメモリ使用量を取ってくるようにするべきなのかは検討の余地がありそう |
Member
測定用途なら、Playwrightを使って測定するのが良いかと思います（それをGitHubActionsの上でやるイメージ）。 |
Member
|
（Cypressによるfrontend e2eを、Playwright + Vitest Browser Modeに置き換えるという手もある） |
Member
|
（たぶんCypressをメンテするよりそっちの方が良い） |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #17630 +/- ##
===========================================
- Coverage 25.22% 24.95% -0.28%
===========================================
Files 1164 1162 -2
Lines 39957 39744 -213
Branches 11130 11084 -46
===========================================
- Hits 10079 9917 -162
+ Misses 23926 23880 -46
+ Partials 5952 5947 -5 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Contributor
|
このPRによるapi.jsonの差分 |
Contributor
📦 Frontend Bundle ReportChunk size diff (0 updated, 0 added, 0 removed)No data Startup chunk size (0 updated, 0 added, 0 removed)
Startup chunks are the Vite entry for Bundle Stats
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Contributor
⚙️ Backend Memory Usage ReportAfter GC
V8 Heap Snapshot Statistics
Head heap snapshot composition%%{init: {"sankey":{"showValues":false,"linkColor":"target","labelStyle":"outlined","nodeAlignment":"center","nodePadding":10,"nodeColors":{"Head":"#888888","code":"#f28e2c","bytecode":"#f28e2c","Other":"#888888","strings":"#e15759","string":"#e15759","jsArrays":"#76b7b2","typedArrays":"#59a14f","systemObjects":"#edc949","otherJsObjects":"#af7aa1","array":"#af7aa1","otherNonJsObjects":"#ff9da7"}}}}%%
sankey-beta
"Head","Code",24.51
"Code","bytecode",8.1
"Code","Other",16.42
"Head","Strings",42.15
"Strings","string",41.58
"Strings","Other",0.57
"Head","JS arrays",4.06
"Head","Typed arrays",0.52
"Head","System objects",2.17
"Head","Other JS objs",26.55
"Other JS objs","array",9.74
"Other JS objs","Other",16.8
"Head","Other non-JS objs",0.04
Download representative V8 heap snapshot (head) Runtime Loaded JS FootprintClick to show
|
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
GitHub Actions上でブラウザを立ち上げてアカウント作成→投稿までを行い、実際の通信量などの統計を確認できるようにする
Why
既にバンドル情報をレポートするワークフローはあるが、それよりも実際の環境に近い値を確認できる
Additional info (optional)
TODO
ブラウザ操作関連のロジックは当workflow固有のものではないのでユーティリティファイルに分離
差分のリクエスト詳細情報表示(別html)
画像なども含めた全体のメモリ使用量
websocket接続数
Checklist
Sample:
🖥 Frontend Browser Metrics
View details
Requests by resource type
V8 heap snapshot statistics
± 7.1 KB
± 7.3 KB
$\color{orange}{\rule{8pt}{8pt}}$ Code
25.7% → 25.7%$\color{red}{\rule{8pt}{8pt}}$ Strings
6% → 6%$\color{cyan}{\rule{8pt}{8pt}}$ JS arrays
1.1% → 1.1%$\color{green}{\rule{8pt}{8pt}}$ Typed arrays
0% → 0%$\color{yellow}{\rule{8pt}{8pt}}$ System objects
0% → 0%$\color{violet}{\rule{8pt}{8pt}}$ Other JS objs
18.4% → 18.4%$\color{pink}{\rule{8pt}{8pt}}$ Other non-JS objs
48.7% → 48.8%Head heap snapshot composition
%%{init: {"sankey":{"showValues":false,"linkColor":"target","labelStyle":"outlined","nodeAlignment":"center","nodePadding":10,"nodeColors":{"Head":"#888888","code":"#f28e2c","system / InstructionStream":"#f28e2c","Other":"#888888","strings":"#e15759","jsArrays":"#76b7b2","otherJsObjects":"#af7aa1","array":"#af7aa1","otherNonJsObjects":"#ff9da7","Extra native bytes":"#ff9da7","system / ExternalStringData":"#ff9da7"}}}}%% sankey-beta "Head","Code",25.69 "Code","system / InstructionStream",13.09 "Code","Other",12.6 "Head","Strings",5.98 "Head","JS arrays",1.15 "Head","Other JS objs",18.4 "Other JS objs","array",5.76 "Other JS objs","Other",12.64 "Head","Other non-JS objs",48.75 "Other non-JS objs","Extra native bytes",18.79 "Other non-JS objs","system / ExternalStringData",18.7 "Other non-JS objs","Other",11.26Download representative head heap snapshot