Skip to content

Commit f6da32f

Browse files
committed
feat(nuxt): Improve Nuxt server-side setup docs
1 parent 08fcafe commit f6da32f

File tree

5 files changed

+81
-71
lines changed

5 files changed

+81
-71
lines changed

docs/platforms/javascript/common/install/esm-without-import.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ When running your application in ESM mode, you will most likely want to <Platfor
2121

2222
<Alert level='warning' title='Restrictions of this installation method'>
2323
This installation method has fundamental restrictions:
24-
- It only supports limited performance instrumentation.
25-
- Only basic `http` instrumentation will work.
24+
- Only basic `http` and `fetch` instrumentation will work.
2625
- No DB or framework-specific instrumentation will be available.
2726

2827
We recommend using this only if the `--import` flag is not an option for you.

docs/platforms/javascript/guides/nuxt/install/cli-import.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ description: "Learn how to use the node --import CLI flag."
77
## Understanding the `--import` CLI Flag
88

99
The [`--import` CLI flag](https://nodejs.org/api/cli.html#--importmodule) in Node is the default way in ESM to preload a module before the application starts.
10-
If you cannot use the SDK's <PlatformLink to="/install/dynamic-import/">default dynamic import behaviour</PlatformLink>, setting
11-
this flag is crucial for ensuring proper server-side initialization, as Sentry needs to be initialized before the rest of the application runs.
10+
Setting this flag is crucial for ensuring proper server-side initialization, as Sentry needs to be initialized before the rest of the application runs.
1211

1312
## Scenarios where `--import` does not work
1413

15-
- You're not able to add Node CLI flags or environment variables that are scoped to the function runtime
14+
- You're not able to add Node CLI flags or environment variables scoped to the function runtime, meaning these variables are not applied in other scopes, such as build time.
15+
- You don't know the path to the Nuxt server folder in the build output
1616
- **Netlify** only allows scoped environment variables on its paid plans at this time
1717
- **Vercel** doesn't currently provide an option for scoping environment variables
1818

1919
If any of those points apply to you, you cannot use the `--import` flag to initialize Sentry on the server-side.
20-
Check out the guide for using <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink> or a <PlatformLink to="/install/dynamic-import/">dynamic import</PlatformLink> instead.
20+
Check out the guide for using <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink> instead.
2121

2222
## Initializing Sentry with `--import`
2323

docs/platforms/javascript/guides/nuxt/install/dynamic-import.mdx

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,17 @@ description: "Learn about how the Nuxt SDK leverages dynamic input() in the buil
66

77
## Understanding the `import()` expression
88

9-
The `import()` expression (also called "dynamic import") allows conditional and flexible module loading in ESM.
10-
For the Sentry Nuxt SDK, it provides an approach to initialize server-side configuration before application startup.
9+
<Alert level='warning'>
10+
This installation method comes with restrictions when using more recent versions of Nuxt/Nitro.
1111

12-
The Sentry Nuxt SDK will be initialized before any other code runs and the Nitro server runtime code will be loaded later because of `import()`ing it.
13-
This early initialization is required to set up the SDK's instrumentation of various libraries correctly.
14-
15-
## Initializing Sentry with Dynamic `import()`
16-
17-
Enable the dynamic `import()` by setting `autoInjectServerSentry`:
18-
19-
```typescript {filename:nuxt.config.ts} {3}
20-
export default defineNuxtConfig({
21-
sentry: {
22-
autoInjectServerSentry: 'experimental_dynamic-import'
23-
},
24-
})
25-
```
12+
We recommend the guide for installing the SDK with the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or a <PlatformLink to="/install/top-level-import/">top-level import</PlatformLink>
13+
</Alert>
2614

27-
After setting this, the Sentry Nuxt SDK adds some build-time configuration to ensure your app is wrapped with `import()`.
28-
With this, Sentry can be initialized before all other modules of the application.
29-
30-
The Nuxt server entry file will look something like this:
31-
32-
```javascript {filename:.output/server/index.mjs}
33-
// Note: The file may have some imports and code, related to debug IDs
34-
Sentry.init({
35-
dsn: "..."
36-
});
15+
The `import()` expression, or dynamic import, enables flexible, conditional module loading in ESM.
16+
For the Sentry Nuxt SDK, it provides an approach to initialize server-side Sentry configuration before application startup.
3717

38-
import('./chunks/nitro/nitro.mjs').then(function (n) { return n.r; });
39-
```
18+
The Sentry Nuxt SDK will be initialized before any other code runs and the Nitro server runtime code will be loaded later because of `import()`ing it.
19+
This early initialization is required to set up the SDK's instrumentation of various libraries correctly.
4020

4121
## Scenarios where `import()` doesn't work
4222

@@ -67,7 +47,34 @@ As a temporary workaround, you can add the following overrides in your applicati
6747
}
6848
```
6949

70-
You can also check out the guide for installing the SDK with a <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or a <PlatformLink to="/install/top-level-import/">top-level import</PlatformLink>.
50+
You can also check out the guide for installing the SDK with the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or a <PlatformLink to="/install/top-level-import/">top-level import</PlatformLink>.
51+
52+
53+
## Initializing Sentry with Dynamic `import()`
54+
55+
Enable the dynamic `import()` by setting `autoInjectServerSentry`:
56+
57+
```typescript {filename:nuxt.config.ts} {3}
58+
export default defineNuxtConfig({
59+
sentry: {
60+
autoInjectServerSentry: 'experimental_dynamic-import'
61+
},
62+
})
63+
```
64+
65+
After setting this, the Sentry Nuxt SDK adds some build-time configuration to ensure your app is wrapped with `import()`.
66+
With this, Sentry can be initialized before all other modules of the application.
67+
68+
The Nuxt server entry file will look something like this:
69+
70+
```javascript {filename:.output/server/index.mjs}
71+
// Note: The file may have some imports and code, related to debug IDs
72+
Sentry.init({
73+
dsn: "..."
74+
});
75+
76+
import('./chunks/nitro/nitro.mjs').then(function (n) { return n.r; });
77+
```
7178

7279
## Re-exporting serverless handler functions
7380

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
---
2-
title: Top-level import
2+
title: Limited Server Tracing
33
sidebar_order: 2
4-
description: "Learn about how the Nuxt SDK adds a top-level import to the build output."
4+
description: "Learn about how the Nuxt SDK can be set up with limited server tracing by adding a top-level import to the build output."
55
---
66

7-
## Understanding Top-level `import`
7+
## Understanding Limited Server Tracing
88

99
Sentry needs to be initialized before the application starts.
1010
If the default way of adding an <PlatformLink to="/install/cli-import">`--import` CLI flag</PlatformLink> flag does not work for you,
11-
set up the SDK for adding a top-level `import`. This will import the Sentry server-side config at the top of the Nuxt server entry file.
11+
set up the SDK for adding a top-level `import`.
12+
13+
The automatically added top-level `import` will import the Sentry server-side config at the top of the Nuxt server entry file.
1214
In this case, Sentry isn’t initialized before the app starts, but is set up as early as possible.
1315

1416
<Alert level='warning' title='Restrictions of this installation method'>
1517
This installation method has fundamental restrictions:
16-
- It only supports limited performance instrumentation.
17-
- Only basic `http` instrumentation will work.
18+
- Only basic `http` and `fetch` instrumentation will work.
1819
- No DB or framework-specific instrumentation will be available.
1920

2021
We recommend using this only if the `--import` flag is not an option for you.
@@ -33,10 +34,4 @@ export default defineNuxtConfig({
3334
```
3435

3536
By default, the SDK will add the Sentry server config to the build output (typically, `.output/server/sentry.server.config.mjs`).
36-
37-
With the top-level `import`, the Nuxt server entry file will look something like this:
38-
39-
```javascript {filename:.output/server/index.mjs}
40-
import './sentry.server.config.mjs';
41-
// Note: The file may have some imports and code, related to debug IDs
42-
```
37+
The SDK then automatically imports this file at the top of the Nitro server entry in the build output.

platform-includes/getting-started-verify/javascript.nuxt.mdx

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,35 @@
1-
On the client-side:
1+
### Server-side
2+
3+
Sentry can only be loaded on the server-side by being explicitly added via `--import`.
4+
Check out the <PlatformLink to="/install/cli-import">`--import` CLI flag</PlatformLink> docs for setup instructions.
5+
6+
To verify that Sentry works on the server-side, add the following snippet on the server-side:
7+
8+
```js {tabTitle:Nitro} {filename:server/sentry-example-api.ts}
9+
import { defineEventHandler } from '#imports';
10+
11+
export default defineEventHandler(event => {
12+
throw new Error("Sentry Example API Route Error");
13+
});
14+
15+
```
16+
17+
<Alert level="warning">
18+
Sentry server-side monitoring **does not work in development mode!**
19+
20+
If you want to test server-side monitoring locally, build your project and run:
21+
```
22+
# Start your app after building your project with `nuxi build`
23+
node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs
24+
```
25+
26+
In case you experience any issues with the server-side setup, check out <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
27+
or read through the different <PlatformLink to="/install">installation methods</PlatformLink>.
28+
</Alert>
29+
30+
### Client-side
31+
32+
Add the following snippet on the client-side:
233

334
```html {tabTitle:Vue} {filename:pages/example-error.vue}
435
<script setup>
@@ -32,26 +63,4 @@ On the client-side:
3263
</template>
3364
```
3465

35-
On the server-side:
36-
37-
```js {tabTitle:Nitro} {filename:server/sentry-example-api.ts}
38-
import { defineEventHandler } from '#imports';
39-
40-
export default defineEventHandler(event => {
41-
throw new Error("Sentry Example API Route Error");
42-
});
43-
44-
```
4566

46-
<Alert level="warning">
47-
Keep in mind, that the server-side monitoring **does not work in development mode!**
48-
49-
If you want to test server-side monitoring locally, build your project and run:
50-
```
51-
# Start your app after building your project with `nuxi build`
52-
node .output/server/index.mjs
53-
```
54-
55-
In case you experience any issues with the server-side setup, check out <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
56-
or read through the different <PlatformLink to="/install">installation methods</PlatformLink>.
57-
</Alert>

0 commit comments

Comments
 (0)