devtools: couple restart dev server UI with persistent cache flag (#80751)

The goal of this UI is to surface a nudge when we think that the server
might be in a bad state due to persistent caching problems. It probably
doesn't make sense to show up in any other case. While we work to figure
out the best way to nudge it in dev, this couples the behavior behind
the persistent caching flag.

---------

Co-authored-by: Sebastian "Sebbie" Silbermann <[email protected]>

Author: ztanner

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx

@@ -15,7 +15,9 @@ export function ErrorOverlayToolbar({
 }: ErrorOverlayToolbarProps) {
   return (
     <span className="error-overlay-toolbar">
-      <RestartServerButton error={error} />
+      {process.env.__NEXT_BUNDLER_HAS_PERSISTENT_CACHE && (
+        <RestartServerButton error={error} />
+      )}
       <CopyStackTraceButton error={error} />
       <DocsLinkButton errorMessage={error.message} />
       <NodejsInspectorButton

packages/next/src/next-devtools/dev-overlay/components/errors/error-overlay-toolbar/restart-server-button.tsx

@@ -2,12 +2,11 @@ import { useState, useEffect } from 'react'
 import { RefreshClockWise } from '../../../icons/refresh-clock-wise'
 
 /**
- * When the user reloads on a specific error and that error persists, we show
- * the restart server button as an option. This is because some errors are
- * recoverable by restarting the server and rebuilding the app.
- *
- * When Turbopack persistent cache is enabled, it will also clear the bundler
- * cache. This improves DX by replacing the need to run `rm -rf .next` manually.
+ * When the Turbopack persistent cache is enabled, and the user reloads on a
+ * specific error and that error persists, we show the restart server button as
+ * an option. This is because some errors are recoverable by clearing the
+ * bundler cache, but we want to provide a shortcut to do this and collect
+ * telemetry on how often this is used.
  */
 export function RestartServerButton({ error }: { error: Error }) {
   const [showButton, setShowButton] = useState(false)
@@ -32,14 +31,8 @@ export function RestartServerButton({ error }: { error: Error }) {
   }
 
   function handleClick() {
-    let endpoint = '/__nextjs_restart_dev'
-
-    if (process.env.__NEXT_BUNDLER_HAS_PERSISTENT_CACHE) {
-      endpoint = '/__nextjs_restart_dev?invalidatePersistentCache'
-    }
-
     // TODO: Use Client Action for transition indicator when DevTools is isolated.
-    fetch(endpoint, {
+    fetch('/__nextjs_restart_dev?invalidatePersistentCache', {
       method: 'POST',
     }).then(() => {
       // TODO: poll server status and reload when the server is back up.
@@ -51,14 +44,10 @@ export function RestartServerButton({ error }: { error: Error }) {
     <button
       className="restart-dev-server-button"
       onClick={handleClick}
-      title={
-        process.env.__NEXT_BUNDLER_HAS_PERSISTENT_CACHE
-          ? 'Clears the bundler cache and restarts the dev server. Helpful if you are seeing stale errors or changes are not appearing.'
-          : 'Restarts the development server without needing to leave the browser.'
-      }
+      title="Clears the bundler cache and restarts the dev server. Helpful if you are seeing stale errors or changes are not appearing."
     >
       <RefreshClockWise width={14} height={14} />
-      Restart Dev Server
+      Clear Bundler Cache &amp; Restart
     </button>
   )
 }