From eb3ac09b0306218fc74ab548d69e784714d1fadd Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 15 Sep 2024 22:19:01 -0400
Subject: [PATCH] Add logging to background service worker (#1760)

* Add logging in background service worker

* Create ninety-sheep-end.md
---
 .changeset/ninety-sheep-end.md                  |  5 +++++
 extension/src/background/store/apiMiddleware.ts | 13 +++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 .changeset/ninety-sheep-end.md

diff --git a/.changeset/ninety-sheep-end.md b/.changeset/ninety-sheep-end.md
new file mode 100644
index 00000000..adf687ef
--- /dev/null
+++ b/.changeset/ninety-sheep-end.md
@@ -0,0 +1,5 @@
+---
+'remotedev-redux-devtools-extension': patch
+---
+
+Add logging to background service worker
diff --git a/extension/src/background/store/apiMiddleware.ts b/extension/src/background/store/apiMiddleware.ts
index 70da380e..68a734c8 100644
--- a/extension/src/background/store/apiMiddleware.ts
+++ b/extension/src/background/store/apiMiddleware.ts
@@ -249,6 +249,8 @@ type MonitorAction<S, A extends Action<string>> =
 const maxChromeMsgSize = 32 * 1024 * 1024;
 
 function toMonitors<S, A extends Action<string>>(action: MonitorAction<S, A>) {
+  console.log(`Message to monitors: ${action.type}`);
+
   for (const port of Object.values(connections.panel)) {
     try {
       port.postMessage(action);
@@ -315,6 +317,8 @@ interface ImportMessage {
 type ToContentScriptMessage = ImportMessage | LiftedActionAction;
 
 function toContentScript(messageBody: ToContentScriptMessage) {
+  console.log(`Message to tab ${messageBody.id}: ${messageBody.message}`);
+
   if (messageBody.message === 'DISPATCH') {
     const { message, action, id, instanceId, state } = messageBody;
     connections.tab[id!].postMessage({
@@ -389,6 +393,8 @@ function toContentScript(messageBody: ToContentScriptMessage) {
 }
 
 function toAllTabs(msg: TabMessage) {
+  console.log(`Message to all tabs: ${msg.type}`);
+
   for (const tabPort of Object.values(connections.tab)) {
     tabPort.postMessage(msg);
   }
@@ -435,6 +441,7 @@ function messaging<S, A extends Action<string>>(
   sender: chrome.runtime.MessageSender,
 ) {
   let tabId = getId(sender);
+  console.log(`Message from tab ${tabId}: ${request.type ?? request.split}`);
   if (!tabId) return;
   if (sender.frameId) tabId = `${tabId}-${sender.frameId}`;
 
@@ -517,6 +524,8 @@ function disconnect(
   listener: (message: any, port: chrome.runtime.Port) => void,
 ) {
   return function disconnectListener() {
+    console.log(`Disconnected from ${type} ${id}`);
+
     const p = connections[type][id];
     if (listener && p) p.onMessage.removeListener(listener);
     if (p) p.onDisconnect.removeListener(disconnectListener);
@@ -541,10 +550,12 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
 
   if (port.name === 'tab') {
     id = getId(port.sender!);
+    console.log(`Connected to tab ${id}`);
     if (port.sender!.frameId) id = `${id}-${port.sender!.frameId}`;
     connections.tab[id] = port;
     listener = (msg: ContentScriptToBackgroundMessage<S, A> | 'heartbeat') => {
       if (msg === 'heartbeat') return;
+      console.log(`Message from tab ${id}: ${msg.name}`);
       if (msg.name === 'INIT_INSTANCE') {
         if (typeof id === 'number') {
           chrome.action.enable(id);
@@ -578,11 +589,13 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
   } else if (port.name && port.name.indexOf('monitor') === 0) {
     // devpanel
     id = getId(port.sender!, port.name);
+    console.log(`Connected to monitor ${id}`);
     connections.panel[id] = port;
     monitors++;
     toAllTabs({ type: 'START' });
     listener = (msg: BackgroundAction | 'heartbeat') => {
       if (msg === 'heartbeat') return;
+      console.log(`Message from monitor ${id}: ${msg.type}`);
       store.dispatch(msg);
     };
     port.onMessage.addListener(listener);