Skip to content

Commit 20a67b0

Browse files
author
Luca Forstner
committed
Remove references to manually use withSentry from Next.js docs
1 parent c9ac149 commit 20a67b0

File tree

6 files changed

+27
-65
lines changed

6 files changed

+27
-65
lines changed

‎src/platform-includes/getting-started-config/javascript.nextjs.mdx

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,6 @@ To complete your configuration, add [options](/platforms/javascript/configuratio
1717

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

20-
To capture [Next.js API Route](https://nextjs.org/docs/api-routes/introduction) errors and monitor server performance, you need to wrap your handlers with a Sentry function:
21-
22-
```javascript {filename:pages/api/*}
23-
import { withSentry } from "@sentry/nextjs";
24-
25-
const handler = async (req, res) => {
26-
res.status(200).json({ name: "John Doe" });
27-
};
28-
29-
export default withSentry(handler);
30-
```
31-
32-
```typescript {filename:pages/api/*}
33-
import type { NextApiRequest, NextApiResponse } from "next"
34-
import { withSentry } from "@sentry/nextjs";
35-
36-
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
37-
res.status(200).json({ name: "John Doe" });
38-
};
39-
40-
export default withSentry(handler);
41-
```
42-
4320
By default, the SDK sets the environment for events to `process.env.NODE_ENV`, although you can [set your own](/platforms/javascript/guides/nextjs/configuration/environments/).
4421

4522
To learn how to connect your app to Sentry and deploy it on Vercel, see the [Vercel integration](/product/integrations/deployment/vercel/).

‎src/platform-includes/getting-started-verify/javascript.nextjs.mdx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,19 @@ Add a button to a frontend component that throws an error:
1414
And throw an error in an API route:
1515

1616
```javascript {filename:pages/api/error.js}
17-
import { withSentry } from "@sentry/nextjs";
18-
19-
const handler = async (req, res) => {
17+
export default (req, res) => {
2018
throw new Error("API throw error test");
2119
res.status(200).json({ name: "John Doe" });
2220
};
23-
24-
export default withSentry(handler);
2521
```
2622

2723
```typescript {filename:pages/api/error.ts}
2824
import type { NextApiRequest, NextApiResponse } from "next"
29-
import { withSentry } from "@sentry/nextjs";
3025

31-
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
26+
export default (req: NextApiRequest, res: NextApiResponse) => {
3227
throw new Error("API throw error test")
3328
res.status(200).json({ name: "John Doe" });
3429
};
35-
36-
export default withSentry(handler);
3730
```
3831

3932
<Note>

‎src/platform-includes/performance/automatic-instrumentation-intro/javascript.nextjs.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
`@sentry/nextjs` provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications, which is enabled by default once you set up tracing in your app. Further, the same `withSentry` wrapper which enables error collection in your API routes also automatically measures their performance.
1+
`@sentry/nextjs` provides a `BrowserTracing` integration to add automatic instrumentation for monitoring the performance of browser applications, which is enabled by default once you set up tracing in your app.
2+
Further, the SDK will automatically enable error collection and performance monitoring in your API routes and [Next.js Data Fetchers](https://nextjs.org/docs/basic-features/data-fetching/overview).

‎src/platform-includes/performance/connect-services/javascript.mdx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ You'll need to configure your web server [CORS](https://developer.mozilla.org/en
1818

1919
## Pageload
2020

21+
<PlatformSection notSupported={["javascript.nextjs"]}>
22+
2123
For traces that begin in your backend, you can connect the automatically-generated `pageload` transaction on the frontend with the request transaction that serves the page on the backend. Because JavaScript code running in a browser cannot read the response headers of the current page, the trace data must be transmitted in the response itself, specifically in `<meta>` tags in the `<head>` of the HTML sent from your backend.
2224

2325
```html
@@ -35,25 +37,25 @@ For traces that begin in your backend, you can connect the automatically-generat
3537
Remix SDK attaches `sentry-trace` and `baggage` values from your `root` loader. You need to use [`meta`](https://remix.run/docs/en/v1/api/conventions#meta) function to attach the data from your `loader` as `<meta>` tags. The following code snippet shows how to do this:
3638

3739
```typescript {filename: root.tsx}
38-
export const meta: MetaFunction = ({data}) => {
39-
return {
40-
// ...
41-
'sentry-trace': data.sentryTrace,
42-
baggage: data.sentryBaggage,
43-
};
40+
export const meta: MetaFunction = ({ data }) => {
41+
return {
42+
// ...
43+
"sentry-trace": data.sentryTrace,
44+
baggage: data.sentryBaggage,
45+
};
4446
};
4547
```
4648

4749
<Alert level="warning" title="Support">
48-
50+
4951
This feature is available on Sentry Remix SDK version 7.9.0 and above.
5052

5153
</Alert>
5254

5355
</PlatformSection>
5456

55-
5657
The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and the `content` attributes must be generated by your backend Sentry SDK. For `sentry-trace`, use `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For `baggage`, use `serializeBaggage(span.getBaggage())`.
58+
5759
<Note>
5860

5961
The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that's what you may find depending on the SDK and version.
@@ -63,3 +65,13 @@ The `span.toSentryTrace()` was previously called `span.toTraceparent()`, so that
6365
The `span` reference is either the transaction that serves the HTML or any of its child spans. It defines the parent of the `pageload` transaction.
6466

6567
Once the data is included in the `<meta>` tags, our `BrowserTracing` integration will pick them up automatically and link them to the transaction generated on pageload. Note that they will not be linked to automatically-generated `navigation` transactions — that is, those that don't require a full page reload. Each of those will be the result of a different request transaction on the backend and, therefore, should have a unique `trace_id`.
68+
69+
</PlatformSection>
70+
71+
<PlatformSection supported={["javascript.nextjs"]} notSupported={["javascript"]}>
72+
73+
For traces that begin in your backend, the `@sentry/nextjs` SDK will automatically connect pageload navigations in the frontend with the request transaction that serves the page on the backend.
74+
75+
The SDK will return additional props from your configured [Next.js Data Fetchers](https://nextjs.org/docs/basic-features/data-fetching/overview) that the SDK picks up in to browser to connect the pageload transaction with the backend request.
76+
77+
</PlatformSection>

‎src/platform-includes/performance/what-instrumentation-provides/javascript.nextjs.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
The `BrowserTracing` integration creates a new transaction for each page load and navigation event, and creates a child span for every `XMLHttpRequest` or `fetch` request that occurs while those transactions are open. The `withSentry` wrapper creates a transaction for every API request. Learn more about [traces, transactions, and spans](/product/sentry-basics/tracing/distributed-tracing/).
1+
The `BrowserTracing` integration creates a new transaction for each page load and navigation event, and creates a child span for every `XMLHttpRequest` or `fetch` request that occurs while those transactions are open.
2+
Additionally, the SDK creates transactions for all requests to API routes and [Next.js Data Fetchers](https://nextjs.org/docs/basic-features/data-fetching/overview).
3+
Learn more about [traces, transactions, and spans](/product/sentry-basics/tracing/distributed-tracing/).

‎src/platforms/javascript/guides/nextjs/manual-setup.mdx

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -47,29 +47,6 @@ Sentry.init({
4747
});
4848
```
4949

50-
If you want to instrument [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction), which run on serverless, you need to wrap your handler in our `withSentry` wrapper in order to be able to capture crashes:
51-
52-
```javascript {filename:pages/api/*}
53-
import { withSentry } from "@sentry/nextjs";
54-
55-
const handler = async (req, res) => {
56-
res.status(200).json({ name: "John Doe" });
57-
};
58-
59-
export default withSentry(handler);
60-
```
61-
62-
```typescript {filename:pages/api/*}
63-
import type { NextApiRequest, NextApiResponse } from "next"
64-
import { withSentry } from "@sentry/nextjs";
65-
66-
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
67-
res.status(200).json({ name: "John Doe" });
68-
};
69-
70-
export default withSentry(handler);
71-
```
72-
7350
You can include your DSN directly in these two files, or provide it in either of two environment variables, `SENTRY_DSN` or `NEXT_PUBLIC_SENTRY_DSN`.
7451

7552
## Create a Custom `_error` Page

0 commit comments

Comments
 (0)