diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md
index fbc56472effef..7538b9057379a 100644
--- a/examples/with-sentry/README.md
+++ b/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//.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!
diff --git a/examples/with-sentry/package.json b/examples/with-sentry/package.json
index 5f17a1b53418e..2ebcff578205d 100644
--- a/examples/with-sentry/package.json
+++ b/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"
}
diff --git a/examples/with-sentry/pages/client/test5.js b/examples/with-sentry/pages/client/test5.js
index d48657de19d9c..47a3a966209b7 100644
--- a/examples/with-sentry/pages/client/test5.js
+++ b/examples/with-sentry/pages/client/test5.js
@@ -1,12 +1,28 @@
+import * as Sentry from '@sentry/nextjs'
+
const Test5 = () => (
<>
Client Test 5
>
)
diff --git a/examples/with-sentry/pages/index.js b/examples/with-sentry/pages/index.js
index f8323e5f8be4c..925207963261b 100644
--- a/examples/with-sentry/pages/index.js
+++ b/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.
+
+ It also demonstrates the performance monitoring the SDK is able to do:
+
+
+ A front-end transaction is recorded for each pageload or navigation.
+
+
+ A backend transaction is recorded for each API or page route. (Note
+ that currently only API routes are traced on Vercel.)
+
+
+ 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/).
+
+
+ Manual performance instrumentation is demonstrated in the final
+ example below (throwing an error from an event handler).
+
+
+
Important: exceptions in development mode take a
different path than in production. These tests should be run on a
@@ -17,10 +38,8 @@ const Index = () => (
-
- API route exceptions (note that 1 and 2 are not expected to work if
- deployed to Vercel yet)
-
+
API route exceptions/transactions
+ Note that 1 and 2 are not expected to work if deployed to Vercel yet.
API has a top-of-module Promise that rejects, but its result is not
@@ -51,7 +70,11 @@ const Index = () => (
-
SSR exceptions
+
SSR exceptions/transactions
+ 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.
getServerSideProps throws an Error. This should cause _error.js to
@@ -89,7 +112,6 @@ const Index = () => (
-
Client exceptions
@@ -141,7 +163,8 @@ const Index = () => (
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.){' '}
Perform client side navigation
{' '}
diff --git a/examples/with-sentry/sentry.client.config.js b/examples/with-sentry/sentry.client.config.js
index eca167eb76fdf..922fcdcbbd009 100644
--- a/examples/with-sentry/sentry.client.config.js
+++ b/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
diff --git a/examples/with-sentry/sentry.server.config.js b/examples/with-sentry/sentry.server.config.js
index f1ff06b8e5eed..75d73dcf5b8e9 100644
--- a/examples/with-sentry/sentry.server.config.js
+++ b/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