fix: Prevent infinite loop in _error page

Author: okmttdhr

packages/next/client/index.tsx

@@ -2,6 +2,7 @@
 import '@next/polyfill-module'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import ErrorComponentBuiltIn from 'next/error'
 import { HeadManagerContext } from '../next-server/lib/head-manager-context'
 import mitt, { MittEmitter } from '../next-server/lib/mitt'
 import { RouterContext } from '../next-server/lib/router-context'
@@ -472,12 +473,18 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
   return pageLoader
     .loadPage('/_error')
     .then(({ page: ErrorComponent, styleSheets }) => {
+      // To prevent infinite `_error` rendering when `_error` throws on client side
+      const Component =
+        lastAppProps.Component === ErrorComponent
+          ? ErrorComponentBuiltIn
+          : ErrorComponent
+
       // In production we do a normal render with the `ErrorComponent` as component.
       // If we've gotten here upon initial render, we can use the props from the server.
       // Otherwise, we need to call `getInitialProps` on `App` before mounting.
       const AppTree = wrapApp(App)
       const appCtx = {
-        Component: ErrorComponent,
+        Component,
         AppTree,
         router,
         ctx: { err, pathname: page, query, asPath, AppTree },
@@ -490,7 +497,7 @@ export function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
         doRender({
           ...renderErrorProps,
           err,
-          Component: ErrorComponent,
+          Component,
           styleSheets,
           props: initProps,
         })