Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
36 changes: 12 additions & 24 deletions platform-includes/getting-started-config/javascript.nuxt.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
To set up the Sentry SDK, register the Sentry Nuxt module and initialize the SDK for client and server. At build time, the Sentry Nuxt Module looks for the following two files:

- Client-Side: `sentry.client.config.(js|ts)` in the root containing `Sentry.init`
- Server-Side: `instrument.server.mjs` in the `public` directory containing `Sentry.init`
- Client-Side: `sentry.client.config.ts` in the root containing `Sentry.init`
- Server-Side: `sentry.server.config.ts` in the root containing `Sentry.init`

In these files, you can specify the full range of <PlatformLink to="/configuration/options">Sentry SDK options</PlatformLink>.

Expand Down Expand Up @@ -44,40 +44,28 @@ Sentry.init({
import * as Sentry from '@sentry/nuxt';

Sentry.init({
dsn: "___PUBLIC_DSN___"
dsn: "___PUBLIC_DSN___",

// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0
});
```

The Nuxt `useRuntimeConfig()` does not work in the Sentry server config due to technical reasons (the config file has to
be loaded before Nuxt is loaded). To be able to use `process.env` you either have to add `--env-file=.env` to your node command
or use the `dotenv` package:

```bash {tabTitle: env-file}
node --env-file=.env --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs
```bash {tabTitle: node}
node --env-file=.env .output/server/index.mjs
```

or use the `dotenv` package:


```javascript {tabTitle: dotenv} {filename:sentry.server.config.ts} {1,4}
```javascript {tabTitle: Server Config} {filename:sentry.server.config.ts} {1,3}
import dotenv from 'dotenv';
import * as Sentry from '@sentry/nuxt';

dotenv.config();

Sentry.init({
dsn: "___PUBLIC_DSN___"
});
// ... rest of the file
```
Comment on lines 55 to 70
Copy link
Contributor

Choose a reason for hiding this comment

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

No need to act now - just sharing my thoughts: I don't think how users can pass env vars into their app shouldn't be in our documentation but idk.

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 added it because there's no need to do those extra steps when using Nuxt. Usually, you can use useRuntimeConfig(), where your env vars are set and process.env can be used without explicitly installing dotenv.

However, as the server-side config is loaded before any Nuxt code is loaded, the env setup has to be done manually.


2. Add an [--import flag](https://nodejs.org/api/cli.html#--importmodule) to the Node options of your `node` command you run
in production (not `nuxt preview`), so the file loads before any other imports (keep in mind the `.mjs` file ending).
Depending on your setup, you might need to adjust the path to the `sentry.server.config.mjs` file:

```json {filename:package.json} {4}
{
"scripts": {
"preview": "nuxt preview",
"start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs"
}
}
```
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<Alert level="warning">
This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on
This SDK is **in an beta state**. It may experience breaking changes. Please reach out on
[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns.
</Alert>
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,12 @@ export default defineNuxtConfig({
}
});
```

Nuxt sets default values for the source maps ([Nuxt docs](https://nuxt.com/docs/api/nuxt-config#sourcemap)) and the SDK currently keeps the source maps settings if they are explicitly defined.
To enable this source maps setting, add the following code to you Nuxt config:

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