Add console logging of SSE connection

apps/squareone/src/components/TimesSquareHtmlEventsProvider/TimesSquareHtmlEventsProvider.js

@@ -20,20 +20,22 @@ export default function TimesSquareHtmlEventsProvider({ children }) {
   const { htmlEventsUrl } = useTimesSquarePage();
   const fullHtmlEventsUrl = `${htmlEventsUrl}?${urlQueryString}`;
 
+  console.log(`In TimesSquareHtmlEventsProvider for ${fullHtmlEventsUrl}`);
+
   React.useEffect(async () => {
     async function runEffect() {
       await fetchEventSource(fullHtmlEventsUrl, {
         method: 'GET',
         signal: abortController.signal,
         onopen(res) {
           if (res.ok && res.status === 200) {
-            console.log('Connection made ', res);
+            console.log(`Connection made to ${fullHtmlEventsUrl}`, res);
           } else if (
             res.status >= 400 &&
             res.status < 500 &&
             res.status !== 429
           ) {
-            console.log('Client side error ', res);
+            console.log(`Client side error ${fullHtmlEventsUrl}`, res);
           }
         },
         onmessage(event) {
@@ -42,19 +44,26 @@ export default function TimesSquareHtmlEventsProvider({ children }) {
           setHtmlEvent(parsedData);
         },
         onclose() {
-          console.log('Connection closed by the server');
+          console.log(
+            `Connection closed by the server to ${fullHtmlEventsUrl}`
+          );
         },
         onerror(err) {
-          console.log('There was an error from server', err);
+          console.log(
+            `There was an error from server for ${fullHtmlEventsUrl}`,
+            err
+          );
         },
       });
     }
+    console.log(`Opening connection to ${fullHtmlEventsUrl}`);
     runEffect();
 
     return () => {
       // Clean up: close the event source connection
       abortController.abort();
       setAbortController(new AbortController());
+      console.log(`Aborted connection to ${fullHtmlEventsUrl}`);
     };
   }, [fullHtmlEventsUrl]);