Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/includes/getting-started-config/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,17 @@ See [manual configuration](/platforms/javascript/guides/nextjs/manual-setup/) fo

To complete your configuration, add [options](/platforms/javascript/configuration/) to your two `Sentry.init()` calls (in `sentry.client.config.js` and `sentry.server.config.js`, respectively). In those two files you can also set context data - data about the [user](/platforms/javascript/enriching-events/identify-user/), for example, or [tags](/platforms/javascript/enriching-events/tags/), or even [arbitrary data](/platforms/javascript/enriching-events/context/) - which will be added to every event sent to Sentry.

Once you're set up, the SDK will automatically capture unhandled errors and promise rejections. You can also [manually capture errors](/platforms/javascript/guides/nextjs/usage).
Once you're set up, the SDK will automatically capture unhandled errors and promise rejections in your frontend. You can also [manually capture errors](/platforms/javascript/guides/nextjs/usage).

To capture server/API route errors, you need to wrap your handlers with a Sentry function:

```javascript
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { withSentry } from '@sentry/nextjs';

const handler = async (req, res) => {
res.status(200).json({ name: 'John Doe' })
}

export default withSentry(handler);
```
28 changes: 28 additions & 0 deletions src/includes/getting-started-verify/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
Add a button to a frontend component that throws an error:

```javascript {filename:pages/index.js}
<button type="button" onClick={() => {
throw new Error("Sentry Frontend Error");
}}>
Throw error
</button>
```

And throw an error in an API route:

```javascript {filename:pages/api/hello.js}
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import { withSentry } from '@sentry/nextjs';

const handler = async (req, res) => {
throw new Error('API throw error test')
res.status(200).json({ name: 'John Doe' })
}

export default withSentry(handler);
```
<Note>

Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead.

</Note>