Next.js: Bug in example : with-componentdidcatch

[lucleray]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

---

Hi,

I tried this example : with-componentdidcatch

Basically, it's using componentDidCatch in the new _app.js. It intercepts the errors and does a console.log when it intercepts one :

https://github.com/zeit/next.js/blob/02bcfb21c81bbc0f76ec8af22d4197952bd9bc15/examples/with-componentdidcatch/pages/_app.js#L3-L9

Expected Behavior

• I see CUSTOM ERROR HANDLING in the server logs

Current Behavior

• I don't see CUSTOM ERROR HANDLING in the logs
  
  
  
  • it's not in server logs
  
  
  • it's not in client logs
  
  

Steps to Reproduce (for bugs)

npx create-next-app --example with-componentdidcatch with-componentdidcatch-app
cd with-componentdidcatch-app
yarn dev

Context

The bigger picture here is trying to use error boundaries with next.js.

Your Environment

| Tech | Version |
|---------|---------|
| next | 6.0.0 |
| node | 9.8.0 |

[lucleray]

I'm adding some information about the bigger picture below.

---

I want to use error boundaries, but the behaviour seems very different if the page is server-side or client-side rendered :

• on the client, the page is loaded, and the _error boundary component_ is replacing its child by the desired error message
• on the server, the page is completely replaced by the error page, and the _error boundary component_ seems bypassed

I can build a sample github repo to show this, if it's not clear.

[timneutkens]

componentDidCatch is only supported on the client side by React, in the future i’m planning to add a hook for catching server side errors.

[lucleray]

@timneutkens If it's not supporting server side errors, I think the example is wrong (with-componentdidcatch).

It throws an error in the rendering of the index page. There is no way to trigger this on the client-side...

[sebas5384]

@timneutkens @lucleray any news on this issue?

[w-]

@timneutkens am also interested to know this.
it doesn't look like error boundaries work on client side either?
next 5.0.0
react 16.0.0

[timneutkens]

_app.js was added in Next.js 6

[w-]

Thank you for speedy reply.
ok. is it the case that in 6 ErrorBounday works in both client and server or still just client?

[timneutkens]

Client-side only, this is a limitation of React itself. For server-side error reporting you can use _error.js

[w-]

ok thank you.

[garrettmac]

What is this line doing?

super.componentDidCatch(error, errorInfo)