Repository: vercel/next.js
Pull request: [dev-overlay] Remove unused `onError` in /pages

Every implementation is a no-op and we don't have any plans.
Can use the same pattern as App Router when we need it.

Changed files:
filename: packages/next/src/client/components/react-dev-overlay/pages/hooks.ts
patch: @@ -27,16 +27,8 @@ export const usePagesDevOverlay = () => {
     }
   }, [dispatch])
 
-  const onComponentError = React.useCallback(
-    (_error: Error, _componentStack: string | null) => {
-      // TODO: special handling
-    },
-    []
-  )
-
   return {
     state,
-    onComponentError,
     dispatch,
   }
 }

filename: packages/next/src/client/components/react-dev-overlay/pages/pages-dev-overlay-error-boundary.tsx
patch: @@ -2,7 +2,6 @@ import React from 'react'
 
 type PagesDevOverlayErrorBoundaryProps = {
   children?: React.ReactNode
-  onError: (error: Error, componentStack: string | null) => void
 }
 type PagesDevOverlayErrorBoundaryState = { error: Error | null }
 
@@ -16,13 +15,7 @@ export class PagesDevOverlayErrorBoundary extends React.PureComponent<
     return { error }
   }
 
-  componentDidCatch(
-    error: Error,
-    // Loosely typed because it depends on the React version and was
-    // accidentally excluded in some versions.
-    errorInfo?: { componentStack?: string | null }
-  ) {
-    this.props.onError(error, errorInfo?.componentStack || null)
+  componentDidCatch(error: Error) {
     this.setState({ error })
   }
 

filename: packages/next/src/client/components/react-dev-overlay/pages/pages-dev-overlay.tsx
patch: @@ -13,11 +13,11 @@ interface PagesDevOverlayProps {
 }
 
 export function PagesDevOverlay({ children }: PagesDevOverlayProps) {
-  const { state, dispatch, onComponentError } = usePagesDevOverlay()
+  const { state, dispatch } = usePagesDevOverlay()
 
   return (
     <>
-      <PagesDevOverlayErrorBoundary onError={onComponentError}>
+      <PagesDevOverlayErrorBoundary>
         {children ?? null}
       </PagesDevOverlayErrorBoundary>
 

filename: test/development/acceptance/hydration-error.test.ts
patch: @@ -105,7 +105,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Mismatch>
@@ -211,7 +211,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Mismatch>
@@ -302,7 +302,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Mismatch>
@@ -378,7 +378,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Mismatch>
@@ -449,7 +449,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Mismatch>
@@ -539,7 +539,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
          "componentStack": "...
            <Container fn={function fn}>
              <PagesDevOverlay>
-               <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+               <PagesDevOverlayErrorBoundary>
                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                    <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                      <Page>
@@ -628,7 +628,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Page>
@@ -722,7 +722,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
        {
          "componentStack": "...
            <PagesDevOverlay>
-             <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+             <PagesDevOverlayErrorBoundary>
                <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                  <App pageProps={{}} Component={function Mismatch} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                    <Mismatch>
@@ -846,7 +846,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Page>
@@ -940,7 +940,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
          "componentStack": "...
            <Container fn={function fn}>
              <PagesDevOverlay>
-               <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+               <PagesDevOverlayErrorBoundary>
                  <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                    <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                      <Page>
@@ -1026,7 +1026,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Page>
@@ -1120,7 +1120,7 @@ describe('Error overlay for hydration errors in Pages router', () => {
            <AppContainer>
              <Container fn={function fn}>
                <PagesDevOverlay>
-                 <PagesDevOverlayErrorBoundary onError={function usePagesDevOverlay.useCallback[onComponentError]}>
+                 <PagesDevOverlayErrorBoundary>
                    <PathnameContextProviderAdapter router={{sdc:{},sbc:{}, ...}} isAutoExport={true}>
                      <App pageProps={{}} Component={function Page} err={undefined} router={{sdc:{},sbc:{}, ...}}>
                        <Page>