From 14b22e2e2759c27972229eb03408c0784867dbba Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 15 Aug 2023 11:53:05 -0400 Subject: [PATCH 1/4] fix(nextjs): Limit debug logs to 4096 bytes on vercel to avoid error --- package-lock.json | 21 +++++++++++++++++++ packages/nextjs/package.json | 2 ++ packages/nextjs/src/utils/debugLogger.test.ts | 20 ++++++++++++++++++ packages/nextjs/src/utils/debugLogger.ts | 17 +++++++++------ 4 files changed, 54 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad35540a8de..a8a373abb32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12760,6 +12760,12 @@ "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==", "dev": true }, + "node_modules/@types/truncate-utf8-bytes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.0.tgz", + "integrity": "sha512-pa3icl1RawLUUKmQE1h0G381EpWMU8bTnZT4YF3Ey9D7VI4fL1BQvgZ8HKbYok9kKXeUSCr/E3vnscW8Ck3QKg==", + "dev": true + }, "node_modules/@types/webpack-dev-server": { "version": "4.7.2", "resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-4.7.2.tgz", @@ -38686,6 +38692,14 @@ "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==", "peer": true }, + "node_modules/truncate-utf8-bytes": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", + "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==", + "dependencies": { + "utf8-byte-length": "^1.0.1" + } + }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", @@ -39908,6 +39922,11 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/utf8-byte-length": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", + "integrity": "sha512-4+wkEYLBbWxqTahEsWrhxepcoVOJ+1z5PGIjPZxRkytcdSUaNjIjBM7Xn8E+pdSuV7SzvWovBFA54FO0JSoqhA==" + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -41995,12 +42014,14 @@ "@clerk/clerk-sdk-node": "^4.12.2", "@clerk/types": "^3.49.0", "path-to-regexp": "6.2.1", + "truncate-utf8-bytes": "^1.0.2", "tslib": "2.4.1" }, "devDependencies": { "@types/node": "^16.11.55", "@types/react": "*", "@types/react-dom": "*", + "@types/truncate-utf8-bytes": "^1.0.0", "node-fetch-native": "1.1.1", "typescript": "*" }, diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index f84fd008f2d..8c3d2f5e500 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -80,12 +80,14 @@ "@clerk/clerk-sdk-node": "^4.12.2", "@clerk/types": "^3.49.0", "path-to-regexp": "6.2.1", + "truncate-utf8-bytes": "^1.0.2", "tslib": "2.4.1" }, "devDependencies": { "@types/node": "^16.11.55", "@types/react": "*", "@types/react-dom": "*", + "@types/truncate-utf8-bytes": "^1.0.0", "node-fetch-native": "1.1.1", "typescript": "*" }, diff --git a/packages/nextjs/src/utils/debugLogger.test.ts b/packages/nextjs/src/utils/debugLogger.test.ts index f1e73c7daca..7d8cfc8347c 100644 --- a/packages/nextjs/src/utils/debugLogger.test.ts +++ b/packages/nextjs/src/utils/debugLogger.test.ts @@ -111,4 +111,24 @@ describe('withLogger', () => { expect(logger.commit).toHaveBeenCalled(); } }); + + it('should truncate bytes to 4096 when deploying on vercel', () => { + // setup: mock vercel environment, mock console log so we can intercept its value + process.env.VERCEL = 'true'; + const oldConsoleLog = console.log.bind(console); + const log = jest.fn(); + console.log = log; + + const veryLongString = new Array(6000).join('a'); + const handler = withLogger('test-logger', logger => () => { + logger.enable(); + logger.debug(veryLongString); + }); + handler(); + expect(log.mock.calls[0][0]).toHaveLength(4096); + + // restore original console log and reset environment value + process.env.VERCEL = undefined; + console.log = oldConsoleLog; + }); }); diff --git a/packages/nextjs/src/utils/debugLogger.ts b/packages/nextjs/src/utils/debugLogger.ts index 2e5797cd0ff..169f03fcf63 100644 --- a/packages/nextjs/src/utils/debugLogger.ts +++ b/packages/nextjs/src/utils/debugLogger.ts @@ -1,5 +1,7 @@ // TODO: Replace with a more sophisticated logging solution +import truncate from 'truncate-utf8-bytes'; + import { logFormatter } from './logFormatter'; export type Log = string | Record; @@ -25,12 +27,15 @@ export const createDebugLogger = (name: string, formatter: (val: LogEntry) => st }, commit: () => { if (isEnabled) { - console.log( - `Clerk debug start :: ${name}\n${entries - .map(log => formatter(log)) - .map(e => `-- ${e}\n`) - .join('')}`, - ); + const log = `Clerk debug start :: ${name}\n${entries + .map(log => formatter(log)) + .map(e => `-- ${e}\n`) + .join('')}`; + if (process.env.VERCEL) { + console.log(truncate(log, 4096)); + } else { + console.log(log); + } } }, }; From 67f2bea5e07c6ba3f557307c74b0738d55aa5656 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 15 Aug 2023 15:59:29 -0400 Subject: [PATCH 2/4] fix(nextjs): Replace 3p package with inline function --- package-lock.json | 14 -------------- packages/nextjs/package.json | 1 - packages/nextjs/src/utils/debugLogger.ts | 14 ++++++++++++-- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index a8a373abb32..13c6afd03b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38692,14 +38692,6 @@ "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==", "peer": true }, - "node_modules/truncate-utf8-bytes": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", - "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==", - "dependencies": { - "utf8-byte-length": "^1.0.1" - } - }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", @@ -39922,11 +39914,6 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/utf8-byte-length": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz", - "integrity": "sha512-4+wkEYLBbWxqTahEsWrhxepcoVOJ+1z5PGIjPZxRkytcdSUaNjIjBM7Xn8E+pdSuV7SzvWovBFA54FO0JSoqhA==" - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -42014,7 +42001,6 @@ "@clerk/clerk-sdk-node": "^4.12.2", "@clerk/types": "^3.49.0", "path-to-regexp": "6.2.1", - "truncate-utf8-bytes": "^1.0.2", "tslib": "2.4.1" }, "devDependencies": { diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 8c3d2f5e500..5aabbc4e30e 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -80,7 +80,6 @@ "@clerk/clerk-sdk-node": "^4.12.2", "@clerk/types": "^3.49.0", "path-to-regexp": "6.2.1", - "truncate-utf8-bytes": "^1.0.2", "tslib": "2.4.1" }, "devDependencies": { diff --git a/packages/nextjs/src/utils/debugLogger.ts b/packages/nextjs/src/utils/debugLogger.ts index 169f03fcf63..6c8dd7d927b 100644 --- a/packages/nextjs/src/utils/debugLogger.ts +++ b/packages/nextjs/src/utils/debugLogger.ts @@ -1,7 +1,5 @@ // TODO: Replace with a more sophisticated logging solution -import truncate from 'truncate-utf8-bytes'; - import { logFormatter } from './logFormatter'; export type Log = string | Record; @@ -78,3 +76,15 @@ export const withLogger: WithLogger = (loggerFactoryOrName, handlerCtor) => { } }) as ReturnType; }; + +// ref: https://stackoverflow.com/questions/57769465/javascript-truncate-text-by-bytes-length +function truncate(str: string, maxLength: number) { + const encoder = new TextEncoder(); + const decoder = new TextDecoder('utf-8'); + + const encodedString = encoder.encode(str); + const truncatedString = encodedString.slice(0, maxLength); + + // return the truncated string, removing any replacement characters that result from partially truncated characters + return decoder.decode(truncatedString).replace(/\uFFFD/g, ''); +} From 858d35fafddfe89f5dbda848ad874d74cf90aa45 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 15 Aug 2023 16:00:51 -0400 Subject: [PATCH 3/4] chore(nextjs): Remove typings for 3p package --- package-lock.json | 7 ------- packages/nextjs/package.json | 1 - 2 files changed, 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 13c6afd03b1..ad35540a8de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12760,12 +12760,6 @@ "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==", "dev": true }, - "node_modules/@types/truncate-utf8-bytes": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.0.tgz", - "integrity": "sha512-pa3icl1RawLUUKmQE1h0G381EpWMU8bTnZT4YF3Ey9D7VI4fL1BQvgZ8HKbYok9kKXeUSCr/E3vnscW8Ck3QKg==", - "dev": true - }, "node_modules/@types/webpack-dev-server": { "version": "4.7.2", "resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-4.7.2.tgz", @@ -42007,7 +42001,6 @@ "@types/node": "^16.11.55", "@types/react": "*", "@types/react-dom": "*", - "@types/truncate-utf8-bytes": "^1.0.0", "node-fetch-native": "1.1.1", "typescript": "*" }, diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 5aabbc4e30e..f84fd008f2d 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -86,7 +86,6 @@ "@types/node": "^16.11.55", "@types/react": "*", "@types/react-dom": "*", - "@types/truncate-utf8-bytes": "^1.0.0", "node-fetch-native": "1.1.1", "typescript": "*" }, From c092747d013f790793edff27876dc0e2cdce56c5 Mon Sep 17 00:00:00 2001 From: Jeff Escalante Date: Tue, 15 Aug 2023 16:02:19 -0400 Subject: [PATCH 4/4] chore(nextjs): Add changeset --- .changeset/mean-walls-press.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mean-walls-press.md diff --git a/.changeset/mean-walls-press.md b/.changeset/mean-walls-press.md new file mode 100644 index 00000000000..0325ed19569 --- /dev/null +++ b/.changeset/mean-walls-press.md @@ -0,0 +1,5 @@ +--- +'@clerk/nextjs': patch +--- + +Logs that exceed maximum allowed length on Vercel deployments will now be truncated to max length exactly