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
53 changes: 3 additions & 50 deletions docs/platforms/javascript/guides/nextjs/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,14 @@ export default withSentryConfig(nextConfig, {
```

### Extend Sentry Webpack Plugin Options

`withSentryConfig` uses a [custom Webpack plugin](https://www.npmjs.com/package/@sentry/webpack-plugin) to manage your sourcemaps and releases under the hood. If `withSentryConfig` does not provide the option you need to modify, you may override the `sentryWebpackPluginOptions` directly via `unstable_sentryWebpackPluginOptions`.

<Alert level="warning">
Note that this option is unstable and its API may include breaking changes in any release.
Note that this option is unstable and its API may include breaking changes in
any release.
</Alert>


## Create Initialization Config Files

Create three files in the root directory of your Next.js application: `sentry.client.config.js`, `sentry.server.config.js` and `sentry.edge.config.js`. In these files, add your initialization code for the client-side SDK and server-side SDK, respectively. We've included some examples below.
Expand Down Expand Up @@ -175,7 +176,6 @@ export async function register() {
}
```


Make sure that the `import` statements point to your newly created `sentry.server.config.(js|ts)` and `sentry.edge.config.(js|ts)` files.

## Report React Component Render Errors
Expand Down Expand Up @@ -239,53 +239,6 @@ export default function GlobalError({ error }) {
}
```

Note that if you create [Next.js error.js files](https://nextjs.org/docs/app/building-your-application/routing/error-handling), these files will take precedence over the `global-error.js` file.
This means, that if you want to report errors that are caught by `error.js` files, you need to manually capture them:

```tsx {filename:error.tsx}
"use client";

import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

export default function ErrorPage({
error,
}: {
error: Error & { digest?: string };
}) {
useEffect(() => {
// Log the error to Sentry
Sentry.captureException(error);
}, [error]);

return (
<div>
<h2>Something went wrong!</h2>
</div>
);
}
```

```jsx {filename:error.jsx}
"use client";

import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

export default function ErrorPage({ error }) {
useEffect(() => {
// Log the error to Sentry
Sentry.captureException(error);
}, [error]);

return (
<div>
<h2>Something went wrong!</h2>
</div>
);
}
```

#### Errors from Nested React Server Components

_Requires `@sentry/nextjs` version `8.28.0` or higher and Next.js 15._
Expand Down
49 changes: 49 additions & 0 deletions platform-includes/capture-error/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,52 @@ try {
Sentry.captureException(err);
}
```

### Capturing Errors in `error.js` Files

Note that if you create [Next.js error.js files](https://nextjs.org/docs/app/building-your-application/routing/error-handling), these files will take precedence over any global error handling.
This means, that if you want to report errors that are caught by `error.js` files, you need to manually capture them:

```tsx {filename:error.tsx}
"use client";

import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

export default function ErrorPage({
error,
}: {
error: Error & { digest?: string };
}) {
useEffect(() => {
// Log the error to Sentry
Sentry.captureException(error);
}, [error]);

return (
<div>
<h2>Something went wrong!</h2>
</div>
);
}
```

```jsx {filename:error.jsx}
"use client";

import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";

export default function ErrorPage({ error }) {
useEffect(() => {
// Log the error to Sentry
Sentry.captureException(error);
}, [error]);

return (
<div>
<h2>Something went wrong!</h2>
</div>
);
}
```