|
1 | | -Add a button to a frontend component that throws an error: |
| 1 | +## Step 2: Verify Your Setup |
2 | 2 |
|
3 | | -```javascript {filename:pages/index.js} |
4 | | -<button |
5 | | - type="button" |
6 | | - onClick={() => { |
7 | | - throw new Error("Sentry Frontend Error"); |
8 | | - }} |
9 | | -> |
10 | | - Throw error |
11 | | -</button> |
12 | | -``` |
| 3 | +<Expandable level="warning" title="Are you developing with Turbopack?"> |
13 | 4 |
|
14 | | -And throw an error in an API route: |
| 5 | +The Sentry SDK doesn't fully support `next dev --turbo` as Turbopack is still under development. This means that the Sentry SDK will not capture any data from your frontend. Other than that, your dev server should be fully operational. |
15 | 6 |
|
16 | | -```javascript {filename:pages/api/error.js} |
17 | | -export default (req, res) => { |
18 | | - throw new Error("API throw error test"); |
19 | | - res.status(200).json({ name: "John Doe" }); |
20 | | -}; |
21 | | -``` |
| 7 | +Check the latest information on [Sentry's support for Turbopack on GitHub](https://github.com/getsentry/sentry-javascript/issues/8105). |
22 | 8 |
|
23 | | -```typescript {filename:pages/api/error.ts} |
24 | | -import type { NextApiRequest, NextApiResponse } from "next"; |
| 9 | +</Expandable> |
25 | 10 |
|
26 | | -export default (req: NextApiRequest, res: NextApiResponse) => { |
27 | | - throw new Error("API throw error test"); |
28 | | - res.status(200).json({ name: "John Doe" }); |
29 | | -}; |
30 | | -``` |
| 11 | +If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard: |
31 | 12 |
|
32 | | -<Alert> |
| 13 | +1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost. |
| 14 | +2. Click the "Throw error" button. This triggers two errors: |
| 15 | + - a frontend error |
| 16 | + - an error within the API route |
33 | 17 |
|
34 | | -Errors triggered from within Browser DevTools are sandboxed, so they will not trigger error monitoring. Keep this in mind when verifying your Sentry SDK installation. |
| 18 | +Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete. |
| 19 | + |
| 20 | +<Alert level="success" title="Tip"> |
| 21 | + |
| 22 | +Don't forget to explore the example files' code in your project to understand what's happening after your button click. |
35 | 23 |
|
36 | 24 | </Alert> |
37 | 25 |
|
38 | | -<Alert title="Nested React Server Components" level="warning"> |
| 26 | +### View Captured Data in Sentry |
39 | 27 |
|
40 | | -Prior to Next.js version 15, errors thrown in nested React Server Components were not exposed by the framework, preventing the SDK from capturing them. |
| 28 | +Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). |
41 | 29 |
|
42 | | -Next.js 15 introduced an `onRequestError` hook in `instrumentation.ts` that allows capturing and reporting these errors. |
| 30 | +<Alert level="warning" title="Important"> |
43 | 31 |
|
44 | | -Refer to <PlatformLink to="/manual-setup/#errors-from-nested-react-server-components">Capturing Errors From Nested React Server Components</PlatformLink> for detailed setup instructions. |
| 32 | +Errors triggered from within your browser's developer tools (i.e., the browser console) are sandboxed, so they will not trigger Sentry's error monitoring. |
45 | 33 |
|
46 | 34 | </Alert> |
| 35 | + |
| 36 | +<Expandable title="Need help locating the captured errors in your Sentry project?"> |
| 37 | + |
| 38 | +1. Open the [**Issues**](https://sentry.io/orgredirect/organizations/:orgslug/issues) page and select an error from the issues list to view the full details and context of this error. For an interactive UI walkthrough, click [here](/product/sentry-basics/integrate-frontend/generate-first-error/#ui-walkthrough). |
| 39 | +2. Open the [**Traces**](https://sentry.io/orgredirect/organizations/:orgslug/traces) page and select a trace to reveal more information about each span, its duration, and any errors. For an interactive UI walkthrough, click [here](/product/sentry-basics/distributed-tracing/generate-first-error/#ui-walkthrough). |
| 40 | +3. Open the [**Replays**](https://sentry.io/orgredirect/organizations/:orgslug/replays) page and select an entry from the list to get a detailed view where you can replay the interaction and get more information to help you troubleshoot. |
| 41 | + |
| 42 | +</Expandable> |
0 commit comments