Update Sentry example to improve display of server errors

examples/with-sentry/next.config.js

@@ -23,6 +23,9 @@ const COMMIT_SHA =
 process.env.SENTRY_DSN = SENTRY_DSN
 
 module.exports = withSourceMaps({
+  serverRuntimeConfig: {
+    rootDir: __dirname,
+  },
   webpack: (config, options) => {
     // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
     // @sentry/node will run in a Node.js environment. @sentry/node will use

examples/with-sentry/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@sentry/browser": "^5.15.5",
+    "@sentry/integrations": "5.20.1",
     "@sentry/node": "^5.15.5",
     "@sentry/webpack-plugin": "^1.11.1",
     "@zeit/next-source-maps": "0.0.4-canary.1",

examples/with-sentry/pages/_app.js

@@ -1,8 +1,20 @@
 import * as Sentry from '@sentry/node'
+import { RewriteFrames } from '@sentry/integrations'
+import getConfig from 'next/config'
 
 if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+  const config = getConfig()
+  const distDir = `${config.serverRuntimeConfig.rootDir}/.next`
   Sentry.init({
     enabled: process.env.NODE_ENV === 'production',
+    integrations: [
+      new RewriteFrames({
+        iteratee: (frame) => {
+          frame.filename = frame.filename.replace(distDir, 'app:///_next')
+          return frame
+        },
+      }),
+    ],
     dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   })
 }