Better Stack Traces umbrella thread

[rauchg]

Opening this issue to keep track of the different scenarios where we render unhelpful error messages

• Error after navigation

When I perform a navigation and the new page contains an error, we see a stack trace that references "hot-update" and other inaccessible locations

this.props.team is null
render@http://localhost:3000/_next/webpack/5.76e8d31f45e88bbee132.hot-update.js:898:1

finishClassComponent@http://localhost:3000/_next/static/commons/main.js:19238:22

updateClassComponent@http://localhost:3000/_next/static/commons/main.js:19215:12

beginWork@http://localhost:3000/_next/static/commons/main.js:19589:16

performUnitOfWork@http://localhost:3000/_next/static/commons/main.js:21580:16

workLoop@http://localhost:3000/_next/static/commons/main.js:21644:26

callCallback@http://localhost:3000/_next/static/commons/main.js:11876:9

invokeGuardedCallbackDev@http://localhost:3000/_next/static/commons/main.js:11915:7

invokeGuardedCallback@http://localhost:3000/_next/static/commons/main.js:11772:5

renderRoot@http://localhost:3000/_next/static/commons/main.js:21722:7

performWorkOnRoot@http://localhost:3000/_next/static/commons/main.js:22336:24

performWork@http://localhost:3000/_next/static/commons/main.js:22288:7

requestWork@http://localhost:3000/_next/static/commons/main.js:22197:7

scheduleWorkImpl@http://localhost:3000/_next/static/commons/main.js:22080:11

scheduleWork@http://localhost:3000/_next/static/commons/main.js:22042:12

scheduleTopLevelUpdate@http://localhost:3000/_next/static/commons/main.js:22513:5

updateContainer@http://localhost:3000/_next/static/commons/main.js:22551:7

renderSubtreeIntoContainer@http://localhost:3000/_next/static/commons/main.js:26571:5

render@http://localhost:3000/_next/static/commons/main.js:26632:12

renderReactElement@http://localhost:3000/_next/static/commons/main.js:6934:5

_callee5$@http://localhost:3000/_next/static/commons/main.js:6905:13

tryCatch@http://localhost:3000/_next/static/commons/main.js:28441:37

invoke@http://localhost:3000/_next/static/commons/main.js:28675:22

defineIteratorMethods/</prototype[method]@http://localhost:3000/_next/static/commons/main.js:28493:16

step@http://localhost:3000/_next/static/commons/main.js:213:22

_next@http://localhost:3000/_next/static/commons/main.js:228:9

_asyncToGenerator/</<@http://localhost:3000/_next/static/commons/main.js:235:7

Promise@http://localhost:3000/_next/static/commons/main.js:3455:7

_asyncToGenerator/<@http://localhost:3000/_next/static/commons/main.js:208:12

doRender@http://localhost:3000/_next/static/commons/main.js:6804:10

_callee2$@http://localhost:3000/_next/static/commons/main.js:6710:20

tryCatch@http://localhost:3000/_next/static/commons/main.js:28441:37

invoke@http://localhost:3000/_next/static/commons/main.js:28675:22

defineIteratorMethods/</prototype[method]@http://localhost:3000/_next/static/commons/main.js:28493:16

step@http://localhost:3000/_next/static/commons/main.js:213:22

_next@http://localhost:3000/_next/static/commons/main.js:228:9

_asyncToGenerator/</<@http://localhost:3000/_next/static/commons/main.js:235:7

Promise@http://localhost:3000/_next/static/commons/main.js:3455:7

_asyncToGenerator/<@http://localhost:3000/_next/static/commons/main.js:208:12

render@http://localhost:3000/_next/static/commons/main.js:6682:10

_callee$/<@http://localhost:3000/_next/static/commons/main.js:6651:13

notify/<@http://localhost:3000/_next/static/commons/main.js:9156:16

./node_modules/core-js/library/modules/_collection.js/module.exports/</<@http://localhost:3000/_next/static/commons/main.js:1422:22

notify@http://localhost:3000/_next/static/commons/main.js:9155:7

update@http://localhost:3000/_next/static/commons/main.js:8552:9

./pages/onboarding/learn.js/</<@http://localhost:3000/_next/webpack/5.76e8d31f45e88bbee132.hot-update.js:1719:11

./pages/onboarding/learn.js/<@http://localhost:3000/_next/webpack/5.76e8d31f45e88bbee132.hot-update.js:1706:6

./pages/onboarding/learn.js@http://localhost:3000/_next/webpack/5.76e8d31f45e88bbee132.hot-update.js:110:29

webpack_require@http://localhost:3000/_next/static/commons/manifest.js:715:13

hotApply@http://localhost:3000/_next/static/commons/manifest.js:637:14

cb@http://localhost:3000/_next/static/commons/main.js:33403:25

check/<@http://localhost:3000/_next/static/commons/main.js:33419:13
in App
in ErrorBoundary

• Dynamic components error

After a while, without taking action, one of our dynamic components shows a stacktrace that forces us to refresh:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `FeedbackInput`.
invariant@http://localhost:3000/_next/static/commons/main.js:5227:15

createFiberFromElement@http://localhost:3000/_next/static/commons/main.js:17087:5

reconcileSingleElement@http://localhost:3000/_next/static/commons/main.js:18888:23

reconcileChildFibers@http://localhost:3000/_next/static/commons/main.js:18992:35

reconcileChildrenAtExpirationTime@http://localhost:3000/_next/static/commons/main.js:19116:30

reconcileChildren@http://localhost:3000/_next/static/commons/main.js:19107:5

updateHostComponent@http://localhost:3000/_next/static/commons/main.js:19360:5

beginWork@http://localhost:3000/_next/static/commons/main.js:19593:16

performUnitOfWork@http://localhost:3000/_next/static/commons/main.js:21580:16

workLoop@http://localhost:3000/_next/static/commons/main.js:21644:26

callCallback@http://localhost:3000/_next/static/commons/main.js:11876:9

invokeGuardedCallbackDev@http://localhost:3000/_next/static/commons/main.js:11915:7

invokeGuardedCallback@http://localhost:3000/_next/static/commons/main.js:11772:5

renderRoot@http://localhost:3000/_next/static/commons/main.js:21722:7

performWorkOnRoot@http://localhost:3000/_next/static/commons/main.js:22336:24

performWork@http://localhost:3000/_next/static/commons/main.js:22288:7

requestWork@http://localhost:3000/_next/static/commons/main.js:22197:7

scheduleWorkImpl@http://localhost:3000/_next/static/commons/main.js:22080:11

scheduleWork@http://localhost:3000/_next/static/commons/main.js:22042:12

scheduleTopLevelUpdate@http://localhost:3000/_next/static/commons/main.js:22513:5

updateContainer@http://localhost:3000/_next/static/commons/main.js:22551:7

renderSubtreeIntoContainer@http://localhost:3000/_next/static/commons/main.js:26571:5

render@http://localhost:3000/_next/static/commons/main.js:26632:12

renderReactElement@http://localhost:3000/_next/static/commons/main.js:6934:5

_callee5$@http://localhost:3000/_next/static/commons/main.js:6905:13

tryCatch@http://localhost:3000/_next/static/commons/main.js:28441:37

invoke@http://localhost:3000/_next/static/commons/main.js:28675:22

defineIteratorMethods/</prototype[method]@http://localhost:3000/_next/static/commons/main.js:28493:16

step@http://localhost:3000/_next/static/commons/main.js:213:22

_next@http://localhost:3000/_next/static/commons/main.js:228:9

_asyncToGenerator/</<@http://localhost:3000/_next/static/commons/main.js:235:7

Promise@http://localhost:3000/_next/static/commons/main.js:3455:7

_asyncToGenerator/<@http://localhost:3000/_next/static/commons/main.js:208:12

doRender@http://localhost:3000/_next/static/commons/main.js:6804:10

_callee2$@http://localhost:3000/_next/static/commons/main.js:6710:20

tryCatch@http://localhost:3000/_next/static/commons/main.js:28441:37

invoke@http://localhost:3000/_next/static/commons/main.js:28675:22

defineIteratorMethods/</prototype[method]@http://localhost:3000/_next/static/commons/main.js:28493:16

step@http://localhost:3000/_next/static/commons/main.js:213:22

_next@http://localhost:3000/_next/static/commons/main.js:228:9

_asyncToGenerator/</<@http://localhost:3000/_next/static/commons/main.js:235:7

Promise@http://localhost:3000/_next/static/commons/main.js:3455:7

_asyncToGenerator/<@http://localhost:3000/_next/static/commons/main.js:208:12

render@http://localhost:3000/_next/static/commons/main.js:6682:10

_callee$/<@http://localhost:3000/_next/static/commons/main.js:6651:13

notify/<@http://localhost:3000/_next/static/commons/main.js:9156:16

./node_modules/core-js/library/modules/_collection.js/module.exports/</<@http://localhost:3000/_next/static/commons/main.js:1422:22

notify@http://localhost:3000/_next/static/commons/main.js:9155:7

update@http://localhost:3000/_next/static/commons/main.js:8552:9

./pages/account/identity.js/</<@http://localhost:3000/_next/-/page/account/identity.js:17672:11

./pages/account/identity.js/<@http://localhost:3000/_next/-/page/account/identity.js:17659:6

./pages/account/identity.js@http://localhost:3000/_next/-/page/account/identity.js:17424:29

webpack_require@http://localhost:3000/_next/static/commons/manifest.js:715:13

hotApply@http://localhost:3000/_next/static/commons/manifest.js:637:14

cb@http://localhost:3000/_next/static/commons/main.js:33403:25

check/<@http://localhost:3000/_next/static/commons/main.js:33419:13
in App
in ErrorBoundary

• Error when referencing an undefined component

In this case I imported a component that wasn't properly exported (as default). The strangest of errors resulted:

Cannot read property 'toLowerCase' of undefined

TypeError: Cannot read property 'toLowerCase' of undefined
at ReactDOMServerRenderer.renderDOM (/Users/rauchg/Projects/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2287:28)
at ReactDOMServerRenderer.render (/Users/rauchg/Projects/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2281:21)
at ReactDOMServerRenderer.read (/Users/rauchg/Projects/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2217:19)
at renderToString (/Users/rauchg/Projects/front/node_modules/react-dom/cjs/react-dom-server.node.development.js:2484:25)
at renderPage (/Users/rauchg/Projects/front/node_modules/next/dist/server/render.js:275:26)
at Function.getInitialProps (/Users/rauchg/Projects/front/node_modules/next/dist/server/document.js:67:25)
at _callee$ (/Users/rauchg/Projects/front/node_modules/next/dist/lib/utils.js:111:30)
at tryCatch (/Users/rauchg/Projects/front/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/Users/rauchg/Projects/front/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/Users/rauchg/Projects/front/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/Users/rauchg/Projects/front/node_modules/@babel/runtime/helpers/asyncToGenerator.js:12:30)
at _next (/Users/rauchg/Projects/front/node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:9)
at /Users/rauchg/Projects/front/node_modules/@babel/runtime/helpers/asyncToGenerator.js:34:7
at new Promise ()
at new F (/Users/rauchg/Projects/front/node_modules/core-js/library/modules/_export.js:36:28)
at /Users/rauchg/Projects/front/node_modules/@babel/runtime/helpers/asyncToGenerator.js:7:12

[timneutkens]

Error when referencing an undefined component

This one is actually fixed when React is upgraded, i believe 16.3 or 16.4

[sergiodxa]

When triggering an error inside the render of a component

The actual error (showed in the browser devtools) was:

Uncaught ReferenceError: slug is not defined

[timneutkens]

Note that Sergio's component is not just "the render of a component" it's inside a
React portal.

[timneutkens]

rauchg recently verified these in front.