Display traced values in Stack Chart view #5363

squarewave · 2025-02-07T23:48:00Z

This is a rough draft of adding in the support for displaying traced values (from the JS Execution Tracing option) in the Stack Chart view. This currently requires the work in https://phabricator.services.mozilla.com/D236936 to function.

ochameau · 2025-03-14T08:35:15Z

@squarewave note that this is crashing on chrome

ErrorBoundary.js:43 An unhandled error was thrown in a React component. TypeError: First argument to DataView constructor must be an ArrayBuffer
    at new DataView (<anonymous>)
    at new Eu (value-summaries.js:49:18)
    at value-summaries.js:319:16

canova

Thanks for the PR! It looks like it's mostly working well! I have a few questions below, but my main concern is the crashes/exceptions I was getting when I was trying the deploy preview.

I changed the devtools.performance.recording.ui-base-url pref to "https://deploy-preview-5363--perf-html.netlify.app" and started capturing some example profiles with the JS tracer enabled. While hovering over some of the sampples in stack chart, I've encountered these crashes:

An unhandled error was thrown in a React component. Error: Bad object kind
    MC value-summaries.js:423
    FC value-summaries.js:476
    NC value-summaries.js:257
    MC value-summaries.js:410
    FC value-summaries.js:476
    RC value-summaries.js:495
    _getHoveredStackInfo Canvas.js:616
    _getHoveredItemInfo Canvas.js:342
    render Canvas.js:398
    React 8
    w scheduler.production.min.js:13
    _ scheduler.production.min.js:14
    7463 scheduler.production.min.js:14
    Webpack 13
 
rC@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:47154
qE@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:129223
div
t@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:36629
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
div
aA@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:43084
iA@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:45644
div
tk@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:123:481
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
Ag
$e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223805
div
Gx@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:132:49519
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
component@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:132:51659
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
div
div
JT@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:139:26671
BP@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:117837
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
CM@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:150225
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
ef@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:3169
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
MP@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:119982
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
Ag
$e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223805
Ve@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223718
ZM@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:170476
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
jt@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:229088
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
gg
eF@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:171580 ErrorBoundary.js:43:13
    componentDidCatch ErrorBoundary.js:43
    React 8
    w scheduler.production.min.js:13
    _ scheduler.production.min.js:14
    (Async: EventHandlerNonNull)
    7463 scheduler.production.min.js:14
    Webpack 13

And I got this:

An unhandled error was thrown in a React component. Error: Bad value type
    FC value-summaries.js:479
    NC value-summaries.js:257
    MC value-summaries.js:410
    FC value-summaries.js:476
    RC value-summaries.js:495
    _getHoveredStackInfo Canvas.js:616
    _getHoveredItemInfo Canvas.js:342
    render Canvas.js:398
    React 8
    w scheduler.production.min.js:13
    _ scheduler.production.min.js:14
 
rC@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:47154
qE@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:129223
div
t@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:120:36629
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
div
aA@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:43084
iA@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:45644
div
tk@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:123:481
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
Ag
$e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223805
div
Gx@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:132:49519
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
component@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:132:51659
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
div
s@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:46805
div
e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:207:48453
div
div
JT@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:139:26671
BP@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:117837
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
CM@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:150225
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
ef@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:3169
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
div
MP@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:119982
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
Ag
$e@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223805
Ve@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:223718
ZM@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:170476
c@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:230673
jt@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:2:229088
fg@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:117:20380
gg
eF@https://deploy-preview-5363--perf-html.netlify.app/main.2fcff16d608871ec81f3.bundle.js:143:171580 ErrorBoundary.js:43:13

So it looks like we get both bad object and value types somehow. We should fix these issues before landing, but I also have a few questions:

Are we expected to have unknown object/value types? Is this controlled in the backend somewhere? (like we only allow some "known" types to be put inside the profiles etc.)
What happens if new types get added in the future? Is there a version control somewhere? Currently we have gecko and processes profile versioning. I think it might be good to make sure that we don't break the profiler when a new type gets added in the future.

canova · 2025-08-12T13:53:59Z

res/css/global.css

+  --number-color: #058b00;
+  --string-color: #dd00a9;
+  --null-color: #5c5c5f;
+  --object-color: #0074e8;
+  --caption-color: #0074e8;
+  --location-color: #5c5c5f;
+  --source-link-color: #0060df;
+  --node-color: #003eaa;
+  --reference-color: #0074e8;
+  --comment-node-color: #5c5c5f;


Are they the variables used inside reps css file?

They are - do you have a suggestion on where they should live, if you'd like them to live elsewhere?

src/utils/base64.js

src/types/libdef/npm/devtools-reps_vx.x.x.js

src/utils/value-summaries.js

codecov · 2025-10-17T20:13:44Z

Codecov Report

❌ Patch coverage is 43.07692% with 37 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.66%. Comparing base (6e93f1e) to head (4c4feed).
⚠️ Report is 54 commits behind head on main.

Files with missing lines	Patch %	Lines
src/utils/base64.ts	0.00%	10 Missing ⚠️
src/profile-logic/stack-timing.ts	57.89%	8 Missing ⚠️
src/components/tooltip/CallNode.tsx	30.00%	7 Missing ⚠️
src/profile-logic/profile-data.ts	42.85%	3 Missing and 1 partial ⚠️
src/components/stack-chart/Canvas.tsx	40.00%	3 Missing ⚠️
src/profile-logic/process-profile.ts	50.00%	3 Missing ⚠️
src/test/fixtures/profiles/processed-profile.ts	50.00%	1 Missing ⚠️
src/test/fixtures/utils.ts	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5363      +/-   ##
==========================================
- Coverage   85.75%   85.66%   -0.10%     
==========================================
  Files         311      311              
  Lines       30699    30763      +64     
  Branches     8440     8467      +27     
==========================================
+ Hits        26327    26354      +27     
- Misses       3949     3985      +36     
- Partials      423      424       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

squarewave force-pushed the main branch from 20da66f to f917406 Compare February 20, 2025 18:01

This was referenced Mar 6, 2025

Display tracer argument values via DevTool's Reps components #5393

Closed

Display tracer argument values via DevTool's Reps components #5394

Closed

squarewave force-pushed the main branch from f917406 to daf7391 Compare March 26, 2025 19:32

squarewave force-pushed the main branch 2 times, most recently from 72940af to eee6ac3 Compare July 31, 2025 15:28

squarewave marked this pull request as ready for review August 7, 2025 15:39

squarewave requested a review from canova as a code owner August 7, 2025 15:39

canova changed the title ~~[deploy preview] Display traced values in Stack Chart view~~ Display traced values in Stack Chart view Aug 7, 2025

canova requested changes Aug 12, 2025

View reviewed changes

canova reviewed Aug 12, 2025

View reviewed changes

src/utils/value-summaries.js Outdated Show resolved Hide resolved

squarewave force-pushed the main branch from eee6ac3 to 8830789 Compare October 2, 2025 06:37

squarewave force-pushed the main branch from 8830789 to 4c4feed Compare October 17, 2025 20:05

squarewave added 3 commits December 3, 2025 16:03

Handle traced values from JS Execution Tracer profiles

33aac53

Add test for basic StackChart display of argument values

7738e96

lint fixups

997d4e1

squarewave force-pushed the main branch from 4c4feed to 997d4e1 Compare December 4, 2025 00:06

squarewave requested a review from canova December 4, 2025 00:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Display traced values in Stack Chart view #5363

Display traced values in Stack Chart view #5363

squarewave commented Feb 7, 2025

Uh oh!

ochameau commented Mar 14, 2025

Uh oh!

canova left a comment •

edited

Loading

Uh oh!

canova Aug 12, 2025

Uh oh!

squarewave Oct 23, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Oct 17, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Display traced values in Stack Chart view #5363

Are you sure you want to change the base?

Display traced values in Stack Chart view #5363

Conversation

squarewave commented Feb 7, 2025

Uh oh!

ochameau commented Mar 14, 2025

Uh oh!

canova left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

canova Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

squarewave Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

canova left a comment •

edited

Loading

codecov bot commented Oct 17, 2025 •

edited

Loading