feat: show version staleness in error overlay

errors/manifest.json

@@ -793,6 +793,10 @@
         {
           "title": "app-static-to-dynamic-error",
           "path": "/errors/app-static-to-dynamic-error.md"
+        },
+        {
+          "title": "version-staleness",
+          "path": "/errors/version-staleness.md"
         }
       ]
     }

errors/opening-an-issue.md

@@ -2,7 +2,7 @@
 
 #### Why This Message Occurred
 
-When `next info` was run, Next.js detected that it's was not on the latest canary release.
+When `next info` was run, Next.js detected that it was not on the newest canary release.
 
 `next@canary` is the canary version of Next.js that ships daily. It includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta.
 
@@ -26,3 +26,6 @@ And go through the prepared reproduction steps once again, and check if the issu
 
 - [Video: How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?v=cuoNzXFLitc)
 - [Contributing to Next.js](https://github.com/vercel/next.js/blob/canary/contributing.md)
+- [Triaging issues](https://github.com/vercel/next.js/blob/canary/contributing/repository/triaging.md)
+- [Verifiying canary](https://github.com/vercel/next.js/blob/canary/.github/actions/issue-validator/canary.md)
+- [Adding a reproduction](https://github.com/vercel/next.js/blob/canary/.github/actions/issue-validator/repro.md)

errors/version-staleness.md

@@ -0,0 +1,52 @@
+# Version Staleness
+
+#### Why This Error Occurred
+
+In the error overlay, a message was shown that the detected Next.js version was out-of-date.
+
+To get the newest features and bug fixes, it is recommended to stay up to date.
+
+#### Possible Ways to Fix It
+
+If you are testing out a canary release, upgrade Next.js with one of the following:
+
+```sh
+npm i next@canary
+```
+
+```sh
+yarn add next@canary
+```
+
+```sh
+pnpm add next@canary
+```
+
+If you are using a stable release, upgrade Next.js with one of the following:
+
+```sh
+npm i next@latest
+```
+
+```sh
+yarn add next@latest
+```
+
+```sh
+pnpm add next@latest
+```
+
+If you are coming from an older major version, check out our [upgrade guides](https://nextjs.org/docs/upgrading).
+
+### Note
+
+If you want to report a bug on GitHub, you should upgrade to the newest canary release of Next.js first, to see if the bug has already been fixed in canary.
+
+### Useful Links
+
+- [Upgrade guide](https://nextjs.org/docs/upgrading)
+- [Video: How to Contribute to Open Source (Next.js)](https://www.youtube.com/watch?v=cuoNzXFLitc)
+- [Contributing to Next.js](https://github.com/vercel/next.js/blob/canary/contributing.md)
+- [Triaging issues](https://github.com/vercel/next.js/blob/canary/contributing/repository/triaging.md)
+- [Verifiying canary](https://github.com/vercel/next.js/blob/canary/.github/actions/issue-validator/canary.md)
+- [Adding a reproduction](https://github.com/vercel/next.js/blob/canary/.github/actions/issue-validator/repro.md)

packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx

@@ -10,7 +10,10 @@ import React, {
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import formatWebpackMessages from '../../dev/error-overlay/format-webpack-messages'
 import { useRouter } from '../navigation'
-import { errorOverlayReducer } from './internal/error-overlay-reducer'
+import {
+  ACTION_VERSION_INFO,
+  errorOverlayReducer,
+} from './internal/error-overlay-reducer'
 import {
   ACTION_BUILD_OK,
   ACTION_BUILD_ERROR,
@@ -31,10 +34,12 @@ import {
   useWebsocketPing,
 } from './internal/helpers/use-websocket'
 import { parseComponentStack } from './internal/helpers/parse-component-stack'
+import type { VersionInfo } from './internal/components/VersionStalenessInfo'
 
 interface Dispatcher {
   onBuildOk(): void
   onBuildError(message: string): void
+  onVersionInfo(versionInfo: VersionInfo): void
   onBeforeRefresh(): void
   onRefresh(): void
 }
@@ -218,7 +223,12 @@ function processMessage(
         handleAvailableHash(obj.hash)
       }
 
-      const { errors, warnings } = obj
+      const { errors, warnings, versionInfo } = obj
+
+      // Is undefined when it's a 'built' event
+      if (versionInfo) {
+        dispatcher.onVersionInfo(versionInfo)
+      }
       const hasErrors = Boolean(errors && errors.length)
       // Compilation with errors (e.g. syntax error or missing modules).
       if (hasErrors) {
@@ -403,21 +413,25 @@ export default function HotReload({
     buildError: null,
     errors: [],
     refreshState: { type: 'idle' },
+    versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   })
   const dispatcher = useMemo((): Dispatcher => {
     return {
-      onBuildOk(): void {
+      onBuildOk() {
         dispatch({ type: ACTION_BUILD_OK })
       },
-      onBuildError(message: string): void {
+      onBuildError(message) {
         dispatch({ type: ACTION_BUILD_ERROR, message })
       },
-      onBeforeRefresh(): void {
+      onBeforeRefresh() {
         dispatch({ type: ACTION_BEFORE_REFRESH })
       },
-      onRefresh(): void {
+      onRefresh() {
         dispatch({ type: ACTION_REFRESH })
       },
+      onVersionInfo(versionInfo) {
+        dispatch({ type: ACTION_VERSION_INFO, versionInfo })
+      },
     }
   }, [dispatch])
 

packages/next/src/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx

@@ -8,11 +8,11 @@ import {
 import { ShadowPortal } from './components/ShadowPortal'
 import { BuildError } from './container/BuildError'
 import { Errors, SupportedErrorEvent } from './container/Errors'
+import { RootLayoutError } from './container/RootLayoutError'
+import { parseStack } from './helpers/parseStack'
 import { Base } from './styles/Base'
 import { ComponentStyles } from './styles/ComponentStyles'
 import { CssReset } from './styles/CssReset'
-import { parseStack } from './helpers/parseStack'
-import { RootLayoutError } from './container/RootLayoutError'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
@@ -79,11 +79,22 @@ class ReactDevOverlay extends React.PureComponent<
                 missingTags={rootLayoutMissingTagsError.missingTags}
               />
             ) : hasBuildError ? (
-              <BuildError message={state.buildError!} />
+              <BuildError
+                message={state.buildError!}
+                versionInfo={state.versionInfo}
+              />
             ) : reactError ? (
-              <Errors initialDisplayState="fullscreen" errors={[reactError]} />
+              <Errors
+                versionInfo={state.versionInfo}
+                initialDisplayState="fullscreen"
+                errors={[reactError]}
+              />
             ) : hasRuntimeErrors ? (
-              <Errors initialDisplayState="minimized" errors={state.errors} />
+              <Errors
+                initialDisplayState="minimized"
+                errors={state.errors}
+                versionInfo={state.versionInfo}
+              />
             ) : undefined}
           </ShadowPortal>
         ) : undefined}

packages/next/src/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts

@@ -8,6 +8,12 @@ const styles = css`
     align-items: center;
     justify-content: space-between;
   }
+  [data-nextjs-dialog-left-right] > nav {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    margin-right: var(--size-gap);
+  }
   [data-nextjs-dialog-left-right] > nav > button {
     display: inline-flex;
     align-items: center;

packages/next/src/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/VersionStalenessInfo.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+
+export interface VersionInfo {
+  installed: string
+  staleness:
+    | 'fresh'
+    | 'stale-patch'
+    | 'stale-minor'
+    | 'stale-major'
+    | 'stale-prerelease'
+    | 'newer-than-npm'
+    | 'unknown'
+  expected?: string
+}
+
+export function VersionStalenessInfo(props: VersionInfo) {
+  if (!props) return null
+  const { staleness, installed, expected } = props
+  let text = ''
+  let title = ''
+  let indicatorClass = ''
+  switch (staleness) {
+    case 'fresh':
+      text = 'Next.js is up to date'
+      title = `Latest available version is detected (${installed}).`
+      indicatorClass = 'fresh'
+      break
+    case 'stale-patch':
+    case 'stale-minor':
+      text = `Next.js (${installed}) out of date`
+      title = `There is a newer version (${expected}) available, upgrade recommended! `
+      indicatorClass = 'stale'
+      break
+    case 'stale-major': {
+      text = `Next.js (${installed}) is outdated`
+      title = `An outdated version detected (latest is ${expected}), upgrade is highly recommended!`
+      indicatorClass = 'outdated'
+      break
+    }
+    case 'stale-prerelease': {
+      text = `Next.js (${installed}) is outdated`
+      title = `There is a newer canary version (${expected}) available, please upgrade! `
+      indicatorClass = 'stale'
+      break
+    }
+    case 'newer-than-npm':
+    case 'unknown':
+      break
+    default:
+      break
+  }
+
+  if (!text) return null
+
+  return (
+    <small className="nextjs-container-build-error-version-status">
+      <span className={indicatorClass} />
+      <small
+        className="nextjs-container-build-error-version-status"
+        title={title}
+      >
+        {text}
+      </small>{' '}
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://nextjs.org/docs/messages/version-staleness"
+      >
+        (learn more)
+      </a>
+    </small>
+  )
+}

packages/next/src/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/index.tsx

@@ -0,0 +1,2 @@
+export { styles } from './styles'
+export { VersionStalenessInfo, VersionInfo } from './VersionStalenessInfo'

packages/next/src/client/components/react-dev-overlay/internal/components/VersionStalenessInfo/styles.ts

@@ -0,0 +1,33 @@
+import { noop as css } from '../../helpers/noop-template'
+
+const styles = css`
+  .nextjs-container-build-error-version-status {
+    flex: 1;
+    text-align: right;
+  }
+  .nextjs-container-build-error-version-status small {
+    margin-left: var(--size-gap);
+    font-size: var(--size-font-small);
+  }
+  .nextjs-container-build-error-version-status a {
+    font-size: var(--size-font-small);
+  }
+  .nextjs-container-build-error-version-status span {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background: var(--color-ansi-bright-black);
+  }
+  .nextjs-container-build-error-version-status span.fresh {
+    background: var(--color-ansi-green);
+  }
+  .nextjs-container-build-error-version-status span.stale {
+    background: var(--color-ansi-yellow);
+  }
+  .nextjs-container-build-error-version-status span.outdated {
+    background: var(--color-ansi-red);
+  }
+`
+
+export { styles }

packages/next/src/client/components/react-dev-overlay/internal/container/BuildError.tsx

@@ -7,12 +7,17 @@ import {
 } from '../components/Dialog'
 import { Overlay } from '../components/Overlay'
 import { Terminal } from '../components/Terminal'
+import {
+  VersionInfo,
+  VersionStalenessInfo,
+} from '../components/VersionStalenessInfo'
 import { noop as css } from '../helpers/noop-template'
 
-export type BuildErrorProps = { message: string }
+export type BuildErrorProps = { message: string; versionInfo?: VersionInfo }
 
 export const BuildError: React.FC<BuildErrorProps> = function BuildError({
   message,
+  versionInfo,
 }) {
   const noop = React.useCallback(() => {}, [])
   return (
@@ -26,6 +31,7 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
         <DialogContent>
           <DialogHeader className="nextjs-container-build-error-header">
             <h4 id="nextjs__container_build_error_label">Failed to compile</h4>
+            {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
           </DialogHeader>
           <DialogBody className="nextjs-container-build-error-body">
             <Terminal content={message} />
@@ -45,6 +51,10 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
 }
 
 export const styles = css`
+  .nextjs-container-build-error-header {
+    display: flex;
+    align-items: center;
+  }
   .nextjs-container-build-error-header > h4 {
     line-height: 1.5;
     margin: 0;

packages/next/src/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -19,6 +19,10 @@ import { getErrorSource } from '../helpers/nodeStackFrames'
 import { noop as css } from '../helpers/noop-template'
 import { CloseIcon } from '../icons/CloseIcon'
 import { RuntimeError } from './RuntimeError'
+import {
+  VersionInfo,
+  VersionStalenessInfo,
+} from '../components/VersionStalenessInfo'
 
 export type SupportedErrorEvent = {
   id: number
@@ -27,6 +31,7 @@ export type SupportedErrorEvent = {
 export type ErrorsProps = {
   errors: SupportedErrorEvent[]
   initialDisplayState: DisplayState
+  versionInfo?: VersionInfo
 }
 
 type ReadyErrorEvent = ReadyRuntimeError
@@ -81,6 +86,7 @@ const HotlinkedText: React.FC<{
 export const Errors: React.FC<ErrorsProps> = function Errors({
   errors,
   initialDisplayState,
+  versionInfo,
 }) {
   const [lookups, setLookups] = React.useState(
     {} as { [eventId: string]: ReadyErrorEvent }
@@ -271,6 +277,7 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
                 <span>{readyErrors.length}</span> unhandled error
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
+              {versionInfo ? <VersionStalenessInfo {...versionInfo} /> : null}
             </LeftRightDialogHeader>
             <h1 id="nextjs__container_errors_label">
               {isServerError ? 'Server Error' : 'Unhandled Runtime Error'}