Skip to content

Commit d92a13f

Browse files
committed
feat(nuxt): Add "Deployment Provider Setup"
1 parent f631c13 commit d92a13f

File tree

5 files changed

+138
-0
lines changed

5 files changed

+138
-0
lines changed
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: General
3+
sidebar_order: 1
4+
description: "Learn about the general deployment setup when using Sentry."
5+
supported:
6+
- javascript.nuxt
7+
---
8+
9+
<PlatformSection supported={['javascript.nuxt']}>
10+
Nuxt compiles all your code for the client and server side to ECMAScript modules (ESM) syntax ([learn more about ESM and Nuxt](https://nuxt.com/docs/guide/concepts/esm)).
11+
</PlatformSection>
12+
13+
Adding Sentry on the server-side for a project in ESM syntax is different from adding Sentry to a project in CommonJS (CJS) syntax.
14+
The Sentry initialization code needs to be loaded first when the application starts.
15+
Preloading the Sentry server config file can be done with the Node [`--import`](https://nodejs.org/api/cli.html#--importmodule) CLI flag when starting the application.
16+
17+
Internally, Sentry uses a specific ESM loader hook "[import-in-the-middle/hook.mjs](https://www.npmjs.com/package/import-in-the-middle)" which is
18+
automatically added when you add the Sentry server-side config file with `--import`. This will automatically instrument all modules in your application.
19+
20+
## Setup Sentry Server Config
21+
22+
As described above, there are some prerequisites for adding Sentry to a Nuxt project in ESM syntax:
23+
24+
1. The possibility to add the node `--import` CLI flag.
25+
2. Knowing the correct path to your Sentry server config file within your deployment environment (to add the path to the `--import` CLI flag).
26+
3. The `hook.mjs` file is available under `node_modules/import-in-the-middle/hook.mjs` wherever your server-side code is executed.
27+
4. Running Node.js version 18.19.0 or higher (support for `--import`).
28+
29+
### Adding the `--import` CLI flag
30+
31+
You can either add the flag directly to the `node` command when starting the application:
32+
33+
```bash
34+
node --import ./path/to/sentry-server-config.mjs ./path/to/index.mjs
35+
```
36+
37+
or use the `NODE_OPTIONS` environment variable:
38+
39+
```bash
40+
NODE_OPTIONS="--import ./path/to/sentry-server-config.mjs" node ./path/to/index.mjs
41+
```
42+
43+
If modifying the `node` command is not possible, you can also add the `NODE_OPTIONS` environment variable wherever you can set environment variables within your deployment environment.
44+
Make sure that this variable is only available during server runtime (not during build time).
45+
46+
### `import-in-the-middle/hook.mjs` is available
47+
48+
Usually, the file `node_modules/import-in-the-middle/hook.mjs` is automatically available when installing dependencies.
49+
However, some deployment providers use custom node bundlers that might not include all `node_modules` in order to save storage.
50+
This is often done by tracing the node files and only including the necessary dependencies. Since Sentry has to include the `hook.mjs` file internally with `module.register()` it might not be discovered by some bundlers and therefore not included.
51+
If you get a warning that the `hook.mjs` file is not found, please report this in [the Sentry JS GitHub repo](https://github.com/getsentry/sentry-javascript/issues) or file an issue at your deployment provider.
52+
53+
## Setup other environment variables
54+
55+
In case you are using environment variables in your project to set up Sentry don't forget to also add them inside your deployment environment:
56+
57+
```bash
58+
SENTRY_DSN="___PUBLIC_DSN___"
59+
SENTRY_AUTH_TOKEN="___ORG_AUTH_TOKEN___"
60+
```
61+
62+
63+
64+
## Troubleshooting
65+
66+
As all packages are wrapped under the hood by [import-in-the-middle](https://www.npmjs.com/package/import-in-the-middle), you might run into issues with certain packages. If you run into a problem with a package, you can skip instrumentation for it by configuring `registerEsmLoaderHooks` in your `Sentry.init()` config.
67+
68+
```javascript {tabTitle:ESM} {filename: instrument.mjs}
69+
import * as Sentry from "@sentry/node";
70+
71+
Sentry.init({
72+
dsn: "___PUBLIC_DSN___",
73+
registerEsmLoaderHooks: {
74+
// Provide a list of package names to exclude from instrumentation
75+
exclude: ["package-name"],
76+
},
77+
});
78+
```
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Deployment Provider Setup
3+
sidebar_order: 2
4+
description: "Review our alternate installation methods."
5+
supported:
6+
- javascript.nuxt
7+
---
8+
9+
<PageGrid />
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Netlify
3+
sidebar_order: 10
4+
description: "Learn about running Sentry when deploying to Netlify."
5+
supported:
6+
- javascript.nuxt
7+
---
8+
9+
<Alert level="warning">
10+
Deploying on Netlify is still experimental. Currently, not all Sentry features are supported on the server-side. Only your frontend will be monitored.
11+
</Alert>
12+
13+
<Alert level="info">
14+
Before approaching the steps below, read the general documentation around <PlatformLink to="/deployment-provider-setup/general/">setting up Sentry on a deployment provider</PlatformLink> to get quick general overview of the process.
15+
This page only shows Netlify-specific steps.
16+
</Alert>
17+
18+
## Approach 1: Adding the `--import` flag
19+
20+
<PlatformSection supported={['javascript.nuxt']}>
21+
The server-side of Nuxt is deployed as a Netlify Function. So make sure to scope the environment variable `NODE_OPTIONS` to "Functions".
22+
The path to the function is depending on your setup. When building the preset locally, the file is available at: `.netlify/functions-internal/server/sentry.server.config.mjs`.
23+
24+
<Alert level="warning">
25+
The docs for this are still vague and we will update them as soon as we know more about which exact path to use for the `--import` flag.
26+
</Alert>
27+
28+
<Include name="common-imgs/netlify-env-variable" />
29+
</PlatformSection>
30+
31+
32+
## Approach 2: Enable `experimental_basicServerTracing`
33+
34+
35+
Enabling `experimental_basicServerTracing` can be used when adding the node option `--import` does not work. This however only comes with limited tracing functionality because Sentry server config is not **pre**loaded with `--import`.
36+
37+
<PlatformSection supported={['javascript.nuxt']}>
38+
Enabling this option will automatically import the Sentry server config at the top of the server entry file (server entry: `.netlify/functions-internal/server/server.mjs`).
39+
40+
```javascript {tabTitle: Nuxt Config} {filename: nuxt.config.ts}
41+
export default defineNuxtConfig({
42+
sentry: {
43+
// ... other options
44+
experimental_basicServerTracing: true
45+
},
46+
})
47+
```
48+
</PlatformSection>
49+
50+
75 KB
Loading
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
![Setting up scoped environment variables in Netlify](./img/netlify-env-variable.png)

0 commit comments

Comments
 (0)