From 1187eca8f9c3b01dbe572e4a6daf56ecea60e968 Mon Sep 17 00:00:00 2001 From: Katie Byers Date: Tue, 26 Oct 2021 19:20:40 -0700 Subject: [PATCH 1/4] add tracing --- examples/with-sentry/README.md | 14 ++++---- examples/with-sentry/pages/client/test5.js | 20 +++++++++-- examples/with-sentry/pages/index.js | 37 ++++++++++++++++---- examples/with-sentry/sentry.client.config.js | 1 + examples/with-sentry/sentry.server.config.js | 1 + 5 files changed, 57 insertions(+), 16 deletions(-) diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md index fbc56472effef..cd49dd2682a2d 100644 --- a/examples/with-sentry/README.md +++ b/examples/with-sentry/README.md @@ -1,6 +1,6 @@ # 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/). +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 +27,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 +45,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 +61,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/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: +

    +
  1. + A front-end transaction is recorded for each pageload or navigation. +
    2. +
  2. + A backend transaction is recorded for each API or page route. (Note + that currently only API routes are traced on Vercel.) +
    3. +
  3. + 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/). +
    4. +
  4. + Manual performance instrumentation is demonstrated in the final + example below (throwing an error from an event handler). +
    5. +
+

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 = () => (

    -
  1. - API route exceptions (note that 1 and 2 are not expected to work if - deployed to Vercel yet) -
    2. +
  2. API route exceptions/transactions
    3. + Note that 1 and 2 are not expected to work if deployed to Vercel yet.
    1. API has a top-of-module Promise that rejects, but its result is not @@ -51,7 +70,11 @@ const Index = () => (
    -
  3. SSR exceptions
    4. +
  4. SSR exceptions/transactions
    5. + 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.
    1. getServerSideProps throws an Error. This should cause _error.js to @@ -89,7 +112,6 @@ const Index = () => (
    -
  5. Client exceptions
    1. @@ -141,7 +163,8 @@ const Index = () => (
    2. 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 From 0c5e5a729d2f6286007a8177d042b1de4b728c9c Mon Sep 17 00:00:00 2001 From: Katie Byers Date: Tue, 26 Oct 2021 19:24:45 -0700 Subject: [PATCH 2/4] update package versions --- examples/with-sentry/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/with-sentry/package.json b/examples/with-sentry/package.json index 5f17a1b53418e..e37ee1e821964 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.13.4", + "next": "^10.0.8 || 11.x", "react": "^17.0.2", "react-dom": "^17.0.2" } From ab3d1a2221c178231059417727bf0fc181a0a3a5 Mon Sep 17 00:00:00 2001 From: Katie Byers Date: Tue, 26 Oct 2021 21:58:46 -0700 Subject: [PATCH 3/4] add note about next 12 to readme --- examples/with-sentry/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md index cd49dd2682a2d..7538b9057379a 100644 --- a/examples/with-sentry/README.md +++ b/examples/with-sentry/README.md @@ -1,5 +1,7 @@ # Sentry +_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 From 41d87cc929af53f6036eedf95c70e1514271a99a Mon Sep 17 00:00:00 2001 From: Katie Byers Date: Mon, 29 Nov 2021 06:43:59 -0800 Subject: [PATCH 4/4] update SDK version --- examples/with-sentry/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-sentry/package.json b/examples/with-sentry/package.json index e37ee1e821964..2ebcff578205d 100644 --- a/examples/with-sentry/package.json +++ b/examples/with-sentry/package.json @@ -6,7 +6,7 @@ "start": "next start" }, "dependencies": { - "@sentry/nextjs": "^6.13.4", + "@sentry/nextjs": "^6.15.0", "next": "^10.0.8 || 11.x", "react": "^17.0.2", "react-dom": "^17.0.2"