feat: show version staleness in error overlay

packages/next/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,9 +34,12 @@ import {
   useWebsocketPing,
 } from './internal/helpers/use-websocket'
 
+import type { VersionInfo } from './internal/container/Errors'
+
 interface Dispatcher {
   onBuildOk(): void
   onBuildError(message: string): void
+  onVersionInfo(versionInfo: VersionInfo): void
   onBeforeRefresh(): void
   onRefresh(): void
 }
@@ -218,7 +224,8 @@ function processMessage(
         handleAvailableHash(obj.hash)
       }
 
-      const { errors, warnings } = obj
+      const { errors, warnings, versionInfo } = obj
+      dispatcher.onVersionInfo(versionInfo)
       const hasErrors = Boolean(errors && errors.length)
       // Compilation with errors (e.g. syntax error or missing modules).
       if (hasErrors) {
@@ -376,6 +383,7 @@ function processMessage(
       router.refresh()
       return
     }
+
     case 'pong': {
       const { invalid } = obj
       if (invalid) {
@@ -403,21 +411,25 @@ export default function HotReload({
     buildError: null,
     errors: [],
     refreshState: { type: 'idle' },
+    versionInfo: { installed: '0.0.0', staleness: 'fresh' },
   })
   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/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
@@ -73,15 +73,18 @@ class ReactDevOverlay extends React.PureComponent<
             <CssReset />
             <Base />
             <ComponentStyles />
-
             {rootLayoutMissingTagsError ? (
               <RootLayoutError
                 missingTags={rootLayoutMissingTagsError.missingTags}
               />
             ) : hasBuildError ? (
               <BuildError message={state.buildError!} />
             ) : reactError ? (
-              <Errors initialDisplayState="fullscreen" errors={[reactError]} />
+              <Errors
+                versionInfo={state.versionInfo}
+                initialDisplayState="fullscreen"
+                errors={[reactError]}
+              />
             ) : hasRuntimeErrors ? (
               <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : undefined}

packages/next/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/client/components/react-dev-overlay/internal/container/Errors.tsx

@@ -27,6 +27,7 @@ export type SupportedErrorEvent = {
 export type ErrorsProps = {
   errors: SupportedErrorEvent[]
   initialDisplayState: DisplayState
+  versionInfo?: VersionInfo
 }
 
 type ReadyErrorEvent = ReadyRuntimeError
@@ -78,9 +79,22 @@ const HotlinkedText: React.FC<{
   )
 }
 
+const stalenessTitles = {
+  fresh: 'Next.js is up to date!',
+  stale: 'Next.js is out of date, update recommended!',
+  outdated: 'Next.js is out of date, update necessary!',
+  unknown: 'Could not determine Next.js version',
+}
+
+export interface VersionInfo {
+  installed: string
+  staleness: keyof typeof stalenessTitles
+}
+
 export const Errors: React.FC<ErrorsProps> = function Errors({
   errors,
   initialDisplayState,
+  versionInfo,
 }) {
   const [lookups, setLookups] = React.useState(
     {} as { [eventId: string]: ReadyErrorEvent }
@@ -271,6 +285,13 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
                 <span>{readyErrors.length}</span> unhandled error
                 {readyErrors.length < 2 ? '' : 's'}
               </small>
+              <small
+                title={stalenessTitles[versionInfo!.staleness]}
+                className="nextjs-container-build-error-version-status"
+              >
+                Next.js {versionInfo!.installed}
+                <span className={versionInfo!.staleness} />
+              </small>
             </LeftRightDialogHeader>
             <h1 id="nextjs__container_errors_label">
               {isServerError ? 'Server Error' : 'Unhandled Runtime Error'}
@@ -365,4 +386,25 @@ export const styles = css`
   .nextjs-toast-errors-hide-button:hover {
     opacity: 1;
   }
+  .nextjs-container-build-error-version-status {
+    flex: 1;
+    text-align: right;
+  }
+  .nextjs-container-build-error-version-status span {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background: #eaeaea;
+    margin-left: var(--size-gap);
+  }
+  .nextjs-container-build-error-version-status span.fresh {
+    background: #50e3c2;
+  }
+  .nextjs-container-build-error-version-status span.outdated {
+    background: #e00;
+  }
+  .nextjs-container-build-error-version-status span.stale {
+    background: #f5a623;
+  }
 `

packages/next/client/components/react-dev-overlay/internal/error-overlay-reducer.ts

@@ -1,12 +1,13 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
-import { SupportedErrorEvent } from './container/Errors'
+import type { SupportedErrorEvent, VersionInfo } from './container/Errors'
 
 export const ACTION_BUILD_OK = 'build-ok'
 export const ACTION_BUILD_ERROR = 'build-error'
 export const ACTION_BEFORE_REFRESH = 'before-fast-refresh'
 export const ACTION_REFRESH = 'fast-refresh'
 export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
+export const ACTION_VERSION_INFO = 'version-info'
 
 interface BuildOkAction {
   type: typeof ACTION_BUILD_OK
@@ -32,6 +33,11 @@ export interface UnhandledRejectionAction {
   frames: StackFrame[]
 }
 
+interface VersionInfoAction {
+  type: typeof ACTION_VERSION_INFO
+  versionInfo: VersionInfo
+}
+
 export type FastRefreshState =
   | {
       type: 'idle'
@@ -49,6 +55,7 @@ export interface OverlayState {
     missingTags: string[]
   }
   refreshState: FastRefreshState
+  versionInfo: VersionInfo
 }
 
 function pushErrorFilterDuplicates(
@@ -64,17 +71,18 @@ function pushErrorFilterDuplicates(
   ]
 }
 
-export function errorOverlayReducer(
-  state: Readonly<OverlayState>,
-  action: Readonly<
+export const errorOverlayReducer: React.Reducer<
+  Readonly<OverlayState>,
+  Readonly<
     | BuildOkAction
     | BuildErrorAction
     | BeforeFastRefreshAction
     | FastRefreshAction
     | UnhandledErrorAction
     | UnhandledRejectionAction
+    | VersionInfoAction
   >
-): OverlayState {
+> = (state, action) => {
   switch (action.type) {
     case ACTION_BUILD_OK: {
       return { ...state, buildError: null }
@@ -134,6 +142,9 @@ export function errorOverlayReducer(
           return state
       }
     }
+    case ACTION_VERSION_INFO: {
+      return { ...state, versionInfo: action.versionInfo }
+    }
     default: {
       return state
     }

packages/next/server/dev/hot-middleware.ts

@@ -25,6 +25,7 @@ import type { webpack } from 'next/dist/compiled/webpack/webpack'
 import type ws from 'ws'
 import { isMiddlewareFilename } from '../../build/utils'
 import { nonNullable } from '../../lib/non-nullable'
+import type { VersionInfo } from '../../client/components/react-dev-overlay/internal/container/Errors'
 
 function isMiddlewareStats(stats: webpack.Stats) {
   for (const key of stats.compilation.entrypoints.keys()) {
@@ -85,13 +86,15 @@ export class WebpackHotMiddleware {
   middlewareLatestStats: { ts: number; stats: webpack.Stats } | null
   serverLatestStats: { ts: number; stats: webpack.Stats } | null
   closed: boolean
+  versionInfo: VersionInfo
 
-  constructor(compilers: webpack.Compiler[]) {
+  constructor(compilers: webpack.Compiler[], versionInfo: VersionInfo) {
     this.eventStream = new EventStream()
     this.clientLatestStats = null
     this.middlewareLatestStats = null
     this.serverLatestStats = null
     this.closed = false
+    this.versionInfo = versionInfo
 
     compilers[0].hooks.invalid.tap(
       'webpack-hot-middleware',
@@ -182,6 +185,7 @@ export class WebpackHotMiddleware {
           ...(stats.warnings || []),
           ...(middlewareStats.warnings || []),
         ],
+        versionInfo: this.versionInfo,
       })
     }
   }

packages/next/server/dev/hot-reloader.ts

@@ -1,4 +1,5 @@
 import { webpack, StringXor } from 'next/dist/compiled/webpack/webpack'
+import * as semver from 'next/dist/compiled/semver'
 import type { NextConfigComplete } from '../config-shared'
 import type { CustomRoutes } from '../../lib/load-custom-routes'
 import { getOverlayMiddleware } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
@@ -47,6 +48,7 @@ import ws from 'next/dist/compiled/ws'
 import { promises as fs } from 'fs'
 import { getPageStaticInfo } from '../../build/analysis/get-page-static-info'
 import { UnwrapPromise } from '../../lib/coalesced-function'
+import type { VersionInfo } from '../../client/components/react-dev-overlay/internal/container/Errors'
 
 function diff(a: Set<any>, b: Set<any>) {
   return new Set([...a].filter((v) => !b.has(v)))
@@ -178,6 +180,10 @@ export default class HotReloader {
   private hotReloaderSpan: Span
   private pagesMapping: { [key: string]: string } = {}
   private appDir?: string
+  private versionInfo: VersionInfo = {
+    staleness: 'unknown',
+    installed: '0.0.0',
+  }
   public multiCompiler?: webpack.MultiCompiler
   public activeConfigs?: Array<
     UnwrapPromise<ReturnType<typeof getBaseWebpackConfig>>
@@ -414,6 +420,42 @@ export default class HotReloader {
       )
   }
 
+  private async getVersionInfo(span: Span) {
+    const versionInfoSpan = span.traceChild('get-version-info')
+    return versionInfoSpan.traceAsyncFn<VersionInfo>(async () => {
+      // TODO: Get the correct values
+      const installed = semver.parse('13.0.6')
+      const latest = semver.parse('13.0.8')
+      const canary = semver.parse('13.0.8-canary.8')
+
+      let staleness: VersionInfo['staleness'] = 'unknown'
+
+      if (installed && latest && canary) {
+        if (installed.major < latest.major) {
+          // Old version
+          staleness = 'outdated'
+        } else if (
+          // Canary, but old
+          installed.prerelease[0] === 'canary' &&
+          semver.lt(installed, canary)
+        ) {
+          staleness = 'outdated'
+        } else if (
+          // Stable, but not the latest
+          !installed.prerelease.length &&
+          semver.lt(installed, latest)
+        ) {
+          staleness = 'stale'
+        } else {
+          // Latest
+          staleness = 'fresh'
+        }
+      }
+
+      return { installed: installed?.raw ?? '0.0.0', staleness }
+    })
+  }
+
   private async getWebpackConfig(span: Span) {
     const webpackConfigSpan = span.traceChild('get-webpack-config')
 
@@ -558,6 +600,8 @@ export default class HotReloader {
     const startSpan = this.hotReloaderSpan.traceChild('start')
     startSpan.stop() // Stop immediately to create an artificial parent span
 
+    this.versionInfo = await this.getVersionInfo(startSpan)
+
     await this.clean(startSpan)
     // Ensure distDir exists before writing package.json
     await fs.mkdir(this.distDir, { recursive: true })
@@ -1039,7 +1083,8 @@ export default class HotReloader {
     )
 
     this.webpackHotMiddleware = new WebpackHotMiddleware(
-      this.multiCompiler.compilers
+      this.multiCompiler.compilers,
+      this.versionInfo
     )
 
     let booted = false