Add `with-sentry-simple` example. (#7360)

examples/with-sentry-simple/README.md

+[![Deploy To Now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-sentry-simple)
+
+# Sentry (Simple Example)
+
+## How To Use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-sentry-simple with-sentry-simple
+# or
+yarn create next-app --example with-sentry-simple with-sentry-simple
+```
+
+### Download Manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-sentry-simple
+cd with-sentry-simple
+```
+
+Install it and run:
+
+**NPM**
+
+```bash
+npm install
+npm run dev
+```
+
+**Yarn**
+
+```bash
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Now](https://zeit.co/now) ([Download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## About Example
+
+This is a simple example showing how to use [Sentry](https://sentry.io) to catch & report errors on both client + server side.
+
+- `_document.js` is _server-side only_ and is used to change the initial server-side rendered document markup. We listen at the node process level to capture exceptions.
+- `_app.js` is client-side only and is used to initialize pages. We use the `componentDidCatch` lifecycle method to catch uncaught exceptions.
+
+**Note**: Source maps will not be sent to Sentry when running locally. It's also possible you will see duplicate errors sent when testing
+locally due to hot reloading. For a more accurate simulation, please deploy to Now.
+
+### Configuration
+
+You will need a _Sentry DSN_ for your project. You can get it from the settings of your project in **Client Keys (DSN)**. Then, copy the string labeled **DSN (Public)**.
+
+The Sentry DSN should then be updated in `_app.js`.
+
+```js
+Sentry.init({
+  dsn: 'PUT_YOUR_SENTRY_DSN_HERE'
+});
+```
+
+_Note: Committing environment variables is not secure and is done here only for demonstration purposes. See the [`with-dotenv`](../with-dotenv) or [`with-now-env`](../with-now-env) for examples of how to set environment variables safely._

examples/with-sentry-simple/next.config.js

+const withSourceMaps = require('@zeit/next-source-maps')()
+
+module.exports = withSourceMaps({
+  webpack (config, _options) {
+    return config
+  }
+})

examples/with-sentry-simple/package.json

+{
+  "name": "with-sentry-simple",
+  "version": "1.0.0",
+  "license": "ISC",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@sentry/browser": "^5.1.0",
+    "next": "latest",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "@zeit/next-source-maps": "0.0.4-canary.1"
+  }
+}

examples/with-sentry-simple/pages/_app.js

+import React from 'react'
+import App, { Container } from 'next/app'
+import * as Sentry from '@sentry/browser'
+
+Sentry.init({
+  dsn: 'ENTER_YOUR_SENTRY_DSN_HERE'
+})
+
+class MyApp extends App {
+  static async getInitialProps ({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  componentDidCatch (error, errorInfo) {
+    Sentry.withScope((scope) => {
+      Object.keys(errorInfo).forEach((key) => {
+        scope.setExtra(key, errorInfo[key])
+      })
+
+      Sentry.captureException(error)
+    })
+
+    super.componentDidCatch(error, errorInfo)
+  }
+
+  render () {
+    const { Component, pageProps } = this.props
+
+    return (
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    )
+  }
+}
+
+export default MyApp

examples/with-sentry-simple/pages/_document.js

+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import * as Sentry from '@sentry/browser'
+
+process.on('unhandledRejection', (err) => {
+  Sentry.captureException(err)
+})
+
+process.on('uncaughtException', (err) => {
+  Sentry.captureException(err)
+})
+
+class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render () {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

examples/with-sentry-simple/pages/index.js

+import React from 'react'
+
+class Index extends React.Component {
+  static getInitialProps ({ query }) {
+    if (query.raiseError) {
+      throw new Error('Error in getInitialProps')
+    }
+  }
+
+  state = {
+    raiseErrorInRender: false,
+    raiseErrorInUpdate: false
+  };
+
+  componentDidUpdate () {
+    if (this.state.raiseErrorInUpdate) {
+      throw new Error('Error in componentDidUpdate')
+    }
+  }
+
+  raiseErrorInUpdate = () => this.setState({ raiseErrorInUpdate: '1' });
+  raiseErrorInRender = () => this.setState({ raiseErrorInRender: '1' });
+
+  render () {
+    if (this.state.raiseErrorInRender) {
+      throw new Error('Error in render')
+    }
+
+    return (
+      <div>
+        <h2>Sentry Example 🚨</h2>
+        <ul>
+          <li>
+            <a href='#' onClick={this.raiseErrorInRender}>
+              Raise the error in render
+            </a>
+          </li>
+          <li>
+            <a href='#' onClick={this.raiseErrorInUpdate}>
+              Raise the error in componentDidUpdate
+            </a>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default Index