update with-sentry example (#4859)

Changes:

* moved the configuration from HOC to `_app.js`
* fixed the example, as `componentDidCatch` catches errors during rendering phase, but not within event handlers.

examples/with-sentry/components/withSentry.js

@@ -1,35 +0,0 @@
-import React from 'react'
-import Raven from 'raven-js'
-
-const SENTRY_DSN = ''
-
-function withSentry (Child) {
-  return class WrappedComponent extends React.Component {
-    static getInitialProps (context) {
-      if (Child.getInitialProps) {
-        return Child.getInitialProps(context)
-      }
-      return {}
-    }
-    constructor (props) {
-      super(props)
-      this.state = {
-        error: null
-      }
-      Raven.config(
-        SENTRY_DSN
-      ).install()
-    }
-
-    componentDidCatch (error, errorInfo) {
-      this.setState({ error })
-      Raven.captureException(error, { extra: errorInfo })
-    }
-
-    render () {
-      return <Child {...this.props} error={this.state.error} />
-    }
-  }
-}
-
-export default withSentry

examples/with-sentry/pages/_app.js

@@ -0,0 +1,18 @@
+import App from 'next/app'
+import Raven from 'raven-js'
+
+const SENTRY_PUBLIC_DSN = ''
+
+export default class MyApp extends App {
+  constructor (...args) {
+    super(...args)
+    Raven.config(SENTRY_PUBLIC_DSN).install()
+  }
+
+  componentDidCatch (error, errorInfo) {
+    Raven.captureException(error, { extra: errorInfo })
+
+    // This is needed to render errors correctly in development / production
+    super.componentDidCatch(error, errorInfo)
+  }
+}

examples/with-sentry/pages/index.js

@@ -1,25 +1,26 @@
 import React from 'react'
-import withSentry from '../components/withSentry'
 
 class Index extends React.Component {
-  static getInitialProps (context) {
-    const { isServer } = context
-    return { isServer }
+  state = {
+    raiseError: false
   }
 
-  onClickHandler () {
-    throw new Error('woops')
+  componentDidUpdate () {
+    if (this.state.raiseError) {
+      throw new Error('Houston, we have a problem')
+    }
   }
 
+  raiseError = () => this.setState({ raiseError: true })
+
   render () {
     return (
       <div>
         <h2>Index page</h2>
-
-        <button onClick={this.onClickHandler.bind(this)}>Click to raise error</button>
+        <button onClick={this.raiseError}>Click to raise the error</button>
       </div>
     )
   }
 }
 
-export default withSentry(Index)
+export default Index