From 34f5236f572b9f6a2e3c55a537a6a717ffaae71d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= <info@balazsorban.com>
Date: Wed, 27 Jul 2022 17:15:37 +0200
Subject: [PATCH] fix: show `asPath` on large page data warning (#39071)

Fixes #39057

Will now show:
```
Warning: data for page "/[[...slug]]" (path "/some-page") is 256 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
```

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
---
 packages/next/pages/_document.tsx                    |  6 +++++-
 test/e2e/prerender.test.ts                           | 10 ++++++++++
 test/e2e/prerender/pages/blocking-fallback/[slug].js | 11 +++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 3086c431568c..a5e24bed21dc 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -978,7 +978,11 @@ export class NextScript extends Component<OriginProps> {
 
       if (largePageDataBytes && bytes > largePageDataBytes) {
         console.warn(
-          `Warning: data for page "${__NEXT_DATA__.page}" is ${prettyBytes(
+          `Warning: data for page "${__NEXT_DATA__.page}"${
+            __NEXT_DATA__.page === context.dangerousAsPath
+              ? ''
+              : ` (path "${context.dangerousAsPath}")`
+          } is ${prettyBytes(
             bytes
           )} which exceeds the threshold of ${prettyBytes(
             largePageDataBytes
diff --git a/test/e2e/prerender.test.ts b/test/e2e/prerender.test.ts
index ed06c391e93e..35e4d9acdebd 100644
--- a/test/e2e/prerender.test.ts
+++ b/test/e2e/prerender.test.ts
@@ -198,6 +198,11 @@ describe('Prerender', () => {
       initialRevalidateSeconds: 1,
       srcRoute: '/blocking-fallback-some/[slug]',
     },
+    '/blocking-fallback/lots-of-data': {
+      dataRoute: `/_next/data/${next.buildId}/blocking-fallback/lots-of-data.json`,
+      initialRevalidateSeconds: false,
+      srcRoute: '/blocking-fallback/[slug]',
+    },
     '/blocking-fallback/test-errors-1': {
       dataRoute: `/_next/data/${next.buildId}/blocking-fallback/test-errors-1.json`,
       initialRevalidateSeconds: 1,
@@ -962,6 +967,11 @@ describe('Prerender', () => {
         () => next.cliOutput,
         /Warning: data for page "\/large-page-data" is 256 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance/
       )
+      await renderViaHTTP(next.url, '/blocking-fallback/lots-of-data')
+      await check(
+        () => next.cliOutput,
+        /Warning: data for page "\/blocking-fallback\/\[slug\]" \(path "\/blocking-fallback\/lots-of-data"\) is 256 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance/
+      )
     })
 
     if ((global as any).isNextDev) {
diff --git a/test/e2e/prerender/pages/blocking-fallback/[slug].js b/test/e2e/prerender/pages/blocking-fallback/[slug].js
index cf6aec867a32..af957a3c98f8 100644
--- a/test/e2e/prerender/pages/blocking-fallback/[slug].js
+++ b/test/e2e/prerender/pages/blocking-fallback/[slug].js
@@ -10,12 +10,23 @@ export async function getStaticPaths() {
       {
         params: { slug: 'test-errors-1' },
       },
+      {
+        params: { slug: 'lots-of-data' },
+      },
     ],
     fallback: 'blocking',
   }
 }
 
 export async function getStaticProps({ params }) {
+  if (params.slug === 'lots-of-data') {
+    return {
+      props: {
+        lotsOfData: new Array(256 * 1000).fill('a').join(''),
+      },
+    }
+  }
+
   if (params.slug.startsWith('test-errors')) {
     const errorFile = path.join(process.cwd(), 'error.txt')
     if (fs.existsSync(errorFile)) {