Merge branch 'canary' into fix/draft-mode-invariant

vercel · Feb 21, 2024 · 7042b15 · 7042b15
2 parents b8baba9 + 2f9d718
commit 7042b15
Show file tree

Hide file tree

Showing 22 changed files with 128 additions and 100 deletions.
diff --git a/docs/02-app/02-api-reference/04-functions/unstable_cache.mdx b/docs/02-app/02-api-reference/04-functions/unstable_cache.mdx
@@ -21,7 +21,7 @@ export default async function Component({ userID }) {
 ```
 
 > **Good to know**:
-> Accessing dynamic data sources such as `headers` or `cookies` inside a cache scope is not supported. If you need this data inside a cached function use `headers` oustide of the cached function and pass the required dynamic data in as an argument.
+> Accessing dynamic data sources such as `headers` or `cookies` inside a cache scope is not supported. If you need this data inside a cached function use `headers` outside of the cached function and pass the required dynamic data in as an argument.
 
 > **Warning**: This API is unstable and may change in the future. We will provide migration documentation and codemods, if needed, as this API stabilizes.
 

diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "14.1.1-canary.64"
+  "version": "14.1.1-canary.65"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
-    "@next/eslint-plugin-next": "14.1.1-canary.64",
+    "@next/eslint-plugin-next": "14.1.1-canary.65",
     "@rushstack/eslint-patch": "^1.3.3",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
     "eslint-import-resolver-node": "^0.3.6",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "license": "MIT",

diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "private": true,
   "scripts": {
     "clean": "node ../../scripts/rm.mjs native",

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -92,7 +92,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "14.1.1-canary.64",
+    "@next/env": "14.1.1-canary.65",
     "@swc/helpers": "0.5.5",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001579",
@@ -145,10 +145,10 @@
     "@jest/types": "29.5.0",
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/triples": "1.2.0",
-    "@next/polyfill-module": "14.1.1-canary.64",
-    "@next/polyfill-nomodule": "14.1.1-canary.64",
-    "@next/react-refresh-utils": "14.1.1-canary.64",
-    "@next/swc": "14.1.1-canary.64",
+    "@next/polyfill-module": "14.1.1-canary.65",
+    "@next/polyfill-nomodule": "14.1.1-canary.65",
+    "@next/react-refresh-utils": "14.1.1-canary.65",
+    "@next/swc": "14.1.1-canary.65",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.41.2",
     "@taskr/clear": "1.1.0",

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -102,6 +102,10 @@ import {
   createPostponedAbortSignal,
 } from './dynamic-rendering'
 import { GLOBAL_NOT_FOUND_SEGMENT_KEY } from '../../shared/lib/segment'
+import {
+  getClientComponentLoaderMetrics,
+  wrapClientComponentLoader,
+} from '../client-component-renderer-logger'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -615,69 +619,30 @@ async function renderToHTMLOrFlightImpl(
     enableTainting,
   } = renderOpts
 
-  // Combined load times for loading client components
-  let clientComponentLoadStart = 0
-  let clientComponentLoadTimes = 0
-  let clientComponentLoadCount = 0
-
   // We need to expose the bundled `require` API globally for
   // react-server-dom-webpack. This is a hack until we find a better way.
   if (ComponentMod.__next_app__) {
+    const instrumented = wrapClientComponentLoader(ComponentMod)
     // @ts-ignore
-    globalThis.__next_require__ = (...args: any[]) => {
-      if (clientComponentLoadStart === 0) {
-        clientComponentLoadStart = Date.now()
-      }
-
-      const startTime = Date.now()
-      try {
-        clientComponentLoadCount += 1
-        return ComponentMod.__next_app__.require(...args)
-      } finally {
-        clientComponentLoadTimes += Date.now() - startTime
-      }
-    }
-
+    globalThis.__next_require__ = instrumented.require
     // @ts-ignore
-    globalThis.__next_chunk_load__ = (...args: any[]) => {
-      const startTime = Date.now()
-      try {
-        clientComponentLoadCount += 1
-        return ComponentMod.__next_app__.loadChunk(...args)
-      } finally {
-        clientComponentLoadTimes += Date.now() - startTime
-      }
-    }
+    globalThis.__next_chunk_load__ = instrumented.loadChunk
   }
 
   if (typeof req.on === 'function') {
     req.on('end', () => {
-      const type = NextNodeServerSpan.clientComponentLoading
-      const startTime = clientComponentLoadStart
-      const endTime = clientComponentLoadStart + clientComponentLoadTimes
-      getTracer()
-        .startSpan(type, {
-          startTime,
-          attributes: {
-            'next.clientComponentLoadCount': clientComponentLoadCount,
-          },
-        })
-        .end(endTime)
-
-      if (
-        typeof performance !== 'undefined' &&
-        process.env.NEXT_OTEL_PERFORMANCE_PREFIX
-      ) {
-        const { timeOrigin } = performance
-        performance.measure(
-          `${process.env.NEXT_OTEL_PERFORMANCE_PREFIX}:next-${(
-            type.split('.').pop() || ''
-          ).replace(/[A-Z]/g, (match: string) => '-' + match.toLowerCase())}`,
-          {
-            start: startTime - timeOrigin,
-            end: endTime - timeOrigin,
-          }
-        )
+      if ('performance' in globalThis) {
+        const metrics = getClientComponentLoaderMetrics({ reset: true })
+        getTracer()
+          .startSpan(NextNodeServerSpan.clientComponentLoading, {
+            startTime: metrics.clientComponentLoadStart,
+            attributes: {
+              'next.clientComponentLoadCount': metrics.clientComponentLoadCount,
+            },
+          })
+          .end(
+            metrics.clientComponentLoadStart + metrics.clientComponentLoadTimes
+          )
       }
     })
   }

diff --git a/packages/next/src/server/client-component-renderer-logger.ts b/packages/next/src/server/client-component-renderer-logger.ts
@@ -0,0 +1,53 @@
+// Combined load times for loading client components
+let clientComponentLoadStart = 0
+let clientComponentLoadTimes = 0
+let clientComponentLoadCount = 0
+
+export function wrapClientComponentLoader(ComponentMod: any) {
+  if (!('performance' in globalThis)) {
+    return ComponentMod.__next_app__
+  }
+
+  return {
+    require: (...args: any[]) => {
+      if (clientComponentLoadStart === 0) {
+        clientComponentLoadStart = performance.now()
+      }
+
+      const startTime = performance.now()
+      try {
+        clientComponentLoadCount += 1
+        return ComponentMod.__next_app__.require(...args)
+      } finally {
+        clientComponentLoadTimes += performance.now() - startTime
+      }
+    },
+    loadChunk: (...args: any[]) => {
+      const startTime = performance.now()
+      try {
+        clientComponentLoadCount += 1
+        return ComponentMod.__next_app__.loadChunk(...args)
+      } finally {
+        clientComponentLoadTimes += performance.now() - startTime
+      }
+    },
+  }
+}
+
+export function getClientComponentLoaderMetrics(
+  options: { reset?: boolean } = {}
+) {
+  const metrics = {
+    clientComponentLoadStart,
+    clientComponentLoadTimes,
+    clientComponentLoadCount,
+  }
+
+  if (options.reset) {
+    clientComponentLoadStart = 0
+    clientComponentLoadTimes = 0
+    clientComponentLoadCount = 0
+  }
+
+  return metrics
+}
diff --git a/packages/next/src/server/lib/trace/tracer.ts b/packages/next/src/server/lib/trace/tracer.ts
@@ -232,16 +232,6 @@ class NextTracerImpl implements NextTracer {
 
     const spanName = options.spanName ?? type
 
-    if (process.env.NEXT_OTEL_LOG_PREFIX && LogSpanAllowList.includes(type)) {
-      performance.measure(
-        `${process.env.NEXT_OTEL_LOG_PREFIX}:next-${spanName.replace(
-          /[A-Z]/g,
-          (match: string) => '-' + match.toLowerCase()
-        )}`,
-        {}
-      )
-    }
-
     if (
       (!NextVanillaSpanAllowlist.includes(type) &&
         process.env.NEXT_OTEL_VERBOSE !== '1') ||
@@ -276,16 +266,18 @@ class NextTracerImpl implements NextTracer {
         spanName,
         options,
         (span: Span) => {
-          const startTime = Date.now()
+          const startTime =
+            'performance' in globalThis
+              ? globalThis.performance.now()
+              : undefined
 
           const onCleanup = () => {
             rootSpanAttributesStore.delete(spanId)
             if (
-              typeof performance !== 'undefined' &&
+              startTime &&
               process.env.NEXT_OTEL_PERFORMANCE_PREFIX &&
               LogSpanAllowList.includes(type || ('' as any))
             ) {
-              const { timeOrigin } = performance
               performance.measure(
                 `${process.env.NEXT_OTEL_PERFORMANCE_PREFIX}:next-${(
                   type.split('.').pop() || ''
@@ -294,8 +286,8 @@ class NextTracerImpl implements NextTracer {
                   (match: string) => '-' + match.toLowerCase()
                 )}`,
                 {
-                  start: startTime - timeOrigin,
-                  end: Date.now() - timeOrigin,
+                  start: startTime,
+                  end: performance.now(),
                 }
               )
             }

diff --git a/packages/next/src/server/pipe-readable.ts b/packages/next/src/server/pipe-readable.ts
@@ -7,6 +7,7 @@ import {
 import { DetachedPromise } from '../lib/detached-promise'
 import { getTracer } from './lib/trace/tracer'
 import { NextNodeServerSpan } from './lib/trace/constants'
+import { getClientComponentLoaderMetrics } from './client-component-renderer-logger'
 
 export function isAbortError(e: any): e is Error & { name: 'AbortError' } {
   return e?.name === 'AbortError' || e?.name === ResponseAbortedName
@@ -48,6 +49,23 @@ function createWriterFromResponse(
       // started writing chunks.
       if (!started) {
         started = true
+
+        if (
+          'performance' in globalThis &&
+          process.env.NEXT_OTEL_PERFORMANCE_PREFIX
+        ) {
+          const metrics = getClientComponentLoaderMetrics()
+          performance.measure(
+            `${process.env.NEXT_OTEL_PERFORMANCE_PREFIX}:next-client-component-loading`,
+            {
+              start: metrics.clientComponentLoadStart,
+              end:
+                metrics.clientComponentLoadStart +
+                metrics.clientComponentLoadTimes,
+            }
+          )
+        }
+
         res.flushHeaders()
         getTracer().trace(
           NextNodeServerSpan.startResponse,

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "14.1.1-canary.64",
+  "version": "14.1.1-canary.65",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",