Session Replay Lazy-loading in Angular

[Vladi-ed]

Core or SDK?

Platform/SDK

Which part? Which one?

Session Replay

Description

On this page https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/#lazy-loading-replay
under the Lazy-loading Replay section the example can't be applied to the Angular framework or it's now clear how and where to apply it.

Suggested Solution

Example should be described clearly same way as in Getting started page.

[getsantry]

Assigning to @getsentry/support for routing, due by Thursday, March 16th at 10:35 (yyz). ⏲️

[getsantry]

Routing to @getsentry/team-web-sdk-frontend for triage, due by Friday, March 17th at 15:37 (vie). ⏲️

[AbhiPrasad]

Hey @Vladi-ed, thanks for writing in! The import syntax should be supported in Angular, is there something that doesn't work for you?

[Vladi-ed]

What I see now is a vanilla JS implementation and it's not working as expected in Angular.

It should be replaces with something like this:

import {getCurrentHub, Replay} from '@sentry/angular-ivy';

      getCurrentHub()
        .getClient()
        .addIntegration(new Replay());

[AbhiPrasad]

Yup you're right! PRs are welcome, and backlogging for now.

[Vladi-ed]

I've tested the code above and that syntax:
const { Replay } = await import('@sentry/angular-ivy');
actually not working as lazy loading and loads all the library in the main bundle..

In order to make it work as a lazy loading you should import it like that in a lazy loaded Angular component:
import {getCurrentHub, Replay} from '@sentry/angular-ivy';

And than use it inside a component:

      getCurrentHub()
        .getClient()
        .addIntegration(new Replay());

[AbhiPrasad]

Interesting, seems like something specific to angular lazy loading? I wonder if there is a way to lazy load outside of a component - but not too familiar with angular internals to know.

Again, we just need to update the snippet!

[Lms24]

@Vladi-ed just to clarify: With "lazy-loaded Angular component", do you mean a component that's declared in a lazy loaded NgModule? That would make sense to me. Interesting though that await import doesn't seem to work in Angular. Haven't heard that before.

[Vladi-ed]

@Lms24

component declared in a lazy loaded NgModule

Yes, that's what I've tested. Although the Angular team has added Standalone Components recently that can be lazy-loaded same way as Modules.

await import doesn't seem to work in Angular

It works but not as expected. That's why the code example I see in the sentry docs is a bit confusing I think .