## What's wrong
This problem is specific to errors that happen on the client _after_ the initial mounting of the component. (The router has special logic to handle exceptions thrown in `getInitialProps` during a client-side navigation, and I've confirmed this logic is correct.)
Specifically, if the page is mounted, and you raise an exception on the page, the exception will cause the error page to be mounted without ever invoking `getInitialProps` on the new App/Error page pairing.
This has been illustrated with multiple repros in #4574.
## Why is it broken
This regression was introduced two months ago in #4156, where the invocation of `getInitialProps` was removed from the app's top-level error handler. Specifically, [this line](https://github.com/zeit/next.js/pull/4156/files#diff-895656aeaccff5d7c0f56a113ede9662L147) was removed and [replaced by a comment](https://github.com/zeit/next.js/pull/4156/files#diff-895656aeaccff5d7c0f56a113ede9662R167) that says that "`App` will handle the calling of `getInitialProps`".
I believe the sentiment about "`App` will handle calling `getInitialProps`" is mistaken. In fact, it really doesn't make sense on its face, since it would require an instance lifecycle method of `App` (which is mounted immediately after the comment) to invoke the `static getInitialProps` method on the error page.
## How I fixed it
I've fixed this in a fork by restoring Lines 146 – 148 that were removed in #4156. I think this is the right fix, but Next.js's handling of `getInitialProps` could certainly be improved. (The code in [this conditional](86d01706a6/client/index.js (L173)) speaks to the unnecessary complexity around this.)
* Handle production errors correctly
* Improved source map support
* Make react-hot-loader hold state again
* Remove console.log
* Load modules on demand
* Catch errors in rewriteErrorTrace
* Update comment
* Update comment
* Remove source-map-support
* Load modules in next-dev
* Make sure error logged has sourcemaps too
* Add tests for production runtime errors
* Add tests for development runtime errors. Fix issue with client side errors in development
* Move functionality back to renderError now that error handling is consistent
* Rename to applySourcemaps
* Expose pages/_app.js
* Add tests for _app and _document
* Uncomment deprecation warnings
* Add documentation for _app, improve documentation of _document
* Update docs / test for _document
* Add _document to client compiler in development
* Add missing app.js to comment
* Only warn once
* Add url-deprecated error page
* Combine tests
* Yse same message for all methods of ‘props.url’
* Update docs around _app
* Update documentation
* Quotes
* Update table of contents
* Add next/config
* Set config on server start / client render
* Add documentation for next/config
* Add next/config support for next export
* Fix test
* Use the correct name
* Set default to empty object on the client side
* Add config tests
* Rename config to runtimeConfig
* Render error on the client without fetching additional scripts.
* Fix test cases.
* Remove unused '_document' page in ensurePage logic
* Remove console.error when page is not found
* Allow next/asset to work properly with dynamic assetPrefix
Now we use webpack's publicPath via client side.
* Add test cases for dynamic assetPrefix and next/asset.
* Speed up next build
* Document webpack config
* Speed up next build
* Remove comment
* Add comment
* Clean up rules
* Add comments
* Run in parallel
* Push plugins seperately
* Create a new chunk for react
* Don’t uglify react since it’s already uglified. Move react to commons in development
* Use the minified version directly
* Re-add globpattern
* Move loaders into a separate variable
* Add comment linking to Dan’s explanation
* Remove dot
* Add universal webpack
* Initial dev support
* Fix linting
* Add changes from Arunoda's work
* Made next dev works.
But super slow and no HMR support.
* Fix client side hot reload
* Server side hmr
* Only in dev
* Add on-demand-entries client + hot-middleware
* Add .babelrc support
* Speed up on demand entries by running in parallel
* Serve static generated files
* Add missing config in dev
* Add sass support
* Add support for .map
* Add cssloader config and fix .jsx support
* Rename
* use same defaults as css-loader. Fix linting
* Add NoEmitErrorsPlugin
* Add clientBootstrap
* Use webpackhotmiddleware on the multi compiler
* alpha.3
* Use babel 16.2.x
* Fix reloading after error
* Remove comment
* Release 5.0.0-univeral-alpha.1
* Remove check for React 16
* Release 5.0.0-universal-alpha.2
* React hot loader v4
* Use our static file rendering machanism to serve pages.
This should work well since the file path for a page is predictable.
* Release 5.0.0-universal-alpha.3
* Remove optional loaders
* Release 5.0.0-universal-alpha.4
* Remove clientBootstrap
* Remove renderScript
* Make sure pages bundles are served correctly
* Remove unused import
* Revert to using the same code as canary
* Fix hot loader
* Release 5.0.0-universal-alpha.5
* Check if externals dir exist before applying config
* Add typescript support
* Add support for transpiling certain packages in node_modules
Thanks to @giuseppeg’s work in https://github.com/zeit/next.js/pull/3319
* Add BABEL_DISABLE_CACHE support
* Make sourcemaps in production opt-in
* Revert "Add support for transpiling certain packages in node_modules"
This reverts commit d4b1d9babfb4b9ed4f4b12d56d52dee233e862da.
In favor of a better api around this.
* Support typescript through next.config.js
* Remove comments
* Bring back commons.js calculation
* Remove unused dependencies
* Move base.config.js to webpack.js
* Make sure to only invalidate webpackDevMiddleware one after other.
* Allow babel-loder caching by default.
* Add comment about preact support
* Bring back buildir replace
* Remove obsolete plugin
* Remove build replace, speed up build
* Resolve page entries like pages/day/index.js to pages/day.js
* Add componentDidCatch back
* Compile to bundles
* Use config.distDir everywhere
* Make sure the file is an array
* Remove console.log
* Apply optimization to uglifyjs
* Add comment pointing to source
* Create entries the same way in dev and production
* Remove unused and broken pagesGlobPattern
* day/index.js is automatically turned into day.js at build time
* Remove poweredByHeader option
* Load pages with the correct path.
* Release 5.0.0-universal-alpha.6
* Make sure react-dom/server can be overwritten by module-alias
* Only add react-hot-loader babel plugin in dev
* Release 5.0.0-universal-alpha.7
* Revert tests
* Release 5.0.0-universal-alpha.10
* Make sure next/head is working properly.
* Add wepack alias for 'next' back.
* Make sure overriding className in next/head works
* Alias react too
* Add missing r
* Fragment fallback has to wrap the children
* Use min.js
* Remove css.js
* Remove wallaby.js
* Release 5.0.0-universal-alpha.11
* Resolve relative to workdir instead of next
* Make sure we touch the right file
* Resolve next modules
* Remove dotjsx removal plugins since we use webpack on the server
* Revert "Resolve relative to workdir instead of next"
This reverts commit a13f3e4ab565df9e2c9a3dfc8eb4009c0c2e02ed.
* Externalize any locally loaded module lives outside of app dir.
* Remove server aliases
* Check node_modules reliably
* Add symlink to next for tests
* Make sure dynamic imports work locally.
This is why we need it: b545b519b2/lib/MainTemplate.js (L68)
We need to have the finally clause in the above in __webpack_require__.
webpack output option strictModuleExceptionHandling does that.
* dynmaic -> dynamic
* Remove webpack-node-externals
* Make sure dynamic imports support SSR.
* Remove css support in favor of next-css
* Make sure we load path from `/` since it’s included in the path matching
* Catch when ensurepage couldn’t be fulfilled for `.js.map`
* Register require cache flusher for both client and server
* Add comment explaining this is to facilitate hot reloading
* Only load module when needed
* Remove unused modules
* Release 5.0.0-universal-alpha.12
* Only log the `found babel` message once
* Make sure ondemand entries working correctly.
Now we are just using a single instance of OnDemandEntryHandler.
* Better sourcemaps
* Release 5.0.0-universal-alpha.13
* Lock uglify version to 1.1.6
* Release 5.0.0-universal-alpha.14
* Fix a typo.
* Introduce multi-zones support for mircofrontends
* Add section on css
* Allow custom clientBootstrap entrypoint
This allows for customization of the client global bootstrap.
* Expose render event emitter to client
* Include client entry point in npm package
This drops a few kb off of the production min+gz build due to the remove of the component and a ew dependencies that it references, ansi-html being the biggest.
* Updating React to v16.0.0
* Updating error handling from ReactReconciler to componentDidCatch
* Using hydrate() instead of render() on client side.
* React 16 is not making `charSet` lowercase but that is in spec.
This fixes one of the crucial bug in Next.js
The issue happens when you try to load a page when it's
prefetching.
With mitt, it only fires the first registered event.
* Introduce script tag based page loading system.
* Call ensurePage only in the dev mode.
* Implement router using the page-loader.
* Fix a typo and remove unwanted code.
* Fix some issues related to rendering.
* Fix production tests.
* Fix ondemand test cases.
* Fix unit tests.
* Get rid of eval completely.
* Remove all the inline code.
* Remove the json-pages plugin.
* Rename NEXT_PAGE_LOADER into __NEXT_PAGE_LOADER__
* Rename NEXT_LOADED_PAGES into __NEXT_LOADED_PAGES__
* Remove some unwanted code.
* Load everything async.
* Remove lib/eval-script.js
We no longer need it.
* Move webpack idle wait code to the page-loader.
Because that's the place to do it.
* Remove pageNotFound key from the error.
* Remove unused error field 'buildError'
* Add much better logic to normalize routes.
* Get rid of mitt.
* Introduce a better way to register pages.
* Came back to the mitt() based page-loader.
* Add link rel=preload support.
* Add assetPrefix support to add support for CDNs.
* Add assetPrefix support for preload links.
* Update readme.md
* Introduce better debug error handling
With this we are rendering runtime and debug errors inside
a it's own error root.
That gives us better error handling and control.
Also, now we are patching React core to capture runtime errors.
* Render the initial error on the server.
With this we are rendering runtime and debug errors inside
a it's own error root.
That gives us better error handling and control.
Also, now we are patching React core to capture runtime errors.
* Add better hash URL support.
1. Add scrolling to given id related to hash
2. Hash changes won't trigger getInitialProps
* Add some comments.
* Fix tests.
* Add some test cases.
* Remove traces of glamor
As talked about with @rauchg. Glamor takes up around 60KB of the bundle (pre-gzip). Since styled-jsx is the way to go now and we support adding glamor by the user we should remove it as dependency cause it is bundled even when not used.
Added rehydration to the example, since we did that in our code.
There is only one thing I'm not sure about and want to discuss:
what should we do with next/css. Right now I added a throw for when it is imported. I'm not sure if we should do that / some other way to notify the user it has been removed. The reasoning behind the throw is that when we would do a console.warn the user would see 'css.default.<X>' not found because we don't have the glamor dependency anymore.
* Update yarn.lock
* Remove test for styles
* Remember scroll position on error
* Added comment + check if lastScroll was set
* Remove check for lastAppProps
* Use events to make scroll persistence dev-only
* Return EventEmitter from next()
* Update next-dev.js
* Make sure lastAppProps always have some value.
* Revert "Make sure lastAppProps always have some value."
This reverts commit b4ae722d9c1a4460e17dbdc041b111cbd492b2aa.
* Throw an error, if we found an empty object from getInitialProps.
* Add proper tests for getInitialProps empty check.
