From b1459bfd60d23dfb73e0425badf4f693046077ad Mon Sep 17 00:00:00 2001
From: Tomek <tomaszmularczyk89@gmail.com>
Date: Sat, 4 Aug 2018 19:51:35 +0200
Subject: [PATCH] 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 | 35 -------------------
 examples/with-sentry/pages/_app.js            | 18 ++++++++++
 examples/with-sentry/pages/index.js           | 19 +++++-----
 3 files changed, 28 insertions(+), 44 deletions(-)
 delete mode 100644 examples/with-sentry/components/withSentry.js
 create mode 100644 examples/with-sentry/pages/_app.js

diff --git a/examples/with-sentry/components/withSentry.js b/examples/with-sentry/components/withSentry.js
deleted file mode 100644
index 4ffdb78d..00000000
--- a/examples/with-sentry/components/withSentry.js
+++ /dev/null
@@ -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
diff --git a/examples/with-sentry/pages/_app.js b/examples/with-sentry/pages/_app.js
new file mode 100644
index 00000000..cfdb6658
--- /dev/null
+++ b/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)
+  }
+}
diff --git a/examples/with-sentry/pages/index.js b/examples/with-sentry/pages/index.js
index ef09c018..826020e3 100644
--- a/examples/with-sentry/pages/index.js
+++ b/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