-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
feat(nuxt): Use --import as the default installation method #12070
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
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -1,24 +1,36 @@ | ||||||||||||||||||||||
--- | ||||||||||||||||||||||
title: Dynamic Import (default) | ||||||||||||||||||||||
sidebar_order: 1 | ||||||||||||||||||||||
title: Dynamic Import (experimental) | ||||||||||||||||||||||
sidebar_order: 3 | ||||||||||||||||||||||
description: "Learn about how the Nuxt SDK leverages dynamic input() in the build output." | ||||||||||||||||||||||
--- | ||||||||||||||||||||||
|
||||||||||||||||||||||
## Understanding the `import()` expression | ||||||||||||||||||||||
|
||||||||||||||||||||||
The `import()` expression (also called "dynamic import") allows conditional and flexible module loading in ESM. | ||||||||||||||||||||||
For the Sentry Nuxt SDK, it provides an approach to initialize server-side configuration before application startup. | ||||||||||||||||||||||
|
||||||||||||||||||||||
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. | ||||||||||||||||||||||
This early initialization is required to set up the SDK's instrumentation of various libraries correctly. | ||||||||||||||||||||||
Comment on lines
8
to
13
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know the text might be a bit complicated, but I think the suggestion is missing some crucial parts. It makes the impression that Nitro is initialized early anyways. It's important to point out that the SDK adds this dynamic import to load the server-side code after Sentry. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1 to the suggestion missing info. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok, that makes sense. I think in that case, it's fine to keep this as is :) |
||||||||||||||||||||||
|
||||||||||||||||||||||
## Initializing Sentry with Dynamic `import()` | ||||||||||||||||||||||
|
||||||||||||||||||||||
By default, the Sentry Nuxt SDK includes a Rollup plugin which wraps the server entry file with a dynamic `import()`. | ||||||||||||||||||||||
Enable the dynamic `import()` by setting `autoInjectServerSentry`: | ||||||||||||||||||||||
|
||||||||||||||||||||||
```typescript {filename:nuxt.config.ts} {3} | ||||||||||||||||||||||
export default defineNuxtConfig({ | ||||||||||||||||||||||
sentry: { | ||||||||||||||||||||||
autoInjectServerSentry: 'experimental_dynamic-import' | ||||||||||||||||||||||
}, | ||||||||||||||||||||||
}) | ||||||||||||||||||||||
``` | ||||||||||||||||||||||
|
||||||||||||||||||||||
After setting this, the Sentry Nuxt SDK adds a Rollup plugin which wraps the server entry file with a dynamic `import()`. | ||||||||||||||||||||||
|
||||||||||||||||||||||
With this, Sentry can be initialized before all other modules of the application. | ||||||||||||||||||||||
|
||||||||||||||||||||||
The server entry file will look something like this: | ||||||||||||||||||||||
|
||||||||||||||||||||||
```javascript {filename:.output/server/index.mjs} | ||||||||||||||||||||||
// Note: file may have some imports and code related to debug IDs | ||||||||||||||||||||||
// Note: The file may have some imports and code related to debug IDs | ||||||||||||||||||||||
s1gr1d marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||||||||||
Sentry.init({ | ||||||||||||||||||||||
dsn: "..." | ||||||||||||||||||||||
}); | ||||||||||||||||||||||
|
@@ -28,8 +40,11 @@ import('./chunks/nitro/nitro.mjs').then(function (n) { return n.r; }); | |||||||||||||||||||||
|
||||||||||||||||||||||
## Scenarios where `import()` doesn't work | ||||||||||||||||||||||
|
||||||||||||||||||||||
We are currently investigating an issue where the server-side is not correctly initialized with a recent update of Nitro (the server-side toolkit in Nuxt). | ||||||||||||||||||||||
We are working on figuring this out ([see issue here](https://github.com/getsentry/sentry-javascript/issues/14514)). As a temporary workaround, you can add the following overrides to your application: | ||||||||||||||||||||||
Depending on your setup and which version of Nitro is used, the server-side is sometimes not correctly initialized. | ||||||||||||||||||||||
The build output **must not** include a regular `import` of the Nitro runtime (e.g. `import './chunks/nitro/nitro.mjs'`). | ||||||||||||||||||||||
andreiborza marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||||||
See the ([GitHub issue here](https://github.com/getsentry/sentry-javascript/issues/14514)) for more information. | ||||||||||||||||||||||
|
||||||||||||||||||||||
As a temporary workaround, you can add the following overrides to your application: | ||||||||||||||||||||||
s1gr1d marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||||||||||
|
||||||||||||||||||||||
```json {tabTitle:npm} {filename:package.json} | ||||||||||||||||||||||
"overrides": { | ||||||||||||||||||||||
|
@@ -52,15 +67,15 @@ We are working on figuring this out ([see issue here](https://github.com/getsent | |||||||||||||||||||||
} | ||||||||||||||||||||||
``` | ||||||||||||||||||||||
|
||||||||||||||||||||||
You can also check out the guide for using the <PlatformLink to="/install/cli-import//">CLI flag `--import`</PlatformLink> as this might be a better choice for you. | ||||||||||||||||||||||
You can also check out the guide for using the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink> as this might be a better choice for you. | ||||||||||||||||||||||
|
You can also check out the guide for using the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink> as this might be a better choice for you. | |
You can also check out the guide for using the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink>. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can also check out the guide for using the <PlatformLink to="/install/cli-import">CLI flag `--import`</PlatformLink> or <PlatformLink to="/install/top-level-import/">a top-level import</PlatformLink> as this might be a better choice for you. | |
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>. |
What do you think of this?
s1gr1d marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,39 @@ | ||||||||||
--- | ||||||||||
title: Top-level import | ||||||||||
sidebar_order: 2 | ||||||||||
description: "Learn about how the Nuxt SDK adds a top-level import to the build output." | ||||||||||
--- | ||||||||||
|
||||||||||
## Understanding top-level `import` | ||||||||||
|
||||||||||
Sentry needs to be initialized before the application starts. | ||||||||||
If the default way of adding an <PlatformLink to="/install/cli-import">`--import` CLI flag</PlatformLink> flag does not work for you, | ||||||||||
set up the SDK for adding a top-level `import`. This will import the Sentry server-side config at the top of the server entry file. | ||||||||||
s1gr1d marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
Sentry needs to be initialized before the application starts. | |
If the default way of adding an <PlatformLink to="/install/cli-import">`--import` CLI flag</PlatformLink> flag does not work for you, | |
set up the SDK for adding a top-level `import`. This will import the Sentry server-side config at the top of the server entry file. | |
Sentry needs to be initialized before the application starts. If adding the <PlatformLink to="/install/cli-import">`--import` CLI flag</PlatformLink> doesn’t work for you, add a top-level `import` in the server entry file to load Sentry’s server-side config. |
Uh oh!
There was an error while loading. Please reload this page.