Next.js: _error.js getInitialProps is not called for an error thrown at the top level of a module

Created on 1 Sep 2019 · 10Comments · Source: vercel/next.js

Bug report

Describe the bug

Error.getInitialProps is not called when an exception is thrown at the top level of a page while it is being loaded. This is problematic because getInitialProps would have provided access to the Error object. I want the Error so that I can log it and potentially display it to the user in render().

To Reproduce

I've created a minimal reproduction here: https://github.com/WestonThayer/bug-nextjs-error-getinitialprops

Expected behavior

The Error that was thrown should be made available to _error.js. I would expect to receive it via getInitialProps, but I supposed having it as a prop passed in to render would work too.

Additional context

I _think_ this was introduced by https://github.com/zeit/next.js/pull/4764, specifically the lines that use the props from the server. I can see how that makes sense if the Error was thrown on the server side and _error.js's getInitialProps ran on the server, but it doesn't account for code that works fine on the server, but throws on the client.

As a workaround, the exception is passed as a prop to App, so I'm simply passing it on:

class MyApp extends App {
  render() {
    const { Component, pageProps, err } = this.props;
    return <Component {...pageProps} err={err} />;
  }
}

bug stretch needs investigation

Source

WestonThayer

👍25 🎉1

Most helpful comment

Trying to use @WestonThayer 's workaround with Typescript results in an error:

function App({ Component, pageProps, err }: AppProps) { 
  // rest of app here
})

Error:

Property 'err' does not exist on type 'AppPropsType<Router, {}>

What would be the right types to use in this case?

fredrik-sogaard on 24 Jun 2020

👍5

All 10 comments

But I could see the log from Error.getInitialProps in terminal after I ran the reproduce repo...

ckybonist on 5 Dec 2019

Sorry, I can see how I wasn't specific enough. The goal is to get This will not log, because it was not run to display in the browser console. The only reason you saw that text in the terminal is because the browser attempted to load /favicon.ico and it wasn't found, which yielded a 404, so the server rendered _error.js. It's unrelated to the bug.

I've updated the repo to add a link to the favicon in <head>, so you won't see that log in the terminal anymore.

WestonThayer on 5 Dec 2019

👍1

Thanks @WestonThayer , now the console is totally silent.

ckybonist on 6 Dec 2019

Just noting that this still repro's with [email protected].

WestonThayer on 14 Apr 2020

👀7

Trying to use @WestonThayer 's workaround with Typescript results in an error:

function App({ Component, pageProps, err }: AppProps) { 
  // rest of app here
})

Error:

Property 'err' does not exist on type 'AppPropsType<Router, {}>

What would be the right types to use in this case?

fredrik-sogaard on 24 Jun 2020

👍5

@fredrik-sogaard it's not a publicly exposed part of AppProps, thus my workaround is taking advantage of non-public parts of Next.js's API and should be considered brittle.

But, it works for now. I'm just casting to any: const err = (props as any).err;.

WestonThayer on 24 Jun 2020

👍2

Slightly off topic but I hope you guys can help - this is driving me nuts.

I've added the code from with-sentry example with the workaround and everything.

If I build locally and start, the server errors are logged.

When I push and the project is built on Vercel, no server side errors logged to Sentry. I checked that the Sentry DSN is correct by printing it to console. The sourcemaps are uploaded also.

Any ideas?

EDIT: I deployed the example verbatim and server-side error tracking doesn't work there either. 😕

georgiosd on 1 Jul 2020

👍2

@georgiosd sounds like something changed since I last worked with it, but I do wonder if it's simply that https://github.com/vercel/next.js/issues/8685 started impacting more situations.

To debug, try calling await Sentry.flush(2000) before exiting your server-side function. If that's the issue, it should successfully be reported to Sentry. Also worth checking your server-side logs in Vercel for that function to see if some other error was logged.

WestonThayer on 1 Jul 2020

@WestonThayer How sad. I'm gonna try that but need to make some progress with the project first. Will report what I find.

Mean time I opened another issue https://github.com/vercel/next.js/discussions/14758 - I hope the Vercel folks will give a hand.

georgiosd on 2 Jul 2020

Hey guys, any news about this? I'm having the same issue