diff --git a/examples/with-sentry/package.json b/examples/with-sentry/package.json
index 58f67456..b511f11b 100644
--- a/examples/with-sentry/package.json
+++ b/examples/with-sentry/package.json
@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "next": "latest",
-    "raven-js": "^3.19.1",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "@sentry/browser": "^4.0.4",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
   },
   "license": "ISC"
 }
diff --git a/examples/with-sentry/pages/_app.js b/examples/with-sentry/pages/_app.js
index cfdb6658..61d194db 100644
--- a/examples/with-sentry/pages/_app.js
+++ b/examples/with-sentry/pages/_app.js
@@ -1,16 +1,21 @@
 import App from 'next/app'
-import Raven from 'raven-js'
+import * as Sentry from '@sentry/browser'
 
 const SENTRY_PUBLIC_DSN = ''
 
 export default class MyApp extends App {
   constructor (...args) {
     super(...args)
-    Raven.config(SENTRY_PUBLIC_DSN).install()
+    Sentry.init({dsn: SENTRY_PUBLIC_DSN})
   }
 
   componentDidCatch (error, errorInfo) {
-    Raven.captureException(error, { extra: errorInfo })
+    Sentry.configureScope(scope => {
+      Object.keys(errorInfo).forEach(key => {
+        scope.setExtra(key, errorInfo[key])
+      })
+    })
+    Sentry.captureException(error)
 
     // This is needed to render errors correctly in development / production
     super.componentDidCatch(error, errorInfo)