Refreshing iframes in multiple tabs issue

[pszymanski95]

Hey there 👋
I'm testing a case where I have opened 3 browser tabs with my app embedding the Looker dashboard (just duplicated 2 times the same tab). I have a session length set to 10mins and after that time, when the session expires the iframe should be recreated with a new session. But that's not always the case and (there is a chance) that one of those errors occurs:

1. The iframe displays a message that "Your session has been interrupted" and the following error pops up in the console:

What is more interesting it points to this line which states "this should not happen"

2. The iframe is removed, but a new one can't be created due to the missing getEmbedSDK().apiHost. This is set only once with getEmbedSDK().initCookieless(...). Might it be somehow caused by this cleanup called on session:expired event here? 🤔

In my code I check if the session has expired, and if so I remove the iframe and create a new one with a new session provided. Here is the code responsible for creating the iframe and recreating it when the session expires:

    const refresh = () => {
        const iframe = iframeWrapper.current?.firstChild;
        if (iframe && iframe.nodeName === 'IFRAME') {
            setIsRefreshing(true);
            iframe.remove();
            createUrlAndEmbedDashboard();
        }
    };

    const onSessionStatus = (status: SessionStatus) => {
        if (status.expired) {
            refresh();
        }
    };

    const createUrlAndEmbedDashboard = async () => {
        try {
            if (getEmbedSDK().apiHost === '') {
                throw new Error('Looker host URL is not provided');
            }

            if (!identifier.current) {
                throw new Error('Looker identifier is not provided');
            }

            embedDashboard.current = await getEmbedSDK()
                .createDashboardWithId(identifier.current)
                .withTheme('Explore')
                .appendTo(document.getElementById(IFRAME_CONTAINER_ID)!)
                .on('dashboard:run:complete', onDashboardRunCompleted)
                .on('dashboard:loaded', onDashboardLoaded)
                .on('session:status', onSessionStatus)
                .on('dashboard:filters:changed', onFiltersChange)
                .build()
                .connect();
        } catch (initialError) {
            handleError(initialError);
            setIsLoading(false);
            setIsRefreshing(false);
        }
    };

Regarding this cleanup method mentioned earlier, why all the necessary information passed to the initCookieless are cleared on expired session? I believe it should stay as is, without the need for initiating the SDK every time the session expires and the need to be refreshed.

I would appreciate any help with those errors 🙏

Thanks!

FYI in v1 I've never faced any error - there's only (very rarely) a race condition with creating a new session causing that requests in one of the tab fails with 401.