Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 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
14 changes: 7 additions & 7 deletions docs/platforms/javascript/common/troubleshooting/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ Learn more about fixing these caching issues in the <PlatformLink to="/sourcemap
</PlatformSection>

<PlatformSection supported={['javascript.nuxt']}>
<Expandable title="'import-in-the-middle' error during startup">
<Expandable title="Failed to register 'import-in-the-middle' during build time">
After adding `sentry.server.config.ts` and building the project, you might get an error like this:
`Failed to register ESM hook import-in-the-middle/hook.mjs`. You can add an override (npm/pnpm) or a resolution (yarn)
for `@vercel/nft` to fix this. This will add the `hook.mjs` file to your build output. See the [underlying issue in the UnJS Nitro project](https://github.com/unjs/nitro/issues/2703).
Expand All @@ -483,14 +483,14 @@ Learn more about fixing these caching issues in the <PlatformLink to="/sourcemap
```json {tabTitle:pnpm} {filename:package.json}
"pnpm": {
"overrides": {
"@vercel/nft": "^0.27.4"
"@vercel/nft": "^0.27.4"
}
}
}
```

</Expandable>

<Expandable permalink title="pnpm: Resolving 'import-in-the-middle' external package errors">
<Expandable title="pnpm dev: Cannot find package 'import-in-the-middle'">
Copy link
Member

@andreiborza andreiborza Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

q: Is this only an issue for pnpm dev?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, only in dev mode. Just tested it and building and running the build output works with pnpm

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm ok, I wonder if we then should even bother with installing iitm in the wizard flow (getsentry/sentry-wizard#727)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine to install it, people will probably want to run Sentry in the dev mode as well. What about changing the prompt to something like this "To run Sentry in pnpm dev, 'import-in-the-middle' needs to be installed."

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 to devs wanting to run Sentry in dev mode.


Sentry injects `import "import-in-the-middle/hook.mjs"` in your server entry. This import acts as a hint for node bundlers to really include this file.
As pnpm implements a strict dependency isolation, this import might cause problems.
Expand All @@ -517,22 +517,22 @@ Learn more about fixing these caching issues in the <PlatformLink to="/sourcemap

```json {tabTitle:npm} {filename:package.json}
"overrides": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
```

```json {tabTitle:yarn} {filename:package.json}
"resolutions": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
```

```json {tabTitle:pnpm} {filename:package.json}
"pnpm": {
"overrides": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,20 @@ We are working on figuring this out ([see issue here](https://github.com/getsent

```json {tabTitle:npm} {filename:package.json}
"overrides": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
```
```json {tabTitle:yarn} {filename:package.json}
"resolutions": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
```
```json {tabTitle:pnpm} {filename:package.json}
"pnpm": {
"overrides": {
"nitropack": "2.9.7",
"nitropack": "~2.9.7",
"@vercel/nft": "^0.27.4"
}
}
Expand Down
18 changes: 13 additions & 5 deletions docs/platforms/javascript/guides/nuxt/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ Add a `sentry.client.config.ts` file to the root of your project (this is probab
import * as Sentry from '@sentry/nuxt';

Sentry.init({
// If set up, you can use your runtime config here
// dsn: useRuntimeConfig().public.sentry.dsn,
// If set up, you can use the Nuxt runtime config here
// dsn: useRuntimeConfig().public.sentry.dsn, // modify, depending on your custom runtime config
dsn: "___PUBLIC_DSN___",

// We recommend adjusting this value in production, or using tracesSampler
Expand Down Expand Up @@ -162,15 +162,23 @@ export default defineNuxtConfig({
```

To upload source maps, the Sentry Nuxt Module will automatically enable source map generation in your project if it is not already enabled.
However, you need to explicitly enable source map generation on the client-side. To do this, add the following code to your Nuxt configuration:
However, you need to explicitly enable source map generation on the client-side.
To do this, add the following code to your Nuxt configuration:

```javascript {filename:nuxt.config.ts} {2}
export default defineNuxtConfig({
sourcemap: { client: true }
sourcemap: { client: 'hidden' }
});
```

This step is necessary because Nuxt sets default values for source maps ([Nuxt docs](https://nuxt.com/docs/api/nuxt-config#sourcemap)), and the Sentry Nuxt Module keeps these settings when they are explicitly defined.
The option `'hidden'` works like `true`, but suppresses the source map reference comments that would be added to the end of each generated file in the build output.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

m: I'd add a reason for why we want hidden over true, otherwise this info is just repeating someone else's docs.


When opening browser developer tools, browsers attempt to fetch source maps through reference comments at the end of bundled files.
After those source maps are uploaded to Sentry during the build process and the SDK removes these client-side source maps, any reference to source maps would trigger 404 errors in the developer tools.
The `'hidden'` option prevents these reference comments from being generated, stopping browsers from attempting to fetch non-existent map files.
This approach eliminates unnecessary network errors in browser developer tools.

Explicitly enabling client source maps is necessary because Nuxt sets default values for source maps ([Nuxt docs](https://nuxt.com/docs/api/nuxt-config#sourcemap)), and the Sentry Nuxt Module keeps these settings when they are explicitly defined.

## Verify

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
We recommend installing the SDK by running our installation wizard in the root directory of your project:

```bash
npx @sentry/wizard@latest -i nuxt --org ___ORG_SLUG___ --project ___PROJECT_SLUG___
npx @sentry/wizard@latest -i nuxt
```

The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you:
Expand Down