How to handle server down and connection retries?

[jedgrant]

Does anyone have suggestions regarding what's the best way to handle your websocket server going down? Here's my current setup/scenario:

1. I have a react app where a project has multiple chapters, navigating to a new chapter uses the same react component, but creates a new provider connection for that document with a unique name that includes the chapter id. (is this is bad idea and I don't need unique connections per chapter please let me know)
2. In the useEffect return statement, I destroy the connection when the chapterId changes.
3. When the server is down, nothing gets destroyed, it just keeps attempting to connect for every chapter visited. This leads to MANY active providers attempting to reconnect to the down server because those chapters I looked at all have their own provider banging away at it.

Feels like I'm doing something wrong here. How do I either stop the connection attempts entirely after a handful of failed attempts, or at a minimum, kill the old providers so that they stop attempting to connect when I'm no longer on that page/chapter?

The providers onDestroy() callback fires... but the error messages for connection attempts continues. Any hints? Code looks like this:

const provider = new HocuspocusProvider({
    // token: "noToken", //dummy to avoid errors
    //local
    url: import.meta.env.DEV
      ? `ws://0.0.0.0:3030/${chapter.id}`,
    name: chapter.id,
    document: ydoc,
    onDestroy() {
      console.log('destroyed');
      
    },
    onClose: ({ event }) => {
      console.log("Websocket closed");
      if (!event.wasClean && event.reason !== "Unauthorized") {
        console.log(
          "Websocket didnt close right :>>",
          event.reason || "Reason not available"
        );
        logEvent(analytics, `wss_disconnect`);
      }
    },
  });

And the useEffect:

useEffect(() => {
  return () => {
      if (connection.current?.provider) {
        console.log('destroying provider');
        connection.current?.provider.destroy();
      }
    };
  }, [chapterId]);

[raineorshine]

As of v2, you can instantiate the web socket connection separately from individual providers. Then you'll just have one connection with automatic retries as providers are created and destroyed.

https://github.com/ueberdosis/hocuspocus/releases/tag/v2.0.0

[jedgrant]

Thank you for taking the time to help!