Skip to content

Commit bf4c23a

Browse files
codydecodyde
committed
Leveraging platform includes to cover capturing errors content between index and manual setup.
1 parent 2a25370 commit bf4c23a

File tree

1 file changed

+3
-142
lines changed

1 file changed

+3
-142
lines changed

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

Lines changed: 3 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -263,154 +263,15 @@ To capture React render errors, you need to add error components for the App Rou
263263

264264
### App Router
265265

266-
Create or update the `global-error.(tsx|jsx)` file to define a [custom Next.js GlobalError component](https://nextjs.org/docs/app/building-your-application/routing/error-handling):
267-
268-
```tsx {filename:global-error.tsx}
269-
"use client";
270-
271-
import * as Sentry from "@sentry/nextjs";
272-
import NextError from "next/error";
273-
import { useEffect } from "react";
274-
275-
export default function GlobalError({
276-
error,
277-
}: {
278-
error: Error & { digest?: string };
279-
}) {
280-
useEffect(() => {
281-
Sentry.captureException(error);
282-
}, [error]);
283-
284-
return (
285-
<html>
286-
<body>
287-
{/* `NextError` is the default Next.js error page component. Its type
288-
definition requires a `statusCode` prop. However, since the App Router
289-
does not expose status codes for errors, we simply pass 0 to render a
290-
generic error message. */}
291-
<NextError statusCode={0} />
292-
</body>
293-
</html>
294-
);
295-
}
296-
```
297-
298-
```jsx {filename:global-error.jsx}
299-
"use client";
300-
301-
import * as Sentry from "@sentry/nextjs";
302-
import NextError from "next/error";
303-
import { useEffect } from "react";
304-
305-
export default function GlobalError({ error }) {
306-
useEffect(() => {
307-
Sentry.captureException(error);
308-
}, [error]);
309-
310-
return (
311-
<html>
312-
<body>
313-
{/* This is the default Next.js error component. */}
314-
<NextError />
315-
</body>
316-
</html>
317-
);
318-
}
319-
```
266+
<PlatformContent includePath="getting-started-capture-errors/app-router-global-error" />
320267

321268
#### Errors from Nested React Server Components
322269

323-
<Alert type="info">
324-
Requires `@sentry/nextjs` version `8.28.0` or higher and Next.js 15.
325-
</Alert>
326-
327-
To capture errors from nested React Server Components, use the [`onRequestError`](https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation#onrequesterror-optional) hook in `instrumentation.(js|ts)` and pass all arguments to the `captureRequestError` function:
328-
329-
```TypeScript {filename:instrumentation.ts}
330-
import * as Sentry from "@sentry/nextjs";
331-
332-
export const onRequestError = Sentry.captureRequestError;
333-
```
334-
335-
```JavaScript {filename:instrumentation.js}
336-
import * as Sentry from "@sentry/nextjs";
337-
338-
export const onRequestError = Sentry.captureRequestError;
339-
```
340-
341-
<Expandable level="info" title="Need additional logic within `onRequestError`?">
342-
You can call `captureRequestError` with all arguments passed to `onRequestError`:
343-
344-
```TypeScript {filename:instrumentation.ts}
345-
import * as Sentry from "@sentry/nextjs";
346-
import type { Instrumentation } from "next";
347-
348-
export const onRequestError: Instrumentation.onRequestError = (...args) => {
349-
Sentry.captureRequestError(...args);
350-
351-
// ... additional logic here
352-
};
353-
```
354-
355-
```JavaScript {filename:instrumentation.js}
356-
import * as Sentry from "@sentry/nextjs";
357-
358-
export const onRequestError = (...args) => {
359-
Sentry.captureRequestError(...args);
360-
361-
// ... additional logic here
362-
};
363-
```
364-
365-
</Expandable>
270+
<PlatformContent includePath="getting-started-capture-errors/nested-server-components" />
366271

367272
### Pages Router
368273

369-
Create or update the `_error.(tsx|jsx)` file to define a [custom Next.js error page](https://nextjs.org/docs/pages/building-your-application/routing/custom-error) for the Pages Router like so:
370-
371-
```tsx {filename:_error.tsx}
372-
import * as Sentry from "@sentry/nextjs";
373-
import type { NextPage } from "next";
374-
import type { ErrorProps } from "next/error";
375-
import Error from "next/error";
376-
377-
const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
378-
return <Error statusCode={props.statusCode} />;
379-
};
380-
381-
CustomErrorComponent.getInitialProps = async (contextData) => {
382-
// In case this is running in a serverless function, await this in order to give Sentry
383-
// time to send the error before the lambda exits
384-
await Sentry.captureUnderscoreErrorException(contextData);
385-
386-
// This will contain the status code of the response
387-
return Error.getInitialProps(contextData);
388-
};
389-
390-
export default CustomErrorComponent;
391-
```
392-
393-
```jsx {filename:_error.jsx}
394-
import * as Sentry from "@sentry/nextjs";
395-
import type { NextPage } from "next";
396-
import type { ErrorProps } from "next/error";
397-
import Error from "next/error";
398-
399-
const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
400-
return <Error statusCode={props.statusCode} />;
401-
};
402-
403-
CustomErrorComponent.getInitialProps = async (contextData) => {
404-
// In case this is running in a serverless function, await this in order to give Sentry
405-
// time to send the error before the lambda exits
406-
await Sentry.captureUnderscoreErrorException(contextData);
407-
408-
// This will contain the status code of the response
409-
return Error.getInitialProps(contextData);
410-
};
411-
412-
export default CustomErrorComponent;
413-
```
274+
<PlatformContent includePath="getting-started-capture-errors/pages-router-error" />
414275

415276
## Step 4: Add Readable Stack Traces With Source Maps (Optional)
416277

0 commit comments

Comments
 (0)