Improved stacktraces (minor) #4156

timneutkens · 2018-04-15T09:18:21Z

Fixes #3735 with the change to devtool.

This change will introduce proper source map support for all modules. It'll also improve recompile time by using cheap-module-source-map instead of source-map. In practice this only improves compile times and has no real downside when debugging.

When an error is thrown we call applySourcemaps which will load the sourcemap associated with each line stacktrace line, then it'll find the real line using the source-map module and return the newly constructed error line. This is very similar to how Vue handles server side errors.

Besides that I also noticed our componentDidCatch only worked in production mode, since react-hot-loader's appContainer implemented componentDidCatch. Now we catch the error in App and throw it up to AppContainer in development.

arunoda · 2018-04-15T19:02:39Z

client/index.js

@@ -172,7 +188,9 @@ async function doRender ({ Component, props, hash, err, emitter: emitterProp = e

  // We need to clear any existing runtime error messages
  ReactDOM.unmountComponentAtNode(errorContainer)
-  renderReactElement(createElement(App, appProps), appContainer)
+  renderReactElement(<AppContainer errorReporter={ErrorDebugComponent} warnings={false}>


Why do we move this to here from the app.js.? I like this approach. But just need to know why?

And is it possible to use AppContainer it only in development?

<AppContainer> becomes an empty component in production, so there's no harm in including it. I've moved it here since our componentDidCatch in app.js has to be executed. Also this makes sure we keep the state of app.js (since we expose it to users now)

Actually we have to do the webpack magic since in the webpack config we remove react-hot-loader completely (which is currently breaking the tests)

arunoda · 2018-04-15T19:05:36Z

client/source-map-support.js

@@ -0,0 +1,55 @@
+// @flow
+import fetch from 'unfetch'
+import {SourceMapConsumer} from 'source-map'


I assume this is a kind a big library. Could you check whether we are getting rid of this in the production mode.

If not, shall we do it with some webpack magic?

The parent file (source-map-support) is only loaded in development using the same if/else require 👍 nonetheless i'm going to move it into the function for both client/server side.

@timneutkens okay. Great.

arunoda · 2018-04-15T19:08:45Z

lib/error-debug.js

    }
-  </div>
-)
+    await rewriteErrorTrace(error)


We won't catch errors here. Better to call .then() and .catch here.

arunoda · 2018-04-15T19:10:04Z

lib/error-debug.js

+  }
+}
+
+// On the server side the error comes from a single place, so `ErrorDebug` is rendered directly.


Could you add more details on here?. The comment is not clear to me.

arunoda · 2018-04-15T19:15:19Z

@timneutkens shall we write some test cases checking the lines of the error. Could be bit hard to write, but I think it's not impossible.

timneutkens · 2018-04-15T19:30:04Z

Yeah we can definitely add tests for this, just wanted you to have a look first at the implementation 👍

arunoda · 2018-04-15T20:07:09Z

client/source-map-support.js

@@ -33,12 +30,14 @@ async function rewriteTraceLine (trace: string): Promise<string> {

  const mapPath = `${filePath}.map`

+  const fetch = require('unfetch')


Is there any effect loading modules like this? I hope webpack still see them just like before.

The weird thing is, it does work for source-map, but not for unfetch 🤷‍♂️either way this module is only loaded in dev mode now, same way as ErrorDebug, so it doesn't matter 👍

albinekb · 2018-04-17T10:19:11Z

I tested this and seeing more consistent build times and a drop from 8-10s to 2s consistent across my application, awesome stuff! 🎉

…errors in development

…sistent

albinekb · 2018-04-18T08:38:15Z

client/index.js

+    sourcemappedErr = await rewriteErrorTrace(err)
+  }
+
+  const str = stripAnsi(`${err.message}\n${err.stack}${err.info ? `\n\n${err.info.componentStack}` : ''}`)


I wonder if this should be the sourcemappedErr? But as discussed in slack rewriteErrorTrace actually mutates the err so it's the same, but for readability reasons.

albinekb · 2018-04-18T08:43:07Z

lib/app.js

-        </AppContainer>
-      )
-    }
+    return <>{children}</>


I think you can remove the empty fragment here and just return children? or is there a clever reason as to why wrap it in a fragment?

Just didn't want to change behavior from what it was before.

Sounds good 👍

albinekb

Really nice! More readable than before 🕵️‍♀️

albinekb · 2018-04-18T09:00:04Z

client/index.js

  if (process.env.NODE_ENV !== 'production') {
-    sourcemappedErr = await rewriteErrorTrace(err)
+    await applySourcemaps(err)


👌 This is great, so much easier to understand

timneutkens · 2018-04-18T10:25:03Z

The change to devtool resulted in:

Old:

DONE  Compiled successfully in 10545ms                                                                                                                                                                                                  11:56:02 AM

> Building page: /signin
Total precache size is about 0 B for 0 resources.
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 16183ms                                                                                                                                                                                                  11:56:26 AM

Total precache size is about 0 B for 0 resources.
> Disposing inactive page(s): /, /_error, /me/settings
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 11445ms                                                                                                                                                                                                  11:57:53 AM

Total precache size is about 0 B for 0 resources.
> Building page: /_error
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 987ms                                                                                                                                                                                                    11:58:01 AM

Total precache size is about 0 B for 0 resources.
> Building page: /me/settings
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 10997ms                                                                                                                                                                                                  11:59:09 AM

Total precache size is about 0 B for 0 resources.
> Building page: /me/settings/account
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 21654ms                                                                                                                                                                                                  11:59:39 AM

Total precache size is about 0 B for 0 resources.
> Building page: /me/photos
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 19294ms                                                                                                                                                                                                  12:00:21 PM

Total precache size is about 0 B for 0 resources.
> Disposing inactive page(s): /discover, /me, /signin, /_error, /me/settings
Total precache size is about 0 B for 0 resources.


 DONE  Compiled successfully in 10490ms                                                                                                                                                                                                  12:01:50 PM

New:

DONE  Compiled successfully in 2083ms                                                                                                                                                                                                   12:19:14 PM

Total precache size is about 0 B for 0 resources.


WAIT  Compiling...                                                                                                                                                                                                                      12:19:15 PM

Total precache size is about 0 B for 0 resources.


DONE  Compiled successfully in 439ms                                                                                                                                                                                                    12:19:16 PM

Total precache size is about 0 B for 0 resources.
> Building page: /
Total precache size is about 0 B for 0 resources.


DONE  Compiled successfully in 1366ms                                                                                                                                                                                                   12:20:28 PM

Total precache size is about 0 B for 0 resources.
> Building page: /discover
Total precache size is about 0 B for 0 resources.
Total precache size is about 0 B for 0 resources.


DONE  Compiled successfully in 2919ms                                                                                                                                                                                                   12:20:32 PM

From @ptomasroos testing 🙏

arunoda · 2018-04-18T16:17:45Z

@timneutkens this is really well done.
I really like the new addition of tests. So, we won't break source-maps from release to release.

albinekb · 2018-04-18T16:22:32Z

Could we do a canary release with this or are we waiting for something else? Would save us minutes each day 🎉

ptomasroos · 2018-04-18T16:46:48Z

You can just alter this in your own webpack config @albinekb

* 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

…de errors (#4764) ## 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](https://github.com/zeit/next.js/blob/86d01706a67cee5c80796974d04c1e11cdff453a/client/index.js#L173) speaks to the unnecessary complexity around this.)

timneutkens added 2 commits April 14, 2018 10:19

Handle production errors correctly

0642b42

Improved source map support

cf590ca

timneutkens changed the title ~~Improved stacktraces~~ [WIP] Improved stacktraces Apr 15, 2018

timneutkens added 2 commits April 15, 2018 16:55

Make react-hot-loader hold state again

b0a2391

Remove console.log

6dbfb7d

arunoda reviewed Apr 15, 2018

View reviewed changes

timneutkens added 4 commits April 15, 2018 21:18

Load modules on demand

966fe31

Catch errors in rewriteErrorTrace

ac83b26

Update comment

9695c6d

Update comment

8b7d407

Remove source-map-support

45a7b52

arunoda reviewed Apr 15, 2018

View reviewed changes

timneutkens added 2 commits April 15, 2018 22:37

Load modules in next-dev

8b9271e

Make sure error logged has sourcemaps too

2d6aa5b

timneutkens added 3 commits April 17, 2018 23:10

Add tests for production runtime errors

f6b8f93

Add tests for development runtime errors. Fix issue with client side …

6bef341

…errors in development

Move functionality back to renderError now that error handling is con…

c01c1a3

…sistent

timneutkens changed the title ~~[WIP] Improved stacktraces~~ Improved stacktraces (minor) Apr 18, 2018

albinekb reviewed Apr 18, 2018

View reviewed changes

albinekb approved these changes Apr 18, 2018

View reviewed changes

Rename to applySourcemaps

e314208

albinekb reviewed Apr 18, 2018

View reviewed changes

timneutkens mentioned this pull request Apr 18, 2018

react-hot-loader: 4.0.0 -> 4.0.1 #4167

Merged

arunoda approved these changes Apr 18, 2018

View reviewed changes

arunoda merged commit 68626c5 into vercel:canary Apr 18, 2018

timneutkens deleted the add/error-handling branch April 18, 2018 16:58

timneutkens added a commit that referenced this pull request Apr 18, 2018

State is no longer used since #4156

a691dd0

lependu pushed a commit to lependu/next.js that referenced this pull request Jun 19, 2018

State is no longer used since vercel#4156

5662c83

jamesreggio mentioned this pull request Jun 22, 2018

_app getInitialProps not called when rendering error page #4574

Closed

jamesreggio mentioned this pull request Jul 11, 2018

Fix #4574: getInitialProps is not called on _error page for client-side errors #4764

Merged

mikhail-fedosenko mentioned this pull request Aug 28, 2018

ErrorComponent not receiving server-side props #3219

Closed

1 task

eps1lon mentioned this pull request Mar 6, 2019

Script debugging no longer seem to work in Chrome DevTools and VS Code #4571

Closed

lock bot locked as resolved and limited conversation to collaborators Apr 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved stacktraces (minor) #4156

Improved stacktraces (minor) #4156

timneutkens commented Apr 15, 2018 •

edited

arunoda Apr 15, 2018

timneutkens Apr 15, 2018

timneutkens Apr 15, 2018

arunoda Apr 15, 2018

timneutkens Apr 15, 2018 •

edited

arunoda Apr 15, 2018

arunoda Apr 15, 2018

arunoda Apr 15, 2018 •

edited

arunoda commented Apr 15, 2018

timneutkens commented Apr 15, 2018

arunoda Apr 15, 2018

timneutkens Apr 15, 2018 •

edited

albinekb commented Apr 17, 2018

albinekb Apr 18, 2018

albinekb Apr 18, 2018

timneutkens Apr 18, 2018 •

edited

albinekb Apr 18, 2018

albinekb left a comment •

edited

albinekb Apr 18, 2018 •

edited

timneutkens commented Apr 18, 2018 •

edited

arunoda commented Apr 18, 2018

albinekb commented Apr 18, 2018

ptomasroos commented Apr 18, 2018

		@@ -33,12 +30,14 @@ async function rewriteTraceLine (trace: string): Promise<string> {

		const mapPath = `${filePath}.map`

		const fetch = require('unfetch')

Improved stacktraces (minor) #4156

Improved stacktraces (minor) #4156

Conversation

timneutkens commented Apr 15, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timneutkens Apr 15, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arunoda Apr 15, 2018 • edited

Choose a reason for hiding this comment

arunoda commented Apr 15, 2018

timneutkens commented Apr 15, 2018

Choose a reason for hiding this comment

timneutkens Apr 15, 2018 • edited

Choose a reason for hiding this comment

albinekb commented Apr 17, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timneutkens Apr 18, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

albinekb left a comment • edited

Choose a reason for hiding this comment

albinekb Apr 18, 2018 • edited

Choose a reason for hiding this comment

timneutkens commented Apr 18, 2018 • edited

arunoda commented Apr 18, 2018

albinekb commented Apr 18, 2018

ptomasroos commented Apr 18, 2018

timneutkens commented Apr 15, 2018 •

edited

timneutkens Apr 15, 2018 •

edited

arunoda Apr 15, 2018 •

edited

timneutkens Apr 15, 2018 •

edited

timneutkens Apr 18, 2018 •

edited

albinekb left a comment •

edited

albinekb Apr 18, 2018 •

edited

timneutkens commented Apr 18, 2018 •

edited