How can I trigger a function once the browser tab is closed?

[Elindo586]

Summary

This might be the wrong of thinking... but I am trying to use the localStorage to keep a sessionId.... then check if the sessionId still valid on the browser, and if not, then trigger a function....

The localStore is supposed to eliminate all information once the tab is closed, but if the the tab is closed, how can you check for an item at the localStore?

What would be the best way to do this?

So far I got this, but this isn't doing anything:

useEffect(() => {
    localStorage.setItem("sessionId", conversationId);
  }, []);

useEffect(() => {
    if (tab) {
      const sessionId = localStorage.getItem("sessionId");
      const intervals = setInterval(() => {
        if (sessionId === null) {
          if (chatToServer.length > 0) {
            emailChatHistory();
            setTab(false);
          }
        }
        if (tab === false) {
          clearInterval(intervals);
          setTab(true);
        }
      }, 1000);
    }
  });

^^^ Oh yes, besides this doing nothing when the tab is closed, it also keeps changing the value of the sessionId on every refresh, which doesn't help keep track of the session..

Additional information

No response

Example

No response

[Elindo586]

I tried this too.... not working...

if (tab) {
    if (typeof window !== "undefined") {
      const sessionId = localStorage.getItem("sessionId");
      const intervals = setInterval(() => {
        if (sessionId === null) {
          if (chatToServer.length > 0) {
            window.onbeforeunload = function () {
              emailChatHistory();
              setTab(false);
            };
          }
          if (tab === false) {
            clearInterval(intervals);
            setTab(true);
          }
        }
      }, 1000);
    }
  }

[icyJoseph]

Local Storage is preserved. I think you are talking about Session Storage?

[Elindo586]

Hey... you asked:
Why would the tab being closed matter?

^^^ that is because I want to send chat history out if there was a conversation before closing the tab.

[icyJoseph]

Aha,

Ok, so you only care about the one tab, not other tabs, nor people closing the tab entirely and then later on coming back.

So session storage does seem like a good candidate.

So let's stick to session storage. Now what you want is to do some work, before the tab is destroyed. That's kind of tricky.

First, everything that's within the JS context of the page, will be destroyed when you reload. For example the redux store. There's ways to persist a redux store, but let's not get into that.

• You should check if there's an already stored id in the Session Storage, before setting a new one.
• When the visibility goes to hidden, you could try to send the information you need

[Elindo586]

This code below works if... switches tab, minimize the screen.... but doesn't work on reloads or close tab.. (the documents said it would work on tab close)..

Another thing is that when switching tabs, or minimizing the screen works on triggering a function... when I type another line the code breaks at the openai api for some reason... it seems like its killing all data and I need to put it back in there fast before the user takes any quick actions... according to the documents the "hidden" visibilityState should be treated as end of session, but that isn't exactly what is happening on an ongoing api connection with data..

useEffect(() => {
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === "hidden") {
        if (chatToServer.length > 0) {
          emailChatHistory();
        }
      }
    });
  });

Now.... I would be happy on just sending chuncks of information on page reloads and tab closes... doesn't matter if it starts a new chain as long as I could have the chuncks of the previous conversation.

[icyJoseph]

Could you share the emailChatHistory function? I guess it does a fetch(/* */) call? You can pass a keepAlive option to fetch, and that should do the trick I think~~

• https://developer.mozilla.org/en-US/docs/Web/API/fetch#keepalive

[Elindo586]

I am gonna try the keepAlive option..

Now I do have a way to send chat history when the user press the close button... if they press it, and they might do it to keep navigating the site without the chat window open...

The other feature I was looking for was to send chat history at tab close (which is not able to do right now) because that is another very likely situation to send information..... at tab minimize or change might not be the best options to send information, but for lack of alternatives would be something to take :p

The emailChatHistory function is below... it just sends active data via email

const emailChatHistory = async () => {
    await fetch("/api/chat-email", {
      method: "POST",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(chatToEmailServer),
    }).then((res) => {
      console.log("response received");
      if (res.status === 200) {
        console.log("response succeeded");
      }
    });
  };

[Yefee8]

Hello, you can handle that with some hooks.
For example if you want to detect route change events you can use the useEffect's delete hook like this:

  useEffect(() => exitingFunction, []);

But if you want to detect the browser/tab closing events you can use the useBeforeUnload hook via the "react-use" library
https://github.com/streamich/react-use/blob/master/docs/useBeforeUnload.md

An example from my code:

"use client"
import { useBeforeUnload } from "react-use";

export default function Example(){
useBeforeUnload(async function () {
    await exitingFunction;

    return true;
  }, "You're leaving the page, you sure about that?");
}

return(
  <>
    Now you're handling the closing events 🔥
  </>
);

cheers ✌

[Elindo586]

So I just saw this post.... question... Does it work on Next.js??? I ask because Next.js doesn't have a window to track, and BeforeUnload tracks changes on the window.

[icyJoseph]

I think you are misunderstanding a few things here. The window exists in code that runs client side.

• https://github.com/streamich/react-use/blob/master/src/useBeforeUnload.ts

If we look at that function implementation, a handler is defined, and within a use-effect, which runs on the browser, the handler is attached to the window, beforeunload event.

However, that's not necessarily good. Some tools will complain about that when checking your site.

It is better to use the visibility change event:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event#examples

[Elindo586]

Oh it's been a while now. I think I did try the visibility change, and I think I did work when hiding the tab, but not when closing the tab.

It isn't too much of a big deal, but the function I want to run, I want it at the closing tab of the browser, that way I can get all the information of a chat to be sent via email.

Right now it is working on closing the chat div, but I would think many users don't close the chat and rather just close the browser.

[Vendjin]

Tell me, does this work in such a case?
If the tab is closed, send a request to the API, and if you reload the page, then no action is required to send to the API?

[diasmashikov]

Any updates?