Send the application closing event to Faro in React

[Ale142]

Hello everyone, from what I read from the documentation, the user session has 3 lifecycle events:

• session_start
• session_resume
• session_extend

I was trying to create a custom event to report on closing of an application tab/window to send to Faro but It seems is not working and I need some advice from you.

Here you have the Faro initialization in React:

initializeFaro({
                isolate: true,
                instrumentations: [
                    ...getWebInstrumentations(),
                ],
                sessionTracking: {
                    enabled: true,
                    persistent: false,
                },
                url: "..."
                app: {
                    ...
                },

            });

In another component I have created a useEffect with this code that creates a listener for the visibilitychange event that is the recommeded method to use.

 useEffect(() => {
        window.addEventListener('visibilitychange', () => {
            // Push the event on unload of the window
            faroApi?.api.pushEvent('tab-closed');
        });
        // Clear listener
        return () => {
            window.removeEventListener('visibilitychange', () => {
                faroApi?.api.pushEvent('tab-closed');
            });
        };
    }, [faroApi?.api]);

But when I close the tab the method seems not to be fired. Do you have any advice?

[codecapitano]

Hi @Ale142 the code looks good.
Did you already double check if the effect callback has been called and if yes, if the faro api is available?

[codecapitano]

Hmm ok.
I think the browser already has unloaded the page before the listener is executed.

[codecapitano]

You can use the beforeUnload event but it is unreliable in some cases and can have an impact on back/forward cache.

[Ale142]

Yes that's the reason why I avoided to used the beforeUnload event. Anyway, do you know if is it planned to add a new session lifecycle event that specifies when the session end by closing the tab/window?

[codecapitano]

No it's not planned atm.

[codecapitano]

Maybe try the pagehide event.
At least this plays nicely with bf cache.
Reliability issues on mobile still apply.

• https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
• https://developer.chrome.com/docs/web-platform/page-lifecycle-api