Introduce "debug" package and replace console.debug with it (#3358)

package-lock.json

@@ -40,6 +40,7 @@
         "crc-32": "^1.2.0",
         "currency-codes": "^2.1.0",
         "currency.js": "^2.0.4",
+        "debug": "^4.3.4",
         "downshift": "^6.1.7",
         "editorjs-inline-tool": "^0.4.0",
         "faker": "^5.1.0",
@@ -118,6 +119,7 @@
         "@saleor/app-sdk": "^0.34.1",
         "@types/apollo-upload-client": "^17.0.0",
         "@types/color-convert": "^2.0.0",
+        "@types/debug": "^4.1.7",
         "@types/fuzzaldrin": "^2.1.2",
         "@types/is-ci": "^3.0.0",
         "@types/jscodeshift": "^0.11.3",
@@ -7194,22 +7196,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/@saleor/app-sdk/node_modules/debug": {
-      "version": "4.3.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@saleor/app-sdk/node_modules/depd": {
       "version": "2.0.0",
       "dev": true,
@@ -8806,6 +8792,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
+      "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.4.1",
       "license": "MIT",
@@ -9084,6 +9079,12 @@
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
       "dev": true
     },
+    "node_modules/@types/ms": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
+      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "14.14.37",
       "license": "MIT"
@@ -9501,22 +9502,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/debug": {
-      "version": "4.3.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
       "version": "5.2.0",
       "dev": true,
@@ -9565,22 +9550,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/parser/node_modules/debug": {
-      "version": "4.3.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "5.41.0",
       "dev": true,
@@ -9623,22 +9592,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/debug": {
-      "version": "4.3.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "5.41.0",
       "devOptional": true,
@@ -9677,22 +9630,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/debug": {
-      "version": "4.3.4",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": {
       "version": "11.1.0",
       "devOptional": true,
@@ -14813,22 +14750,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/cypress-repeat/node_modules/debug": {
-      "version": "4.3.4",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/cypress-repeat/node_modules/dotenv": {
       "version": "8.2.0",
       "license": "BSD-2-Clause",
@@ -14952,22 +14873,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/cypress/node_modules/debug": {
-      "version": "4.3.4",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/cypress/node_modules/figures": {
       "version": "3.2.0",
       "license": "MIT",
@@ -15261,9 +15166,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.1",
+      "version": "4.3.4",
-      "devOptional": true,
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "license": "MIT",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -18151,21 +18056,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/find-test-names/node_modules/debug": {
-      "version": "4.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/find-test-names/node_modules/globby": {
       "version": "11.1.0",
       "license": "MIT",
@@ -30172,6 +30062,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/release-it/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/release-it/node_modules/execa": {
       "version": "5.0.0",
       "dev": true,
@@ -32166,6 +32073,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/start-server-and-test/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/start-server-and-test/node_modules/execa": {
       "version": "3.4.0",
       "dev": true,
@@ -34959,22 +34883,6 @@
         "workbox-window": "^6.5.4"
       }
     },
-    "node_modules/vite-plugin-pwa/node_modules/debug": {
-      "version": "4.3.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vite-plugin-pwa/node_modules/pretty-bytes": {
       "version": "6.0.0",
       "dev": true,
@@ -41475,13 +41383,6 @@
           "version": "3.1.2",
           "dev": true
         },
-        "debug": {
-          "version": "4.3.4",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "depd": {
           "version": "2.0.0",
           "dev": true
@@ -42612,6 +42513,15 @@
       "version": "1.1.1",
       "dev": true
     },
+    "@types/debug": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
+      "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
+      "dev": true,
+      "requires": {
+        "@types/ms": "*"
+      }
+    },
     "@types/eslint": {
       "version": "8.4.1",
       "optional": true,
@@ -42833,6 +42743,12 @@
       "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
       "dev": true
     },
+    "@types/ms": {
+      "version": "0.7.31",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
+      "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.14.37"
     },
@@ -43175,13 +43091,6 @@
         "tsutils": "^3.21.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "ignore": {
           "version": "5.2.0",
           "dev": true
@@ -43203,15 +43112,6 @@
         "@typescript-eslint/types": "5.41.0",
         "@typescript-eslint/typescript-estree": "5.41.0",
         "debug": "^4.3.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        }
       }
     },
     "@typescript-eslint/scope-manager": {
@@ -43230,15 +43130,6 @@
         "@typescript-eslint/utils": "5.41.0",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        }
       }
     },
     "@typescript-eslint/types": {
@@ -43258,13 +43149,6 @@
         "tsutils": "^3.21.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "devOptional": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "globby": {
           "version": "11.1.0",
           "devOptional": true,
@@ -46749,13 +46633,6 @@
           "version": "5.1.0",
           "optional": true
         },
-        "debug": {
-          "version": "4.3.4",
-          "optional": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "figures": {
           "version": "3.2.0",
           "optional": true,
@@ -47107,13 +46984,6 @@
           "version": "5.0.2",
           "optional": true
         },
-        "debug": {
-          "version": "4.3.4",
-          "optional": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "dotenv": {
           "version": "8.2.0",
           "optional": true
@@ -47161,8 +47031,9 @@
       "dev": true
     },
     "debug": {
-      "version": "4.3.1",
+      "version": "4.3.4",
-      "devOptional": true,
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "requires": {
         "ms": "2.1.2"
       }
@@ -49119,12 +48990,6 @@
         "acorn-walk": {
           "version": "8.2.0"
         },
-        "debug": {
-          "version": "4.3.4",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "globby": {
           "version": "11.1.0",
           "requires": {
@@ -57243,6 +57108,15 @@
             "which": "^2.0.1"
           }
         },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
         "execa": {
           "version": "5.0.0",
           "dev": true,
@@ -58639,6 +58513,15 @@
             "which": "^2.0.1"
           }
         },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
         "execa": {
           "version": "3.4.0",
           "dev": true,
@@ -60530,13 +60413,6 @@
         "workbox-window": "^6.5.4"
       },
       "dependencies": {
-        "debug": {
-          "version": "4.3.4",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
         "pretty-bytes": {
           "version": "6.0.0",
           "dev": true

package.json

@@ -47,6 +47,7 @@
     "crc-32": "^1.2.0",
     "currency-codes": "^2.1.0",
     "currency.js": "^2.0.4",
+    "debug": "^4.3.4",
     "downshift": "^6.1.7",
     "editorjs-inline-tool": "^0.4.0",
     "faker": "^5.1.0",
@@ -125,6 +126,7 @@
     "@saleor/app-sdk": "^0.34.1",
     "@types/apollo-upload-client": "^17.0.0",
     "@types/color-convert": "^2.0.0",
+    "@types/debug": "^4.1.7",
     "@types/fuzzaldrin": "^2.1.2",
     "@types/is-ci": "^3.0.0",
     "@types/jscodeshift": "^0.11.3",

src/apps/apps-debug.ts

@@ -0,0 +1,4 @@
+import { createDebug } from "@dashboard/debug";
+
+export const createAppsDebug = (namespace: string) =>
+  createDebug(`apps:${namespace}`);

src/apps/components/AppFrame/appActionsHandler.ts

@@ -1,3 +1,4 @@
+import { createAppsDebug } from "@dashboard/apps/apps-debug";
 import { usePostToExtension } from "@dashboard/apps/components/AppFrame/usePostToExtension";
 import { useExternalApp } from "@dashboard/apps/components/ExternalAppContext/ExternalAppContext";
 import { AppUrls } from "@dashboard/apps/urls";
@@ -14,6 +15,8 @@ import {
 import { useIntl } from "react-intl";
 import urlJoin from "url-join";
 
+const debug = createAppsDebug("appActionsHandler");
+
 const createResponseStatus = (
   actionId: string,
   ok: boolean,
@@ -37,7 +40,7 @@ const useHandleNotificationAction = () => {
     handle: (action: NotificationAction) => {
       const { actionId, ...notification } = action.payload;
 
-      console.debug(`Handling Notification action with ID: ${actionId}`);
+      debug(`Handling Notification action with ID: %s`, actionId);
 
       notify({
         ...notification,
@@ -54,9 +57,11 @@ const useHandleRedirectAction = (appId: string) => {
   const intl = useIntl();
 
   const handleAppDeepChange = (action: RedirectAction) => {
-    console.debug("Handling deep app URL change");
+    debug("Handling deep app URL change");
+
     const exactLocation = urlJoin(getAppMountUri(), action.payload.to);
-    console.debug(`Exact location to redirect: ${exactLocation}`);
+
+    debug(`Exact location to redirect: %s`, exactLocation);
 
     if (action.payload.newContext) {
       // Open new dashboard in new tab
@@ -70,10 +75,11 @@ const useHandleRedirectAction = (appId: string) => {
   };
 
   const handleExternalHostChange = (action: RedirectAction) => {
-    console.debug(
+    debug(
-      `Handling external host change action with ID: ${action.payload.actionId}`,
+      `Handling external host change action with ID: %s`,
+      action.payload.actionId,
     );
-    console.debug(`Action payload is `, action.payload);
+    debug(`Action payload is %O`, action.payload);
 
     if (action.payload.newContext) {
       window.open(action.payload.to);
@@ -114,8 +120,8 @@ const useHandleRedirectAction = (appId: string) => {
   return {
     handle: (action: RedirectAction) => {
       const { actionId } = action.payload;
-      console.debug(`Handling Redirect action with ID ${actionId}`);
+      debug(`Handling Redirect action with ID: %s`, actionId);
-      console.debug(`Action payload`, action.payload);
+      debug(`Action payload: %O`, action.payload);
 
       const onlyAppDeepChange = AppUrls.isAppDeepUrlChange(
         appId,
@@ -123,7 +129,7 @@ const useHandleRedirectAction = (appId: string) => {
         action.payload.to,
       );
 
-      console.debug(`Is app deep URL change: ${onlyAppDeepChange}`);
+      debug(`Is app deep URL change: %s`, onlyAppDeepChange);
 
       try {
         if (onlyAppDeepChange) {
@@ -152,8 +158,10 @@ const useHandleUpdateRoutingAction = (appId: string) => ({
   handle: (action: UpdateRouting) => {
     const { newRoute, actionId } = action.payload;
 
-    console.debug(
+    debug(
-      `Handling UpdateRouting action with ID: ${actionId} and new route: ${newRoute}`,
+      `Handling UpdateRouting action with ID: %s and new route: %s`,
+      actionId,
+      newRoute,
     );
 
     const exactLocation = urlJoin(
@@ -162,7 +170,7 @@ const useHandleUpdateRoutingAction = (appId: string) => ({
       action.payload.newRoute,
     );
 
-    console.debug(`Update to new nested route ${exactLocation}`);
+    debug(`Update to new nested route:  %s`, exactLocation);
 
     window.history.pushState(null, "", exactLocation);
 
@@ -180,6 +188,8 @@ const useNotifyReadyAction = (
 ) => {
   const postToExtension = usePostToExtension(frameEl, appOrigin);
 
+  debug("Received notifyReady action");
+
   return {
     handle(action: NotifyReady) {
       postToExtension({

src/debug.ts

@@ -0,0 +1,9 @@
+import debugPkg from "debug";
+
+/**
+ * Will console log prefixed message with timestamp, controlled via env
+ * Eg. DEBUG=saleor-dashboard:* - enable all
+ *     DEUBG=saleor-dashboard:apps:* - enable apps debugger
+ */
+export const createDebug = (namespace: string) =>
+  debugPkg.debug(`saleor-dashboard:${namespace}`);