@amplitude/session-replay-browser v 1.11.3 does not call shutdown()

[GxDesign]

Expected Behavior

Calling sessionReplay.shutdown() should stop recording

Current Behavior

When running in debug mode, calling shutdown() logged the shutdown action in v1.9.4 (my previous version) and stopped the recording. In v1.11.3, nothing gets logged and the recording continues. I am using the segment wrapper.

Using the latest wrapper and session-replay-browser breaks shutdown functionality, reverting to wrapper version 0.1.0 and session-replay-browser v1.9.4 works.

Possible Solution

Steps to Reproduce

1. install @amplitude/session-replay-browser v1.11.3, and @amplitude/segment-session-replay-wrapper v0.3.1 (both latest)
2. Im using @segment/analytics-next v1.72.1 (latest)

   
   const segment = new AnalyticsBrowser()
   // 3. call action to load segment
   const initSegment = () => segment.load({ writeKey: API_KEY })
   // 4. call action to initialize SR wrapper, pass instance, API key etc
   const initSRWrapper = () => setupAmpSRSegmentWrapper({  segmentInstance: segment, ... })
   // 5. call action to shut down recording
   const shutdownSR = () => sessionReplay.shutdown()

Environment

• JS SDK Version: versions listed above
• Installation Method: Yarn
• Browser and Version: Chrome 126

[GxDesign]

Also, can we see the source code for the wrapper as we can for other packages? going to it from NPMjs returns a 404.

[lewgordon-amplitude]

Hey @GxDesign we're going to be looking at this relatively soon. Also we're planning on making the source code public today or early next week for the Segment wrapper.

[lewgordon-amplitude]

Okay just open source the repo. Check it out here: https://github.com/amplitude/segment-session-replay-wrapper

[lewgordon-amplitude]

Hey @GxDesign I'm curious about your setup. When I have something like this it does NOT work:

import * as sessionReplay from "@amplitude/session-replay-browser";
import setupAmpSRSegmentWrapper from "@amplitude/segment-session-replay-wrapper";

const segment = `...`;
setupAmpSRSegmentWrapper({
  segmentInstance: segment,
  amplitudeApiKey: apiKey,
  sessionReplayOptions: {
    ...
  },
});

sessionReplay.shutdown();

But if I do this is does work!

import * as sessionReplay from "@amplitude/segment-session-replay-wrapper/node_modules/@amplitude/session-replay-browser";
import setupAmpSRSegmentWrapper from "@amplitude/segment-session-replay-wrapper";

const segment = `...`;
setupAmpSRSegmentWrapper({
  segmentInstance: segment,
  amplitudeApiKey: apiKey,
  sessionReplayOptions: {
    ...
  },
});

sessionReplay.shutdown();

Just wanted to check this is not the same issue you're seeing before I dig further.

[GxDesign]

@lewgordon-amplitude the first is what I have.

[lewgordon-amplitude]

I wonder if the second works at all for you? I'm thinking overall the API could be better since I'd just except the first example to just work.

[GxDesign]

The second way works, I see the log saying the capturing stopped and then i see it restarted. I do keep seeing a lot of batch event logs I dont recall seeing before though: Amplitude Logger [Log]: Session replay event batch with seq id 1783 tracked successfully for session id Those continue about every 30-60 seconds even while inactive

[GxDesign]

Not to distract from the main issue of shutting down, but any idea why my sessions are also being duplicated? Not sure if its related:

[lewgordon-amplitude]

Oh that's interesting. Maybe it explains part of it? I was thinking there's potentially two instances set up here. One when you pull the @amplitude/session-replay-browser and another when you pull the Segment wrapper.

[GxDesign]

Could you guide me on determining that? Im trying out the second implementation you presented and I still see the duplicate sessions.

[GxDesign]

This is my code, in short:

import setupAmpSRSegmentWrapper from '@amplitude/segment-session-replay-wrapper'
import * as sessionReplay from '@amplitude/segment-session-replay-wrapper/node_modules/@amplitude/session-replay-browser'
import {AnalyticsBrowser} from '@segment/analytics-next'

const segment = new AnalyticsBrowser()

export const segmentInit = async (
  key: string,
) => {
  segment.load({
    writeKey: key,
    cdnURL: CDN_URL
  })
}

export const segmentSessionReplayInit = () => {
  if (environment.amplitudeKey) {
    void setupAmpSRSegmentWrapper({
      segmentInstance: segment,
      amplitudeApiKey: environment.amplitudeKey,
      sessionReplayOptions: {
        sampleRate: 1,
        privacyConfig: {
          defaultMaskLevel: 'conservative',
        },
        ...(environment.nodeEnv === 'development' ? SESSION_REPLAY_DEV_OPTIONS : {}),
      },
    })
  }
}

export const segmentSessionReplayShutdown = () => sessionReplay.shutdown()

[GxDesign]

Okay, Ive narrowed it down to an issue with how I restart the session replay, Im calling segmentSessionReplayInit again which I think registers a new plugin. When I stay on a route without shutting it down and restarting it (which occurs when entering restricted routes and returning to non-restricted), I get only one session recording.

[GxDesign]

Whats the correct way to restart the plugin?

[GxDesign]

@lewgordon-amplitude bumping. Ive tried calling sessionReplay.init with the import from the wrapper. Im still getting duplicate sessions and shutdown occasionally fails.