Skip to content

move content about error capturing to "Capturing Errors and Events" from "Manual Setup" (Next.js) #12786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
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>
);
}
```