archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-sentry
History
Dominic Elm d2caaeab64
docs: add 'Open in StackBlitz' buttons to various examples (#25853) 
This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either.

Here's an example:
![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [x] Examples updated
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [x] Make sure the linting passes
2021-06-08 20:45:02 +00:00
..
pages Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00
.gitignore Added .gitignore to examples that are deployed to vercel (#15127) 2020-07-16 10:52:23 -04:00
next.config.js Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00
package.json Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00
README.md docs: add 'Open in StackBlitz' buttons to various examples (#25853) 2021-06-08 20:45:02 +00:00
sentry.client.config.js Update example with-sentry (#24819) 2021-05-07 12:52:03 +00:00
sentry.properties 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

README.md

Sentry

This is an example showing how to use Sentry to catch & report errors on both client + server side, using the official Sentry SDK for Next.js.

  • _app.js renders on both the server and client
  • _error.js is rendered by Next.js while handling certain types of exceptions for you. It is overridden so those exceptions can be passed along to Sentry
  • Each API route is handled with withSentry
  • next.config.js automatically configures the app to use Sentry through withSentry

Preview

Preview the example live on StackBlitz:

Open in StackBlitz

Deploy your own

Once you have access to your Sentry DSN, deploy the example using Vercel:

Deploy with Vercel

Check out Sentry’s Vercel Integration.

How To Use

Execute create-next-app with npm or Yarn to bootstrap the example:

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

Configuration

You can configure your app automatically or do the manual setup. Both ways lead to having your custom config files (next.config.js, sentry.client.config.js, sentry.server.config.js, and sentry.properties); so you can delete them from the example, they are here to illustrate how an example app looks like.

Deploy on Vercel

You can deploy this app to the cloud with Vercel (Documentation).

Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

Deploy from Our Template

Alternatively, you can deploy using our template by clicking on the Deploy button below.

Deploy with Vercel

Sentry Integration

Sentry’s Vercel Integration connects your Sentry and Vercel projects to automatically upload source maps and notify Sentry of release deployment. Learn more about this integration in Sentry’s full documentation.