[WIP] Add tracing to with-sentry example

examples/with-sentry/README.md

@@ -1,6 +1,8 @@
 # Sentry
 
-This is an example showing how to use [Sentry](https://sentry.io) to catch and report errors on both the front and back ends, using the [official Sentry SDK for Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/).
+_Note: `@sentry/nextjs` is not yet guaranteed to be compatible with the newly-released Next.js 12. This example therefore uses Next.js 11._
+
+This is an example showing how to use [Sentry](https://sentry.io) to catch and report errors and monitor the performance of both the front and back ends, using the [official Sentry SDK for Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/).
 
 - `sentry.server.config.js` and `sentry.client.config.js` are used to configure and initialize Sentry
 - `next.config.js` automatically injects Sentry into your app using `withSentryConfig`
@@ -27,7 +29,7 @@ This will clone this example to your GitHub org, create a linked project in Verc
 
 ### Option 2: Create locally before deploying
 
-Alternatively, you can create a copy of ths example app locally so you can configure and customize it before you deploy it.
+Alternatively, you can create a copy of this example app locally so you can configure and customize it before you deploy it.
 
 #### Create and configure your app
 
@@ -45,11 +47,11 @@ Next, run [`sentry-wizard`](https://docs.sentry.io/platforms/javascript/guides/n
 npx @sentry/wizard -i nextjs
 ```
 
-Once the files are created, you can further configure your app by adding [SDK settings](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/) to `sentry.server.config.js` and `sentry.client.config.js` and [`SentryWebpackPlugin` settings](https://github.com/getsentry/sentry-webpack-plugin#options) to `next.config.js`.
+Once the files are created, you can further configure your app by adding [SDK settings](https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/) to `sentry.server.config.js` and `sentry.client.config.js`, and [`SentryWebpackPlugin` settings](https://github.com/getsentry/sentry-webpack-plugin#options) to `next.config.js`.
 
 (If you'd rather do the SDK set-up manually, [you can do that, too](https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/).)
 
-You should now be able to build and run your app locally, upload source maps, and send errors to Sentry. For more details, check out the [Sentry Next.js SDK docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/).
+You should now be able to build and run your app locally, upload source maps, and send errors and performance data to Sentry. For more details, check out the [Sentry Next.js SDK docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/).
 
 #### Deploy your app to Vercel
 
@@ -61,14 +63,14 @@ git remote add origin https://github.com/<org>/<repo>.git
 
 Next, [create a project in Vercel](https://vercel.com/docs/projects/overview#creating-a-project) and [link it to your GitHub repo](https://vercel.com/docs/git#deploying-a-git-repository).
 
-In order for Vercel to upload source maps to Sentry when building your app, it needs an auth token. To use the personal token set up by the wizard, add an [environment variable](https://vercel.com/docs/projects/environment-variables) to your Vercel project with the key `SENTRY_AUTH_TOKEN` and the value you'll find in `.sentryclirc` at the root level of your project. To use an org-wide token instead, set up the Vercel Sentry Integration. (You can read more about the integration [on Vercel](https://vercel.com/integrations/sentry) and in [the Sentry docs](https://docs.sentry.io/product/integrations/deployment/vercel/).)
+In order for Vercel to upload source maps to Sentry when building your app, it needs a Sentry auth token. The wizard automatically sets up your personal token locally; to use that token on Vercel, add an [environment variable](https://vercel.com/docs/projects/environment-variables) to your Vercel project with the key `SENTRY_AUTH_TOKEN` and the value you'll find in `.sentryclirc` at the root level of your project. To use an org-wide token instead, set up the Vercel Sentry Integration. (You can read more about the integration [on Vercel](https://vercel.com/integrations/sentry) and in [the Sentry docs](https://docs.sentry.io/product/integrations/deployment/vercel/).)
 
 Finally, commit your app and push it to GitHub:
 
 ```bash
 git add .
-git commit -m "initial commit"
+git commit -m "Initial commit"
 git push
 ```
 
-This will trigger a deployment in Vercel. Head over to your [Vercel dashboard](https://vercel.com/dashboard) and click on your project and then "Visit" to see the results!
+This will trigger a deployment in Vercel. Head over to your [Vercel dashboard](https://vercel.com/dashboard), click on your project, and then click "Visit" to see the results!

examples/with-sentry/package.json

@@ -6,8 +6,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sentry/nextjs": "^6.3.5",
-    "next": "latest",
+    "@sentry/nextjs": "^6.15.0",
+    "next": "^10.0.8 || 11.x",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

examples/with-sentry/pages/client/test5.js

@@ -1,12 +1,28 @@
+import * as Sentry from '@sentry/nextjs'
+
 const Test5 = () => (
   <>
     <h1>Client Test 5</h1>
     <button
       onClick={() => {
-        throw new Error('Client Test 5')
+        const transaction = Sentry.startTransaction({
+          name: 'Testing performance',
+        })
+        Sentry.configureScope((scope) => {
+          scope.setSpan(transaction)
+        })
+
+        try {
+          // Some operation the button does, but fails
+          throw new Error('Client Test 5')
+        } catch (error) {
+          Sentry.captureException(error)
+        } finally {
+          transaction.finish()
+        }
       }}
     >
-      Click me to throw an Error
+      Click me to create a transaction and throw an Error
     </button>
   </>
 )

examples/with-sentry/pages/index.js

@@ -8,6 +8,27 @@ const Index = () => (
       with Sentry. There are several test pages below that result in various
       kinds of unhandled exceptions.
     </p>
+    <p>
+      It also demonstrates the performance monitoring the SDK is able to do:
+      <ol>
+        <li>
+          A front-end transaction is recorded for each pageload or navigation.
+        </li>
+        <li>
+          A backend transaction is recorded for each API or page route. (Note
+          that currently only API routes are traced on Vercel.)
+        </li>
+        <li>
+          Errors which occur during transactions are linked to those
+          transactions in Sentry and can be found in the [trace
+          navigator](https://docs.sentry.io/product/sentry-basics/tracing/trace-view/).
+        </li>
+        <li>
+          Manual performance instrumentation is demonstrated in the final
+          example below (throwing an error from an event handler).
+        </li>
+      </ol>
+    </p>
     <p>
       <strong>Important:</strong> exceptions in development mode take a
       different path than in production. These tests should be run on a
@@ -17,10 +38,8 @@ const Index = () => (
       </a>
     </p>
     <ol>
-      <li>
-        API route exceptions (note that 1 and 2 are not expected to work if
-        deployed to Vercel yet)
-      </li>
+      <li>API route exceptions/transactions</li>
+      Note that 1 and 2 are not expected to work if deployed to Vercel yet.
       <ol>
         <li>
           API has a top-of-module Promise that rejects, but its result is not
@@ -51,7 +70,11 @@ const Index = () => (
           </a>
         </li>
       </ol>
-      <li>SSR exceptions</li>
+      <li>SSR exceptions/transactions</li>
+      Note that there are currently two known bugs with respect to SSR
+      transactions: they don't get recorded on Vercel, and ones that are
+      recorded and have an error are grouped in the Sentry UI by the error page
+      name rather than the requested page name.
       <ol>
         <li>
           getServerSideProps throws an Error. This should cause _error.js to
@@ -89,7 +112,6 @@ const Index = () => (
           </a>
         </li>
       </ol>
-
       <li>Client exceptions</li>
       <ol>
         <li>
@@ -141,7 +163,8 @@ const Index = () => (
         </li>
         <li>
           An Error is thrown from an event handler. Sentry should record
-          Error('Client Test 5').{' '}
+          Error('Client Test 5'). (This page also demonstrates how to manually
+          instrument your code for performance monitoring.){' '}
           <Link href="/client/test5">
             <a>Perform client side navigation</a>
           </Link>{' '}

examples/with-sentry/sentry.client.config.js

@@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
 
 Sentry.init({
   dsn: SENTRY_DSN,
+  tracesSampleRate: 1.0,
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps

examples/with-sentry/sentry.server.config.js

@@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
 
 Sentry.init({
   dsn: SENTRY_DSN,
+  tracesSampleRate: 1.0,
   // Note: if you want to override the automatic release value, do not set a
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps