This updates the `with-sentry` example to use the new helper function `captureUnderscoreErrorException` in its `_error.js` page. This new function both adds more data to sentry events and allows the code to be cleaned up quite a bit.
Fixes https://github.com/vercel/next.js/issues/37870.
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
The error reported here is unclear and un-helpful so we shouldn't be recommending to report this by default.
x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1652466540356879)
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
* Add js types to SentryWebpackPluginOptions
Enables code completion in Visual Studio Code (and perhaps other editors)
* Use partial type for SentryWebpackPluginOptions
This matches the expected type in e71454ef78/packages/nextjs/src/config/webpack.ts (L38)
* inline sentry config
@sentry/nextjs support has changed as it now supports version from 10.0.8 also meaning they support Next.Js 12
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
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
This PR makes two changes:
- It updates the index page to reflect the fact that `withSentry` should now be working for API routes deployed to Vercel.
- It changes the route which returns a promise rejection to be more obvious about the fact that that's what it's doing.
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`
Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).
## Documentation / Examples
- [x] Make sure the linting passes
[With next 11 requiring react 17](https://nextjs.org/blog/next-11#upgrade-guide), most of the examples
need to be updated, so the following snippet updated all the examples to
a compatible react version.
```bash
cd examples/
fd -g 'package.json' | xargs sed -r -i 's/"react": ".*"/"react": "^17.0.2"/
fd -g 'package.json' | xargs sed -r -i 's/"react-dom": ".*"/"react-dom": "^17.0.2"/'
# exclude experimental react version
git checkout with-reason-relay/package.json
```
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
The [official Sentry Next.js SDK](https://docs.sentry.io/platforms/javascript/guides/nextjs/) is now the recommended choice to use with Next.js, instead of the previous workarounds. This PR updates the example, which now uses the SDK.
* Add info about SENTRY_URL on source map uploading
* Update examples/with-sentry/README.md
Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: Luis Alvarez D <luis@vercel.com>
## New features
- Example of how to use `Sentry.captureException()` in API routes 5a35982717
## Bug fixes
- Server-side source maps now work in Sentry when deployed to Vercel 629a9ed504
- If uploading source maps, `Sentry.init()` now sets the `release`, so that exceptions are correctly associated with the source maps in that release
## Open issues
### `_error.js` is unused for `getServerSideProps` errors when deployed to Vercel
Instead of rendering this example's overridden `_error.js` (like it does when testing locally with `NODE_ENV='production'`), when deployed to Vercel and an Error is thrown from `getServerSideProps`, this page is shown:
![Screenshot of Vercel Application Error page](https://user-images.githubusercontent.com/709153/90968889-aa3c3d00-e4a6-11ea-9eff-fafee3d1ff33.png)
This confuses me because the Error is still successfully sent to Sentry, but I would've expected it to be sent by the call to `Sentry.captureException()` in `_error.js`. I'm not sure why it works.
### API test 2 & 3 don't work in the "server" build config
They don't work when deployed to Vercel in the "serverless" config either, but that's expected because there aren't any handlers to flush the Sentry queue. I can't figure out why they don't work in the long-lived "server" config.
**What's the problem this PR addresses?**
A decent amount of the examples don't have a `name` field in `package.json` that matches their folder name, meaning they either lack a name or the names are duplicated.
I was testing Yarn 2 workspaces using the entire examples directory and needed to get rid of the duplicates.
**How did you fix it?**
Updated the names to match the names of their folders
In with-sentry add stripPrefix of `webpack://_N_E/`. This removes the `webpack://_N_E/` prefix from the stack trace which will help Sentry to understand what is "App Only" vs "Full"
I'll fully tested calling errors in browser and the stack traces are still aligned and linked correctly. This just gets rid of the extra data in the front which seems to be the same for everyone and I believe it comes from webpack 5 (?)
* Update Sentry example for use with Sentry/Vercel integration
* update linting
* Update link in readme
* Update readme, add comment
* Add step about commit SHA
* Updated readme
* Use if
* dont call sentry webpack plugin w/o a commit sha present
* Update examples/with-sentry/README.md
Co-authored-by: Luis Alvarez D. <luis@vercel.com>
* update release value
* prettier readme
* Updated note
Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1. I updated all the packages.
2. Refactored the home component from class to functional
3. Example now uses getServerSideProps instead of getInitialProps
Again, related to [12964](https://github.com/zeit/next.js/issues/12964)
After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports.
Let me know if you want me to edit anything that you don't like.
Regards
with-typescript
with-atstroturf
with-atlaskit
with-styletron
with-styled-components-rtl
with-stylesheet
with-stomp
with-stitches-styled
with-stitches
with-slate
with-sentry-simple
with-sentry
with-segment-analytics
with-rematch
with-relay-modern
with-reflux
with-redux-wrapper
with-react-relay-network
with-react-native
with-react-multi-carousel
with-react-jss
with-react-helmet
with-react-ga
with-quill-js
with-prefetching
with-google-analytics-amp
with-google-analytics
with-framer-motion
with-flow
with-firebase-hosting
with-firebase-cloud-messaging
with-firebase-authentication
with-expo
with-dynamic-app-layout
with-draft-js
with-cxs
with-cerebral
with-ant-design-mobile
with-algolia-react-instantsearch
using-preact
progressive-render