Manual replays are longer than recording

[rodolfoBee]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.31.0 and 7.119.0

Framework Version

React 17.0.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

import * as Sentry from '@sentry/react'

Sentry.init({
  dsn: "__MY_DSN_",
  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
    }),
  ],
  replaysSessionSampleRate: 0.0,  
  replaysOnErrorSampleRate: 0.0,
  debug:true,
  });

class StartReplay extends React.Component{
  render(){
    return(
      <button onClick={() => {
        const replay = Sentry.getReplay();
        replay.flush()
        replay.start()
        console.log("Starting the replay")
      }}>START REPLAY</button>  
    )
  }
}

class StopReplay extends React.Component{
  render(){
    return(
      <button onClick={() => {
        const replay = Sentry.getReplay();
        console.log("Stopping the replay")
        replay.stop()
      }}>STOP REPLAY</button>  
    )
  }
}

ReactDOM.render([
    <StartReplay/>,
    <StopReplay/>,
  ], document.getElementById('root'));

Steps to Reproduce

1. run the simple app above, it has 2 buttons: one to start a replay and one to stop the replay
2. leave the page open for a while, you can move the mouse and click around.
3. start the replay
4. again move the mouse and do clicks
5. stop the replay

Expected Result

The replay in sentry only has the movements from after the replay was started

Actual Result

The replay in sentry has a a period at the start when nothing is shown in the replay. Then it shows the "start replay" click and all the movements as expected until the replay is stopped.

There are no request sent to sentry before the replay starts, I could not identify why the Sentry UI is showing the freezed paged for such a long time before the actual start of the replay. Sample replays can be found in my organisation:
https://dev-curumas.sentry.io/replays/?project=5278835

[Lms24]

Hey, so I can reproduce this (example) myself in a test app. I think this is happening because of some replay breadcrumbs we emit. which are happening after the page initially loads:

@c298lee gonna tag you since you looked recently into replay web vital breadcrumbs: Any chance that there is a problem with us collecting/buffering breadcrumbs if there's no active replay (but replayIntegration was initialized)?
I'm btw not 100% sure of this is only limited to web vital breadcrumbs, given we also show the pageload/reload breadcrumb before the web vital crumbs.

[Lms24]

Here's my reproduction app btw. It's basically just the example from the issue description pasted into a Vite React 17 app: https://github.com/Lms24/gh-sentry-javascript-13791-replay-manual-start-stop

[c298lee]

Looks like it's the same issue as this one: https://github.com/getsentry/team-replay/issues/451.
It looks like there's activity in the network tab before start is clicked, which is causing the longer replay. I'll take closer look with @billyvg when he's back from vacation

[c298lee]

This is happening due to buffered events happening at an earlier timestamp (including web vitals) being added to the replay. We will discuss how we want to handle this Monday, because we think events such as web vitals are nice to show, however it is confusing for the user to see.