rsnext/examples/with-sentry
Katie Byers 8fa5f34186
[examples] Fix deploy button URL in with-sentry example (#30112)
This updates the URL behind the "Deploy to Vercel" button in the readme of the `with-sentry` example. Changes which have been made:

- Addition of a required integration
- Removal of the required env var, as it's set by the integration

- [x] Make sure the linting passes
2021-10-20 18:21:12 +00:00
..
pages fix(with-sentry example): Small tweaks (#28359) 2021-09-17 14:14:52 +00:00
.gitignore Added .gitignore to examples that are deployed to vercel (#15127) 2020-07-16 10:52:23 -04:00
next.config.js fix(with-sentry example): Small tweaks (#28359) 2021-09-17 14:14:52 +00:00
package.json Clean up examples package.json (#27121) 2021-07-12 19:58:03 +00:00
README.md [examples] Fix deploy button URL in with-sentry example (#30112) 2021-10-20 18:21:12 +00:00
sentry.client.config.js Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00
sentry.server.config.js Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00

Sentry

This is an example showing how to use Sentry to catch and report errors on both the front and back ends, using the official Sentry SDK for Next.js.

  • 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
  • _error.js (which is rendered by Next.js when handling certain types of exceptions) is overridden so those exceptions can be passed along to Sentry
  • Each API route is handled with withSentry

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

It only takes a few steps to create and deploy your own version of this example app. Before you begin, make sure you have linked your Vercel account to GitHub, and set up a project in Sentry.

Option 1: Deploy directly to Vercel

You can deploy a copy of this project directly to Vercel.

Deploy with Vercel

This will clone this example to your GitHub org, create a linked project in Vercel, and prompt you to install the Vercel Sentry Integration. (You can read more about the integration on Vercel and in the Sentry docs.)

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.

Create and configure your app

To begin, execute create-next-app with npx or Yarn, to create the app and install dependencies:

npx create-next-app --example with-sentry nextjs-sentry-example
# or
yarn create next-app --example with-sentry nextjs-sentry-example

Next, run sentry-wizard, which will create and populate the settings files needed by @sentry/nextjs to initialize the SDK and upload source maps to Sentry:

npx @sentry/wizard -i nextjs

Once the files are created, you can further configure your app by adding SDK settings to sentry.server.config.js and sentry.client.config.js and SentryWebpackPlugin settings to next.config.js.

(If you'd rather do the SDK set-up manually, you can do that, too.)

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.

Deploy your app to Vercel

Vercel reads you code from GitHub, so you first need to create an empty GitHub repo for your project and then add it to your local repo as a remote:

git remote add origin https://github.com/<org>/<repo>.git

Next, create a project in Vercel and link it to your GitHub repo.

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 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 and in the Sentry docs.)

Finally, commit your app and push it to GitHub:

git add .
git commit -m "initial commit"
git push

This will trigger a deployment in Vercel. Head over to your Vercel dashboard and click on your project and then "Visit" to see the results!