feat(toolbar): add a replay panel for start/stop current replay #75403

aliu39 · 2024-07-31T23:26:52Z

Closes #74583
Closes #74452

getReplay returns undefined:

SentrySDK doesn't have getReplay method:

SentrySDK is falsey (failed to import the package):

If you want to checkout this branch to test it, you need to run dev-ui in getsentry and make local changes:

Comment out https://github.com/getsentry/getsentry/blob/2a1da081f3a9e4e4111b577d5551fa24691da374/static/getsentry/gsApp/utils/useReplayInit.tsx#L85-L87
Right below that, manually control the sample rates by commenting out/overriding ^. Best to test with 1.0/0.0, 0.0/1.0, 0/0.

Notes:

"last recorded replay" is persisted with sessionStorage
stopping then starting will make a new replay
uses some try-catch logic to handle older SDK versions where the recording fxs throw.

Follow-ups before merging

Analytics context provider and start/stop button analytics (todo in this PR)
comment on SDK versioning
- exact release of getReplay/public API is unknown, but it was ~2yr ago near the release of the whole product
test with v8.18
remove the debug flag
make the links work for dev mode (can hard-code the sentry-test/app-frontend org/proj)

Follow-ups after merging

test the links work in prod
account for minimum replay duration (so users don't stop too early)
add more content to the panel! Open to ideas. Can do this in a separate PR
keep dogfooding for bugs, w/different sample rates, sdk versions

…replay

codecov · 2024-07-31T23:31:28Z

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

Bundle name	Size	Change
app-webpack-bundle-array-push	28.65MB	7.23kB ⬆️

…replay

package.json

static/app/bootstrap/initializeSdk.tsx

static/app/components/devtoolbar/components/panelRouter.tsx

static/app/components/devtoolbar/components/replay/replayPanel.tsx

yarn.lock

static/app/components/devtoolbar/components/replay/replayPanel.tsx

…der versions w try-catch

codecov · 2024-08-03T00:13:07Z

Codecov Report

Attention: Patch coverage is 0% with 57 lines in your changes missing coverage. Please review.

Project coverage is 78.22%. Comparing base (14c8790) to head (1fc533d).
Report is 23 commits behind head on master.

Files	Patch %	Lines
.../components/devtoolbar/hooks/useReplayRecorder.tsx	0.00%	45 Missing ⚠️
...nents/devtoolbar/components/replay/replayPanel.tsx	0.00%	10 Missing ⚠️
...p/components/devtoolbar/components/panelRouter.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #75403      +/-   ##
==========================================
- Coverage   80.06%   78.22%   -1.84%     
==========================================
  Files        6996     6830     -166     
  Lines      312723   303280    -9443     
  Branches    52171    52182      +11     
==========================================
- Hits       250370   237244   -13126     
+ Misses      61911    59661    -2250     
- Partials      442     6375    +5933

Files	Coverage Δ
static/app/bootstrap/initializeSdk.tsx	`35.45% <ø> (ø)`
...pp/components/devtoolbar/components/navigation.tsx	`0.00% <ø> (ø)`
...pp/components/devtoolbar/hooks/useToolbarRoute.tsx	`0.00% <ø> (ø)`
...p/components/devtoolbar/components/panelRouter.tsx	`0.00% <0.00%> (ø)`
...nents/devtoolbar/components/replay/replayPanel.tsx	`0.00% <0.00%> (ø)`
.../components/devtoolbar/hooks/useReplayRecorder.tsx	`0.00% <0.00%> (ø)`

... and 1787 files with indirect coverage changes

static/app/components/devtoolbar/components/replay/replayPanel.tsx

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx

static/app/components/devtoolbar/components/replay/replayPanel.tsx

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx

package.json

static/app/components/devtoolbar/components/replay/replayPanel.tsx

billyvg · 2024-08-06T21:49:46Z

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx

+export default function useReplayRecorder(): ReplayRecorderState {
+  const {SentrySDK} = useConfiguration();
+  const replay =
+    SentrySDK && 'getReplay' in SentrySDK ? SentrySDK.getReplay() : undefined;


you can use SentrySDK.getIntegrationByName(), it's just a bit more annoying dealing with types

Hm my VSCode can't find this method in browser or react packages..

hmm it might be on the SDK client instead of the Sentry namespace... e.g. SentrySDK.getClient().getIntegrationByName

Got it, does this have any improvements over the current approach? Right now I'm using these conditions to get the disabledReason (see screenshots I just added in the description)

Ah just as a fallback if the SDK is too old to support getReplay as it was a relatively recent addition, but it's fine not to support older

billyvg · 2024-08-06T21:51:13Z

static/app/utils/useDevToolbar.tsx

+        organizationSlug:
+          process.env.NODE_ENV !== 'development' ? 'sentry' : 'sentry-test',
+        projectId: process.env.NODE_ENV !== 'development' ? 11276 : 5270453,
        projectPlatform: 'javascript',
-        projectSlug: 'javascript',
+        projectSlug:
+          process.env.NODE_ENV !== 'development' ? 'javascript' : 'app-frontend',


Should this be in here?

While this is PoC we are hard coding the org/project slugs, this allows the links to work in dev mode (assuming the replay integration is enabled)

can you test by running the app with yarn dev-ui. my workflow depends on that command

It works, but you need to comment out this condition in getsentry's useReplayInit: https://github.com/getsentry/getsentry/blob/2a1da081f3a9e4e4111b577d5551fa24691da374/static/getsentry/gsApp/utils/useReplayInit.tsx#L85-L87

I think it's disabled so we don't record everyone's dev-ui sessions. Maybe we could uncomment but set both sample rates to 0?

I'll make a ticket and add it to the dev toolbar project

probably hold off on a ticket to change useReplayInit. The toolbar should support whatever env it finds itself inside of. So if sometimes there's no replayIntegration at all, that should be ok. We'll be able to test that case in dev, and on prod there will be a replayIntegration so we can test that case as well!

I wasn't thinking about the other panels, this change would break them for dev. I'm done testing, let's just leave this panel disabled in dev.

aliu39 · 2024-08-08T20:54:45Z

static/app/components/devtoolbar/components/replay/replayPanel.tsx

+        disabled={isDisabled || buttonLoading}
+        onClick={async () => {
+          setButtonLoading(true);
+          isRecordingSession ? await stopRecording() : await startRecordingSession();


Not allowing users to stop buffering.

aliu39 · 2024-08-08T20:55:27Z

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx

+
+  const startRecordingSession = useCallback(async () => {
+    let success = false;
+    if (replay) {


Don't want to try-catch here because we can already condition to make sure we're in a safe state.

aliu39 added 2 commits July 30, 2024 11:04

Initial start, stop, and link w/project platform

6c83718

Merge branch 'master' of github.com:getsentry/sentry into aliu/start-…

7c9db6c

…replay

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 31, 2024

more progress to MVP + improve comments

72868f6

vercel bot deployed to Preview August 1, 2024 00:20 View deployment

aliu39 added 3 commits August 1, 2024 10:48

Merge branch 'master' of github.com:getsentry/sentry into aliu/start-…

73d5217

…replay

Working start/stop links

a324791

Cleanup todos

c1e1ba7

aliu39 changed the title ~~Aliu/start replay~~ feat(toolbar): add a replay panel for start/stop current replay Aug 1, 2024

aliu39 commented Aug 1, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

aliu39 commented Aug 1, 2024

View reviewed changes

static/app/bootstrap/initializeSdk.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview August 1, 2024 23:04 View deployment

michellewzhang reviewed Aug 1, 2024

View reviewed changes

This comment was marked as resolved.

Sign in to view

aliu39 added 2 commits August 1, 2024 21:11

Handle buffer mode

1991afe

Add tooltip + some comments and cleanup

9246bac

vercel bot deployed to Preview August 2, 2024 08:24 View deployment

ryan953 reviewed Aug 2, 2024

View reviewed changes

static/app/components/devtoolbar/components/replay/replayPanel.tsx Outdated Show resolved Hide resolved

aliu39 added 3 commits August 2, 2024 16:58

Refactor all state and sdk calls to a context provider, and handle ol…

3ba529b

…der versions w try-catch

Merge branch 'master' into aliu/start-replay

a7ee558

npx yarn-deduplicate

0219e21

vercel bot deployed to Preview August 3, 2024 00:06 View deployment

This comment was marked as outdated.

Sign in to view

aliu39 added 3 commits August 2, 2024 23:36

Switch to a hook + sessionStorage

e0a5a52

Rm initial states (will be set by useEffect

0359480

Refresh state on successful start/stop instead of polling

c67d984

vercel bot deployed to Preview August 3, 2024 07:12 View deployment

Hardcode sentry-test url for non-prod environments

eeb7485

ryan953 reviewed Aug 5, 2024

View reviewed changes

static/app/components/devtoolbar/components/replay/replayPanel.tsx Outdated Show resolved Hide resolved

aliu39 commented Aug 5, 2024

View reviewed changes

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx Outdated Show resolved Hide resolved

ryan953 reviewed Aug 5, 2024

View reviewed changes

static/app/components/devtoolbar/components/replay/replayPanel.tsx Outdated Show resolved Hide resolved

ryan953 reviewed Aug 5, 2024

View reviewed changes

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx Outdated Show resolved Hide resolved

ryan953 reviewed Aug 5, 2024

View reviewed changes

static/app/components/devtoolbar/hooks/useReplayRecorder.tsx Outdated Show resolved Hide resolved

Address review comments and track button failures

7f99b48

vercel bot deployed to Preview August 6, 2024 06:12 View deployment

billyvg reviewed Aug 6, 2024

View reviewed changes

aliu39 added 2 commits August 7, 2024 20:01

Merge branch 'master' into aliu/start-replay

fb7bede

Undo package.json formatting

f30b5a9

vercel bot deployed to Preview August 8, 2024 03:08 View deployment

Update button label + url

44ed001

vercel bot deployed to Preview August 8, 2024 03:15 View deployment

Ref start/stop to use finally

bd0d0ef

aliu39 requested review from ryan953 and billyvg August 8, 2024 17:13

vercel bot deployed to Preview August 8, 2024 17:16 View deployment

Update disabled msgs to show in button, instead of tooltip

bcd8f25

vercel bot deployed to Preview August 8, 2024 17:26 View deployment

Update missing integration msg

697a09a

vercel bot deployed to Preview August 8, 2024 17:32 View deployment

aliu39 added 2 commits August 8, 2024 13:47

Fix broken buffer case, update buffer label and rm try-catch

b9fc69c

Revert useDevToolbar

87ab1de

vercel bot deployed to Preview August 8, 2024 20:53 View deployment

aliu39 commented Aug 8, 2024

View reviewed changes

billyvg approved these changes Aug 8, 2024

View reviewed changes

aliu39 merged commit a055c3b into master Aug 8, 2024
41 of 42 checks passed

aliu39 deleted the aliu/start-replay branch August 8, 2024 21:34

github-actions bot locked and limited conversation to collaborators Aug 24, 2024

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(toolbar): add a replay panel for start/stop current replay #75403

feat(toolbar): add a replay panel for start/stop current replay #75403

aliu39 commented Jul 31, 2024 •

edited

Loading

codecov bot commented Jul 31, 2024 •

edited

Loading

This comment was marked as resolved.

codecov bot commented Aug 3, 2024 •

edited

Loading

This comment was marked as outdated.

billyvg Aug 6, 2024

aliu39 Aug 8, 2024

billyvg Aug 8, 2024

aliu39 Aug 8, 2024

billyvg Aug 8, 2024

billyvg Aug 6, 2024

aliu39 Aug 8, 2024

ryan953 Aug 8, 2024 •

edited

Loading

aliu39 Aug 8, 2024 •

edited

Loading

aliu39 Aug 8, 2024

ryan953 Aug 8, 2024

aliu39 Aug 8, 2024

aliu39 Aug 8, 2024

aliu39 Aug 8, 2024

feat(toolbar): add a replay panel for start/stop current replay #75403

feat(toolbar): add a replay panel for start/stop current replay #75403

Conversation

aliu39 commented Jul 31, 2024 • edited Loading

codecov bot commented Jul 31, 2024 • edited Loading

Bundle Report

This comment was marked as resolved.

codecov bot commented Aug 3, 2024 • edited Loading

Codecov Report

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryan953 Aug 8, 2024 • edited Loading

Choose a reason for hiding this comment

aliu39 Aug 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aliu39 commented Jul 31, 2024 •

edited

Loading

codecov bot commented Jul 31, 2024 •

edited

Loading

codecov bot commented Aug 3, 2024 •

edited

Loading

ryan953 Aug 8, 2024 •

edited

Loading

aliu39 Aug 8, 2024 •

edited

Loading