diff --git a/packages/next/client/dev/error-overlay/hot-dev-client.js b/packages/next/client/dev/error-overlay/hot-dev-client.js
index dc13c80cca42b..d6b0918952bcd 100644
--- a/packages/next/client/dev/error-overlay/hot-dev-client.js
+++ b/packages/next/client/dev/error-overlay/hot-dev-client.js
@@ -31,7 +31,6 @@ import {
   onBuildError,
   onBuildOk,
   onRefresh,
-  onFullRefreshNeeded,
 } from 'next/dist/compiled/@next/react-dev-overlay/dist/client'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { addMessageListener, sendMessage } from './websocket'
@@ -314,15 +313,23 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   function handleApplyUpdates(err, updatedModules) {
     if (err || hadRuntimeError || !updatedModules) {
       if (err) {
-        performFullRefresh(err)
+        console.warn(
+          '[Fast Refresh] performing full reload\n\n' +
+            "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.\n" +
+            'You might have a file which exports a React component but also exports a value that is imported by a non-React component file.\n' +
+            'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' +
+            'It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.\n' +
+            'Fast Refresh requires at least one parent function component in your React tree.'
+        )
       } else if (hadRuntimeError) {
-        performFullRefresh()
+        console.warn(
+          '[Fast Refresh] performing full reload because your application had an unrecoverable error'
+        )
       }
+      performFullReload(err)
       return
     }
 
-    clearFullRefreshStorage()
-
     const hasUpdates = Boolean(updatedModules.length)
     if (typeof onHotUpdateSuccess === 'function') {
       // Maybe we want to do something.
@@ -356,27 +363,19 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   )
 }
 
-const FULL_REFRESH_STORAGE_KEY = '_has_warned_about_full_refresh'
-
-function performFullRefresh(err) {
-  if (!hasAlreadyWarnedAboutFullRefresh()) {
-    sessionStorage.setItem(FULL_REFRESH_STORAGE_KEY, 'true')
-    const reason =
-      err &&
-      ((err.stack && err.stack.split('\n').slice(0, 5).join('\n')) ||
-        err.message ||
-        err + '')
-    onFullRefreshNeeded(reason)
-  } else {
-    window.location.reload()
-  }
-}
-
-function hasAlreadyWarnedAboutFullRefresh() {
-  return sessionStorage.getItem(FULL_REFRESH_STORAGE_KEY) !== null
-}
+function performFullReload(err) {
+  const stackTrace =
+    err &&
+    ((err.stack && err.stack.split('\n').slice(0, 5).join('\n')) ||
+      err.message ||
+      err + '')
+
+  sendMessage(
+    JSON.stringify({
+      event: 'client-full-reload',
+      stackTrace,
+    })
+  )
 
-function clearFullRefreshStorage() {
-  if (sessionStorage.getItem(FULL_REFRESH_STORAGE_KEY) !== 'ignore')
-    sessionStorage.removeItem(FULL_REFRESH_STORAGE_KEY)
+  window.location.reload()
 }
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index 1d21903271e06..09a9e8b16169f 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -15,6 +15,7 @@ import {
   runDependingOnPageType,
 } from '../../build/entries'
 import { watchCompilers } from '../../build/output'
+import * as Log from '../../build/output/log'
 import getBaseWebpackConfig from '../../build/webpack-config'
 import { API_ROUTE, APP_DIR_ALIAS } from '../../lib/constants'
 import { recursiveDelete } from '../../lib/recursive-delete'
@@ -351,6 +352,15 @@ export default class HotReloader {
               }
               break
             }
+            case 'client-full-reload': {
+              Log.warn(
+                'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+              )
+              if (payload.stackTrace) {
+                console.warn(payload.stackTrace)
+              }
+              break
+            }
             default: {
               break
             }
diff --git a/packages/react-dev-overlay/src/client.ts b/packages/react-dev-overlay/src/client.ts
index 5120dd0c76633..a9eb0a496eea5 100644
--- a/packages/react-dev-overlay/src/client.ts
+++ b/packages/react-dev-overlay/src/client.ts
@@ -85,10 +85,6 @@ function onBuildError(message: string) {
   Bus.emit({ type: Bus.TYPE_BUILD_ERROR, message })
 }
 
-function onFullRefreshNeeded(reason?: string) {
-  Bus.emit({ type: Bus.TYPE_FULL_REFRESH_NEEDED, reason: reason ?? null })
-}
-
 function onRefresh() {
   Bus.emit({ type: Bus.TYPE_REFRESH })
 }
@@ -96,11 +92,4 @@ function onRefresh() {
 export { getErrorByType } from './internal/helpers/getErrorByType'
 export { getServerError } from './internal/helpers/nodeStackFrames'
 export { default as ReactDevOverlay } from './internal/ReactDevOverlay'
-export {
-  onBuildOk,
-  onBuildError,
-  onFullRefreshNeeded,
-  register,
-  unregister,
-  onRefresh,
-}
+export { onBuildOk, onBuildError, register, unregister, onRefresh }
diff --git a/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx b/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx
index 57477fe42ebfe..1d21310211953 100644
--- a/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx
+++ b/packages/react-dev-overlay/src/internal/ReactDevOverlay.tsx
@@ -4,7 +4,6 @@ import * as Bus from './bus'
 import { ShadowPortal } from './components/ShadowPortal'
 import { BuildError } from './container/BuildError'
 import { Errors, SupportedErrorEvent } from './container/Errors'
-import { FullRefreshWarning } from './container/FullRefreshWarning'
 import { ErrorBoundary } from './ErrorBoundary'
 import { Base } from './styles/Base'
 import { ComponentStyles } from './styles/ComponentStyles'
@@ -14,8 +13,6 @@ type OverlayState = {
   nextId: number
   buildError: string | null
   errors: SupportedErrorEvent[]
-  fullRefreshReason: string | null
-  isAboutToFullRefresh: boolean
 }
 
 function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
@@ -26,19 +23,6 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
     case Bus.TYPE_BUILD_ERROR: {
       return { ...state, buildError: ev.message }
     }
-    case Bus.TYPE_FULL_REFRESH_NEEDED: {
-      const aboutToRefreshNewState: OverlayState = {
-        ...state,
-        fullRefreshReason: null,
-        isAboutToFullRefresh: true,
-      }
-
-      if (ev.reason === null) {
-        return aboutToRefreshNewState
-      }
-
-      return { ...aboutToRefreshNewState, fullRefreshReason: ev.reason }
-    }
     case Bus.TYPE_REFRESH: {
       return { ...state, buildError: null, errors: [] }
     }
@@ -58,7 +42,7 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
   }
 }
 
-type ErrorType = 'runtime' | 'build' | 'full-refresh'
+type ErrorType = 'runtime' | 'build'
 
 const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
   children,
@@ -73,8 +57,6 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
     nextId: 1,
     buildError: null,
     errors: [],
-    fullRefreshReason: null,
-    isAboutToFullRefresh: false,
   })
 
   React.useEffect(() => {
@@ -93,9 +75,8 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
 
   const hasBuildError = state.buildError != null
   const hasRuntimeErrors = Boolean(state.errors.length)
-  const isAboutToFullRefresh = state.isAboutToFullRefresh
 
-  const isMounted = hasBuildError || hasRuntimeErrors || isAboutToFullRefresh
+  const isMounted = hasBuildError || hasRuntimeErrors
 
   return (
     <React.Fragment>
@@ -109,17 +90,9 @@ const ReactDevOverlay: React.FunctionComponent = function ReactDevOverlay({
           <ComponentStyles />
 
           {shouldPreventDisplay(
-            hasBuildError
-              ? 'build'
-              : hasRuntimeErrors
-              ? 'runtime'
-              : isAboutToFullRefresh
-              ? 'full-refresh'
-              : null,
+            hasBuildError ? 'build' : hasRuntimeErrors ? 'runtime' : null,
             preventDisplay
-          ) ? null : isAboutToFullRefresh ? (
-            <FullRefreshWarning reason={state.fullRefreshReason} />
-          ) : hasBuildError ? (
+          ) ? null : hasBuildError ? (
             <BuildError message={state.buildError!} />
           ) : hasRuntimeErrors ? (
             <Errors errors={state.errors} />
diff --git a/packages/react-dev-overlay/src/internal/bus.ts b/packages/react-dev-overlay/src/internal/bus.ts
index 1e7dfa8b6b8fd..1ffc87428b8b2 100644
--- a/packages/react-dev-overlay/src/internal/bus.ts
+++ b/packages/react-dev-overlay/src/internal/bus.ts
@@ -2,7 +2,6 @@ import { StackFrame } from 'stacktrace-parser'
 
 export const TYPE_BUILD_OK = 'build-ok'
 export const TYPE_BUILD_ERROR = 'build-error'
-export const TYPE_FULL_REFRESH_NEEDED = 'full-refresh-needed'
 export const TYPE_REFRESH = 'fast-refresh'
 export const TYPE_UNHANDLED_ERROR = 'unhandled-error'
 export const TYPE_UNHANDLED_REJECTION = 'unhandled-rejection'
@@ -13,10 +12,6 @@ export type BuildError = {
   message: string
 }
 export type FastRefresh = { type: typeof TYPE_REFRESH }
-export type FullRefreshNeeded = {
-  type: typeof TYPE_FULL_REFRESH_NEEDED
-  reason: string | null
-}
 export type UnhandledError = {
   type: typeof TYPE_UNHANDLED_ERROR
   reason: Error
@@ -31,7 +26,6 @@ export type BusEvent =
   | BuildOk
   | BuildError
   | FastRefresh
-  | FullRefreshNeeded
   | UnhandledError
   | UnhandledRejection
 
diff --git a/packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx b/packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx
deleted file mode 100644
index 1a3d72a142d22..0000000000000
--- a/packages/react-dev-overlay/src/internal/container/FullRefreshWarning.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react'
-
-import {
-  Dialog,
-  DialogBody,
-  DialogContent,
-  DialogHeader,
-} from '../components/Dialog'
-import { Overlay } from '../components/Overlay'
-import { Terminal } from '../components/Terminal'
-import { noop as css } from '../helpers/noop-template'
-
-export type FullRefreshWarningProps = { reason: string | null }
-
-const FULL_REFRESH_STORAGE_KEY = '_has_warned_about_full_refresh'
-
-export const FullRefreshWarning: React.FC<FullRefreshWarningProps> =
-  function FullRefreshWarning({ reason }) {
-    const reload = React.useCallback(() => {
-      window.location.reload()
-    }, [])
-    const change = React.useCallback((e) => {
-      sessionStorage.setItem(
-        FULL_REFRESH_STORAGE_KEY,
-        e.target.checked ? 'ignore' : 'true'
-      )
-    }, [])
-
-    return (
-      <Overlay fixed>
-        <Dialog
-          type="warning"
-          aria-labelledby="nextjs__container_refresh_warning_label"
-          aria-describedby="nextjs__container_refresh_warning_desc"
-          onClose={reload}
-        >
-          <DialogContent>
-            <DialogHeader className="nextjs-container-refresh-warning-header">
-              <h4 id="nextjs__container_refresh_warning_label">
-                About to perform a full refresh
-              </h4>
-            </DialogHeader>
-            <DialogBody className="nextjs-container-refresh-warning-body">
-              <FullRefreshWarningReason reason={reason} />
-              <footer>
-                <p>
-                  You can read more about Fast Refresh in{' '}
-                  <a href="https://nextjs.org/docs/basic-features/fast-refresh#how-it-works">
-                    our documentation
-                  </a>
-                  .
-                </p>
-                <label>
-                  <input type="checkbox" onChange={change} /> Don't show again
-                  for session
-                </label>
-                <button onClick={reload}>Reload</button>
-              </footer>
-            </DialogBody>
-          </DialogContent>
-        </Dialog>
-      </Overlay>
-    )
-  }
-
-export const styles = css`
-  .nextjs-container-refresh-warning-header > h4 {
-    line-height: 1.5;
-    margin: 0;
-    padding: 0;
-  }
-
-  .nextjs-container-refresh-warning-body footer {
-    margin-top: var(--size-gap-double);
-  }
-
-  .nextjs-container-build-error-body p {
-    color: #757575;
-  }
-
-  .nextjs-container-refresh-warning-body button {
-    background-color: var(--color-ansi-yellow);
-    border: 0;
-    border-radius: var(--size-gap-half);
-    color: var(--color-ansi-black);
-    cursor: pointer;
-    display: block;
-    margin-left: auto;
-    padding: calc(var(--size-gap) + var(--size-gap-half))
-      calc(var(--size-gap-double) + var(--size-gap-half));
-    transition: background-color 0.25s ease;
-  }
-
-  .nextjs-container-refresh-warning-body button:hover {
-    background-color: var(--color-ansi-bright-yellow);
-  }
-`
-
-type FullRefreshBodyProps = {
-  reason: string | null
-}
-
-const FullRefreshWarningReason = ({
-  reason,
-}: FullRefreshBodyProps): JSX.Element => {
-  if (reason === null) {
-    return (
-      <p>
-        Fast Refresh will perform a full reload because your application had an
-        unrecoverable error.
-      </p>
-    )
-  }
-
-  return (
-    <>
-      <p>
-        Fast Refresh will perform a full reload when you edit a file that is
-        imported by modules outside of the React rendering tree. It is also
-        possible the parent component of the component you edited is a class
-        component, which disables Fast Refresh. Fast Refresh requires at least
-        one parent function component in your React tree.
-      </p>
-      <p>You can find more information in the related error below:</p>
-      <Terminal content={reason} />
-    </>
-  )
-}
diff --git a/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx b/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
index 9aa2244da7fae..8a3016b455561 100644
--- a/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
+++ b/packages/react-dev-overlay/src/internal/styles/ComponentStyles.tsx
@@ -8,7 +8,6 @@ import { styles as terminal } from '../components/Terminal/styles'
 import { styles as toast } from '../components/Toast'
 import { styles as buildErrorStyles } from '../container/BuildError'
 import { styles as containerErrorStyles } from '../container/Errors'
-import { styles as fullRefreshWarningStyles } from '../container/FullRefreshWarning'
 import { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'
 import { noop as css } from '../helpers/noop-template'
 
@@ -26,7 +25,6 @@ export function ComponentStyles() {
         ${buildErrorStyles}
         ${containerErrorStyles}
         ${containerRuntimeErrorStyles}
-        ${fullRefreshWarningStyles}
       `}
     </style>
   )
diff --git a/test/development/acceptance/helpers.ts b/test/development/acceptance/helpers.ts
index 135d4133b38ae..3bd54202c6eaf 100644
--- a/test/development/acceptance/helpers.ts
+++ b/test/development/acceptance/helpers.ts
@@ -1,5 +1,4 @@
 import {
-  ignoreFullRefreshWarnings,
   getRedboxDescription,
   getRedboxHeader,
   getRedboxSource,
@@ -31,7 +30,6 @@ export async function sandbox(
   }
   await next.start()
   const browser = await webdriver(next.appPort, '/')
-  await ignoreFullRefreshWarnings(browser)
   return {
     session: {
       async write(filename, content) {
diff --git a/test/development/basic-basepath/hmr.test.ts b/test/development/basic-basepath/hmr.test.ts
index a424a6799e7b9..f4cba53e3e09e 100644
--- a/test/development/basic-basepath/hmr.test.ts
+++ b/test/development/basic-basepath/hmr.test.ts
@@ -3,7 +3,6 @@ import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
 import {
   check,
-  clickReloadOnFullRefreshWarning,
   getBrowserBodyText,
   getRedboxHeader,
   getRedboxSource,
@@ -383,7 +382,6 @@ describe('basic HMR', () => {
 
         await next.patchFile(aboutPage, aboutContent)
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(
           () => getBrowserBodyText(browser),
           /This is the contact page/
@@ -418,8 +416,6 @@ describe('basic HMR', () => {
           aboutContent.replace('export', 'aa=20;\nexport')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
-
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatch(/aa is not defined/)
 
@@ -489,7 +485,6 @@ describe('basic HMR', () => {
           )
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
           " 1 of 1 unhandled error
@@ -539,7 +534,6 @@ describe('basic HMR', () => {
 
         const isReact17 = process.env.NEXT_TEST_REACT_VERSION === '^17'
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         // TODO: Replace this when webpack 5 is the default
         expect(
@@ -591,7 +585,6 @@ describe('basic HMR', () => {
           )
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
           " 1 of 1 unhandled error
@@ -645,7 +638,6 @@ describe('basic HMR', () => {
           errorContent.replace('throw error', 'return {}')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(() => getBrowserBodyText(browser), /Hello/)
 
         await next.patchFile(erroredPage, errorContent)
@@ -694,7 +686,6 @@ describe('basic HMR', () => {
           errorContent.replace('throw error', 'return {}')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(() => getBrowserBodyText(browser), /Hello/)
 
         await next.patchFile(erroredPage, errorContent)
diff --git a/test/development/basic/hmr.test.ts b/test/development/basic/hmr.test.ts
index de03e7096a40f..48c49a704e691 100644
--- a/test/development/basic/hmr.test.ts
+++ b/test/development/basic/hmr.test.ts
@@ -3,7 +3,6 @@ import cheerio from 'cheerio'
 import webdriver from 'next-webdriver'
 import {
   check,
-  clickReloadOnFullRefreshWarning,
   getBrowserBodyText,
   getRedboxHeader,
   getRedboxSource,
@@ -137,7 +136,6 @@ describe('basic HMR', () => {
           // change the content
           try {
             await next.patchFile(aboutPagePath, editedContent)
-            await clickReloadOnFullRefreshWarning(browser)
             await check(() => getBrowserBodyText(browser), /COOL page/)
           } finally {
             // add the original content
@@ -449,7 +447,6 @@ describe('basic HMR', () => {
 
         await next.patchFile(aboutPage, aboutContent)
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(
           () => getBrowserBodyText(browser),
           /This is the contact page/
@@ -484,7 +481,6 @@ describe('basic HMR', () => {
           aboutContent.replace('export', 'aa=20;\nexport')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatch(/aa is not defined/)
 
@@ -554,7 +550,6 @@ describe('basic HMR', () => {
           )
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
           " 1 of 1 unhandled error
@@ -604,7 +599,6 @@ describe('basic HMR', () => {
 
         const isReact17 = process.env.NEXT_TEST_REACT_VERSION === '^17'
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         // TODO: Replace this when webpack 5 is the default
         expect(
@@ -656,7 +650,6 @@ describe('basic HMR', () => {
           )
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         expect(await hasRedbox(browser)).toBe(true)
         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
           " 1 of 1 unhandled error
@@ -710,7 +703,6 @@ describe('basic HMR', () => {
           errorContent.replace('throw error', 'return {}')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(() => getBrowserBodyText(browser), /Hello/)
 
         await next.patchFile(erroredPage, errorContent)
@@ -759,7 +751,6 @@ describe('basic HMR', () => {
           errorContent.replace('throw error', 'return {}')
         )
 
-        await clickReloadOnFullRefreshWarning(browser)
         await check(() => getBrowserBodyText(browser), /Hello/)
 
         await next.patchFile(erroredPage, errorContent)
diff --git a/test/development/full-reload-warning/index.test.ts b/test/development/full-reload-warning/index.test.ts
new file mode 100644
index 0000000000000..1ff815fa56649
--- /dev/null
+++ b/test/development/full-reload-warning/index.test.ts
@@ -0,0 +1,97 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { check, getRedboxHeader } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+describe('show a warning in CLI and browser when doing a full reload', () => {
+  let next: NextInstance
+
+  beforeEach(async () => {
+    next = await createNext({
+      files: {
+        'pages/anonymous-page-function.js': `
+          export default function() { 
+            return <p>hello world</p>
+          } 
+        `,
+        'pages/runtime-error.js': `
+        export default function() { 
+          return whoops
+        } 
+      `,
+      },
+      dependencies: {},
+    })
+  })
+  afterEach(() => next.destroy())
+
+  test('error', async () => {
+    const browser = await webdriver(next.url, `/anonymous-page-function`)
+    expect(await browser.elementByCss('p').text()).toBe('hello world')
+    expect(next.cliOutput).not.toContain(
+      'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+    )
+
+    const currentFileContent = await next.readFile(
+      './pages/anonymous-page-function.js'
+    )
+    const newFileContent = currentFileContent.replace(
+      '<p>hello world</p>',
+      '<p>hello world!!!</p>'
+    )
+    await next.patchFile('./pages/anonymous-page-function.js', newFileContent)
+    await check(() => browser.elementByCss('p').text(), 'hello world!!!')
+
+    // CLI warning and stacktrace
+    expect(next.cliOutput).toContain(
+      'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+    )
+    expect(next.cliOutput).toContain(
+      'Error: Aborted because ./pages/anonymous-page-function.js is not accepted'
+    )
+
+    // Browser warning
+    const browserLogs = await browser.log()
+    expect(
+      browserLogs.some(({ message }) =>
+        message.includes(
+          "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree."
+        )
+      )
+    ).toBeTruthy()
+  })
+
+  test('runtime-error', async () => {
+    const browser = await webdriver(next.url, `/runtime-error`)
+    await check(
+      () => getRedboxHeader(browser),
+      /ReferenceError: whoops is not defined/
+    )
+    expect(next.cliOutput).not.toContain(
+      'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+    )
+
+    const currentFileContent = await next.readFile('./pages/runtime-error.js')
+    const newFileContent = currentFileContent.replace('whoops', '"whoops"')
+    await next.patchFile('./pages/runtime-error.js', newFileContent)
+    await check(() => browser.elementByCss('body').text(), 'whoops')
+
+    // CLI warning and stacktrace
+    expect(next.cliOutput).toContain(
+      'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
+    )
+    expect(next.cliOutput).not.toContain(
+      'Error: Aborted because ./pages/runtime-error.js is not accepted'
+    )
+
+    // Browser warning
+    const browserLogs = await browser.log()
+    expect(
+      browserLogs.some(({ message }) =>
+        message.includes(
+          '[Fast Refresh] performing full reload because your application had an unrecoverable error'
+        )
+      )
+    ).toBeTruthy()
+  })
+})
diff --git a/test/integration/app-document-add-hmr/test/index.test.js b/test/integration/app-document-add-hmr/test/index.test.js
index 25f82eee915da..af24d990203a2 100644
--- a/test/integration/app-document-add-hmr/test/index.test.js
+++ b/test/integration/app-document-add-hmr/test/index.test.js
@@ -3,13 +3,7 @@
 import fs from 'fs-extra'
 import { join } from 'path'
 import webdriver from 'next-webdriver'
-import {
-  killApp,
-  findPort,
-  launchApp,
-  check,
-  clickReloadOnFullRefreshWarning,
-} from 'next-test-utils'
+import { killApp, findPort, launchApp, check } from 'next-test-utils'
 
 const appDir = join(__dirname, '../')
 const appPage = join(appDir, 'pages/_app.js')
@@ -46,7 +40,6 @@ describe('_app/_document add HMR', () => {
       `
       )
 
-      await clickReloadOnFullRefreshWarning(browser)
       await check(async () => {
         const html = await browser.eval('document.documentElement.innerHTML')
         return html.includes('custom _app') && html.includes('index page')
diff --git a/test/integration/app-document-remove-hmr/test/index.test.js b/test/integration/app-document-remove-hmr/test/index.test.js
index 0a7dfe3dbf9aa..bfa930c72557b 100644
--- a/test/integration/app-document-remove-hmr/test/index.test.js
+++ b/test/integration/app-document-remove-hmr/test/index.test.js
@@ -3,13 +3,7 @@
 import fs from 'fs-extra'
 import { join } from 'path'
 import webdriver from 'next-webdriver'
-import {
-  killApp,
-  findPort,
-  launchApp,
-  check,
-  clickReloadOnFullRefreshWarning,
-} from 'next-test-utils'
+import { killApp, findPort, launchApp, check } from 'next-test-utils'
 
 const appDir = join(__dirname, '../')
 const appPage = join(appDir, 'pages/_app.js')
@@ -36,7 +30,6 @@ describe('_app removal HMR', () => {
 
       await fs.rename(appPage, appPage + '.bak')
 
-      await clickReloadOnFullRefreshWarning(browser)
       await check(async () => {
         const html = await browser.eval('document.documentElement.innerHTML')
         return html.includes('index page') && !html.includes('custom _app')
@@ -63,7 +56,6 @@ describe('_app removal HMR', () => {
 
       await fs.rename(appPage + '.bak', appPage)
 
-      await clickReloadOnFullRefreshWarning(browser)
       await check(async () => {
         const html = await browser.eval('document.documentElement.innerHTML')
         return html.includes('index page updated') &&
diff --git a/test/integration/no-duplicate-compile-error/test/index.test.js b/test/integration/no-duplicate-compile-error/test/index.test.js
index 7390c8d2d7d15..bdd6715272a4b 100644
--- a/test/integration/no-duplicate-compile-error/test/index.test.js
+++ b/test/integration/no-duplicate-compile-error/test/index.test.js
@@ -1,7 +1,6 @@
 /* eslint-env jest */
 import {
   check,
-  clickReloadOnFullRefreshWarning,
   File,
   findPort,
   hasRedbox,
@@ -44,8 +43,6 @@ describe('no duplicate compile error output', () => {
       f.restore()
     }
 
-    await clickReloadOnFullRefreshWarning(browser)
-
     // Wait for compile error to disappear:
     await check(
       () => hasRedbox(browser, false).then((r) => (r ? 'yes' : 'no')),
diff --git a/test/integration/typescript-hmr/test/index.test.js b/test/integration/typescript-hmr/test/index.test.js
index 621a442b147ce..7b2ab6250b180 100644
--- a/test/integration/typescript-hmr/test/index.test.js
+++ b/test/integration/typescript-hmr/test/index.test.js
@@ -3,7 +3,6 @@
 import fs from 'fs-extra'
 import {
   check,
-  ignoreFullRefreshWarnings,
   findPort,
   getBrowserBodyText,
   getRedboxHeader,
@@ -37,7 +36,6 @@ describe('TypeScript HMR', () => {
       let browser
       try {
         browser = await webdriver(appPort, '/hello')
-        await ignoreFullRefreshWarnings(browser)
         await check(() => getBrowserBodyText(browser), /Hello World/)
 
         const pagePath = join(appDir, 'pages/hello.tsx')
@@ -91,7 +89,6 @@ describe('TypeScript HMR', () => {
     const origContent = await fs.readFile(pagePath, 'utf8')
     try {
       browser = await webdriver(appPort, '/type-error-recover')
-      await ignoreFullRefreshWarnings(browser)
       const errContent = origContent.replace(
         '() => <p>Hello world</p>',
         '(): boolean => <p>hello with error</p>'
diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js
index c468e06f2a06f..78935652c1dfd 100644
--- a/test/lib/next-test-utils.js
+++ b/test/lib/next-test-utils.js
@@ -607,42 +607,6 @@ export async function hasRedbox(browser, expected = true) {
   return false
 }
 
-export async function ignoreFullRefreshWarnings(browser) {
-  await browser.eval(() => {
-    sessionStorage.setItem('_has_warned_about_full_refresh', 'ignore')
-  })
-}
-
-export async function clickReloadOnFullRefreshWarning(browser) {
-  await retry(async () => {
-    const hasFullRefreshWarning = await evaluate(browser, () =>
-      Boolean(
-        Array.from(document.querySelectorAll('nextjs-portal')).find(
-          (p) =>
-            p.shadowRoot.querySelector(
-              '#nextjs__container_refresh_warning_label'
-            )?.textContent === 'About to perform a full refresh'
-        )
-      )
-    )
-    if (!hasFullRefreshWarning) throw new Error('No full refresh warning')
-    return evaluate(browser, () => {
-      const buttons = Array.from(document.querySelectorAll('nextjs-portal'))
-        .find(
-          (p) =>
-            p.shadowRoot.querySelector(
-              '#nextjs__container_refresh_warning_label'
-            )?.textContent === 'About to perform a full refresh'
-        )
-        .shadowRoot.querySelectorAll('button')
-
-      Array.from(buttons)
-        .find((b) => b.textContent === 'Reload')
-        .click()
-    })
-  })
-}
-
 export async function getRedboxHeader(browser) {
   return retry(
     () =>