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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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

[aliu39]

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

[codecov]

Bundle Report

Changes will increase total bundle size by 7.23kB ⬆️

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

[codecov]

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

[billyvg]

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

[aliu39]

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

[billyvg]

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

[aliu39]

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)

[billyvg]

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]

Should this be in here?

[aliu39]

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)

[ryan953]

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

[aliu39]

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?

[aliu39]

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

[ryan953]

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!

[aliu39]

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]

Not allowing users to stop buffering.

[aliu39]

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