From 4ad8ad4a66ba3891636dd3b5850a55bad2b97de3 Mon Sep 17 00:00:00 2001 From: Lukasz Ostrowski Date: Wed, 15 Mar 2023 10:44:02 +0100 Subject: [PATCH] Introduce "debug" package and replace console.debug with it (#3358) --- package-lock.json | 304 ++++++------------ package.json | 2 + src/apps/apps-debug.ts | 4 + .../components/AppFrame/appActionsHandler.ts | 34 +- src/debug.ts | 9 + 5 files changed, 127 insertions(+), 226 deletions(-) create mode 100644 src/apps/apps-debug.ts create mode 100644 src/debug.ts diff --git a/package-lock.json b/package-lock.json index 5770cb014..47859894d 100644 --- a/package-lock.json +++ b/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", - "devOptional": true, - "license": "MIT", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "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", - "devOptional": true, + "version": "4.3.4", + "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 diff --git a/package.json b/package.json index c21fbe309..0b825ce71 100644 --- a/package.json +++ b/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", diff --git a/src/apps/apps-debug.ts b/src/apps/apps-debug.ts new file mode 100644 index 000000000..8065b8061 --- /dev/null +++ b/src/apps/apps-debug.ts @@ -0,0 +1,4 @@ +import { createDebug } from "@dashboard/debug"; + +export const createAppsDebug = (namespace: string) => + createDebug(`apps:${namespace}`); diff --git a/src/apps/components/AppFrame/appActionsHandler.ts b/src/apps/components/AppFrame/appActionsHandler.ts index c8677a139..55d0e20e8 100644 --- a/src/apps/components/AppFrame/appActionsHandler.ts +++ b/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( - `Handling external host change action with ID: ${action.payload.actionId}`, + debug( + `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}`); - console.debug(`Action payload`, action.payload); + debug(`Handling Redirect action with ID: %s`, actionId); + 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( - `Handling UpdateRouting action with ID: ${actionId} and new route: ${newRoute}`, + debug( + `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({ diff --git a/src/debug.ts b/src/debug.ts new file mode 100644 index 000000000..e27e19816 --- /dev/null +++ b/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}`);