Skip to content
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

feat(nuxt): Setup source maps with vite config #13018

Merged
merged 6 commits into from
Jul 24, 2024
Merged
Show file tree
Hide file tree
Changes from all 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
2 changes: 1 addition & 1 deletion packages/astro/src/integration/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ type SourceMapsOptions = {
telemetry?: boolean;

/**
* A glob or an array of globs that specify the build artifacts and source maps that will uploaded to Sentry.
* A glob or an array of globs that specify the build artifacts and source maps that will be uploaded to Sentry.
*
* If this option is not specified, sensible defaults based on your `outDir`, `rootDir` and `adapter`
* config will be used. Use this option to override these defaults, for instance if you have a
Expand Down
1 change: 1 addition & 0 deletions packages/nuxt/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = {
files: ['src/vite/**', 'src/server/**'],
rules: {
'@sentry-internal/sdk/no-optional-chaining': 'off',
'@sentry-internal/sdk/no-nullish-coalescing': 'off',
},
},
],
Expand Down
24 changes: 17 additions & 7 deletions packages/nuxt/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,22 @@ dependency to your `package.json`
}
```

### 5. Vite Setup

todo: add vite setup

---

## Uploading Source Maps

todo: add source maps instructions
To upload source maps, you can use the `sourceMapsUploadOptions` option inside the `sentry` options of your
`nuxt.config.ts`:

```javascript
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sentry/nuxt/module'],
sentry: {
debug: true,
Copy link
Member

Choose a reason for hiding this comment

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

hmm, no strong feelings, but it feels a bit confusing that this only turns on debug mode for the vite plugin, right? It seems easy to think that this also enables debug mode for sentry itself 🤔 would it make sense to name this in a different, more specific way, e.g. viteDebug or debugVitePlugin, something along these lines? Not sure how this works in other SDKs though, if we do the same there it's probably fine.

Copy link
Member

Choose a reason for hiding this comment

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

I would keep a top-level debug option like this. Makes it very easy to ask users to enable debug mode to debug all issues related to build time stuff.

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 was thinking about the same actually before creating this PR. But this debug option is actually quite nice for the build-time debug. The debug flag in init only works during runtime. To make it more explicit, this could be renamed to buildDebug?

Copy link
Member

Choose a reason for hiding this comment

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

I would keep it at debug tbh

Copy link
Member

Choose a reason for hiding this comment

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

Fwiw (no strong opinions but from having dealt with this before): We have this pattern of multiple debug properties in different files in SvelteKit and Astro and so far people haven't complained about it. If we point out well in the JSDoc what kind of logging this specific option enables, I think going simply with debug is fine.
Especially considering, this flag can be used everywhere within the nuxt module (so not just within the vite plugin I assume) I wouldn't give it a too specific name.

sourceMapsUploadOptions: {
org: 'your-org-slug',
project: 'your-project-slug',
authToken: process.env.SENTRY_AUTH_TOKEN,
},
},
});
```
96 changes: 96 additions & 0 deletions packages/nuxt/src/common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,99 @@ import type { init } from '@sentry/vue';

// Omitting 'app' as the Nuxt SDK will add the app instance in the client plugin (users do not have to provide this)
export type SentryNuxtOptions = Omit<Parameters<typeof init>[0] & object, 'app'>;

type SourceMapsOptions = {
/**
* Options for the Sentry Vite plugin to customize the source maps upload process.
*
* These options are always read from the `sentry` module options in the `nuxt.config.(js|ts).
* Do not define them in the `sentry.client.config.(js|ts)` or `sentry.server.config.(js|ts)` files.
*/
sourceMapsUploadOptions?: {
/**
* If this flag is `true`, and an auth token is detected, the Sentry integration will
* automatically generate and upload source maps to Sentry during a production build.
*
* @default true
*/
enabled?: boolean;

/**
* The auth token to use when uploading source maps to Sentry.
*
* Instead of specifying this option, you can also set the `SENTRY_AUTH_TOKEN` environment variable.
*
* To create an auth token, follow this guide:
* @see https://docs.sentry.io/product/accounts/auth-tokens/#organization-auth-tokens
*/
authToken?: string;

/**
* The organization slug of your Sentry organization.
* Instead of specifying this option, you can also set the `SENTRY_ORG` environment variable.
*/
org?: string;

/**
* The project slug of your Sentry project.
* Instead of specifying this option, you can also set the `SENTRY_PROJECT` environment variable.
*/
project?: string;

/**
* If this flag is `true`, the Sentry plugin will collect some telemetry data and send it to Sentry.
* It will not collect any sensitive or user-specific data.
*
* @default true
*/
telemetry?: boolean;

/**
* Options related to sourcemaps
*/
sourcemaps?: {
/**
* A glob or an array of globs that specify the build artifacts and source maps that will be uploaded to Sentry.
*
* If this option is not specified, sensible defaults based on your adapter and nuxt.config.js
* setup will be used. Use this option to override these defaults, for instance if you have a
* customized build setup that diverges from Nuxt's defaults.
*
* The globbing patterns must follow the implementation of the `glob` package.
* @see https://www.npmjs.com/package/glob#glob-primer
*/
assets?: string | Array<string>;

/**
* A glob or an array of globs that specifies which build artifacts should not be uploaded to Sentry.
*
* @default [] - By default no files are ignored. Thus, all files matching the `assets` glob
* or the default value for `assets` are uploaded.
*
* The globbing patterns follow the implementation of the glob package. (https://www.npmjs.com/package/glob)
*/
ignore?: string | Array<string>;

/**
* A glob or an array of globs that specifies the build artifacts that should be deleted after the artifact
* upload to Sentry has been completed.
*
* @default [] - By default no files are deleted.
*
* The globbing patterns follow the implementation of the glob package. (https://www.npmjs.com/package/glob)
*/
filesToDeleteAfterUpload?: string | Array<string>;
};
};
};

/**
* Build options for the Sentry module. These options are used during build-time by the Sentry SDK.
*/
export type SentryNuxtModuleOptions = SourceMapsOptions & {
/**
* Enable debug functionality of the SDK during build-time.
* Enabling this will give you, for example, logs about source maps.
*/
debug?: boolean;
};
11 changes: 8 additions & 3 deletions packages/nuxt/src/module.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import * as fs from 'fs';
import * as path from 'path';
import { addPlugin, addPluginTemplate, addServerPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
import type { SentryNuxtOptions } from './common/types';
import type { SentryNuxtModuleOptions } from './common/types';
import { setupSourceMaps } from './vite/sourceMaps';

export type ModuleOptions = SentryNuxtOptions;
export type ModuleOptions = SentryNuxtModuleOptions;

export default defineNuxtModule<ModuleOptions>({
meta: {
Expand All @@ -14,7 +15,7 @@ export default defineNuxtModule<ModuleOptions>({
},
},
defaults: {},
setup(_moduleOptions, nuxt) {
setup(moduleOptions, nuxt) {
const moduleDirResolver = createResolver(import.meta.url);
const buildDirResolver = createResolver(nuxt.options.buildDir);

Expand Down Expand Up @@ -47,6 +48,10 @@ export default defineNuxtModule<ModuleOptions>({

addServerPlugin(moduleDirResolver.resolve('./runtime/plugins/sentry.server'));
}

if (clientConfigFile || serverConfigFile) {
setupSourceMaps(moduleOptions, nuxt);
}
},
});

Expand Down
52 changes: 52 additions & 0 deletions packages/nuxt/src/vite/sourceMaps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import type { Nuxt } from '@nuxt/schema';
import { sentryVitePlugin } from '@sentry/vite-plugin';
import type { SentryNuxtModuleOptions } from '../common/types';

/**
* Setup source maps for Sentry inside the Nuxt module during build time.
*/
export function setupSourceMaps(moduleOptions: SentryNuxtModuleOptions, nuxt: Nuxt): void {
nuxt.hook('vite:extendConfig', async (viteInlineConfig, _env) => {
const sourceMapsUploadOptions = moduleOptions.sourceMapsUploadOptions || {};

if ((sourceMapsUploadOptions.enabled ?? true) && viteInlineConfig.mode !== 'development') {
const sentryPlugin = sentryVitePlugin({
org: sourceMapsUploadOptions.org ?? process.env.SENTRY_ORG,
Copy link
Member

Choose a reason for hiding this comment

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

l: Do we need to pass in the env variable fallbacks explicitly? the plugin itself should pick them up, right?

project: sourceMapsUploadOptions.project ?? process.env.SENTRY_PROJECT,
authToken: sourceMapsUploadOptions.authToken ?? process.env.SENTRY_AUTH_TOKEN,
telemetry: sourceMapsUploadOptions.telemetry ?? true,
sourcemaps: {
assets: sourceMapsUploadOptions.sourcemaps?.assets ?? undefined,
ignore: sourceMapsUploadOptions.sourcemaps?.ignore ?? undefined,
filesToDeleteAfterUpload: sourceMapsUploadOptions.sourcemaps?.filesToDeleteAfterUpload ?? undefined,
},
_metaOptions: {
telemetry: {
metaFramework: 'nuxt',
},
},
debug: moduleOptions.debug ?? false,
});

viteInlineConfig.plugins = viteInlineConfig.plugins || [];
viteInlineConfig.plugins.push(sentryPlugin);

const sourceMapsPreviouslyEnabled = viteInlineConfig.build?.sourcemap;

if (moduleOptions.debug && !sourceMapsPreviouslyEnabled) {
// eslint-disable-next-line no-console
console.log('[Sentry]: Enabled source maps generation in the Vite build options.');
if (!moduleOptions.sourceMapsUploadOptions?.sourcemaps?.filesToDeleteAfterUpload) {
// eslint-disable-next-line no-console
console.warn(
`[Sentry] We recommend setting the \`sourceMapsUploadOptions.sourcemaps.filesToDeleteAfterUpload\` option to clean up source maps after uploading.
[Sentry] Otherwise, source maps might be deployed to production, depending on your configuration`,
);
}
}

viteInlineConfig.build = viteInlineConfig.build || {};
viteInlineConfig.build.sourcemap = true;
Copy link
Member

Choose a reason for hiding this comment

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

m: If viteInlineConfig.build.sourcemap wasn't true before we set it, I'd recommend to log out a warning that we're changing their build config to enable emitting source maps. It's fine to do that but users are worried that their source maps then get deployed to prod.
I'd recommend we expose the filesToDeleteAfterUpload option from the plugin and hint them in the warning that they should set it if they want to delete source maps afterwards again.

}
});
}
4 changes: 2 additions & 2 deletions packages/sveltekit/src/vite/sourceMaps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ export async function makeCustomSentryVitePlugins(options?: CustomSentryVitePlug

// Modify the config to generate source maps
config: config => {
const sourceMapsPreviouslyEnabled = !config.build?.sourcemap;
if (debug && sourceMapsPreviouslyEnabled) {
const sourceMapsPreviouslyNotEnabled = !config.build?.sourcemap;
Copy link
Member

Choose a reason for hiding this comment

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

thx for fixing! :)

if (debug && sourceMapsPreviouslyNotEnabled) {
// eslint-disable-next-line no-console
console.log('[Source Maps Plugin] Enabeling source map generation');
if (!mergedOptions.sourcemaps?.filesToDeleteAfterUpload) {
Expand Down
37 changes: 16 additions & 21 deletions yarn.lock
Copy link
Member Author

Choose a reason for hiding this comment

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

lock changes are from this PR: #12920

Original file line number Diff line number Diff line change
Expand Up @@ -5973,15 +5973,6 @@
semver "^7.3.5"
tar "^6.1.11"

"@nestjs/common@^10.3.10":
version "10.3.10"
resolved "https://registry.yarnpkg.com/@nestjs/common/-/common-10.3.10.tgz#d8825d55a50a04e33080c9188e6a5b03235d19f2"
integrity sha512-H8k0jZtxk1IdtErGDmxFRy0PfcOAUg41Prrqpx76DQusGGJjsaovs1zjXVD1rZWaVYchfT1uczJ6L4Kio10VNg==
dependencies:
uid "2.0.2"
iterare "1.2.1"
tslib "2.6.3"

"@nestjs/common@^10.3.7":
version "10.3.7"
resolved "https://registry.yarnpkg.com/@nestjs/common/-/common-10.3.7.tgz#38ab5ff92277cf1f26f4749c264524e76962cfff"
Expand All @@ -5991,16 +5982,13 @@
iterare "1.2.1"
tslib "2.6.2"

"@nestjs/core@^10.3.10":
"@nestjs/common@^8.0.0 || ^9.0.0 || ^10.0.0":
version "10.3.10"
resolved "https://registry.yarnpkg.com/@nestjs/core/-/core-10.3.10.tgz#508090c3ca36488a8e24a9e5939c2f37426e48f4"
integrity sha512-ZbQ4jovQyzHtCGCrzK5NdtW1SYO2fHSsgSY1+/9WdruYCUra+JDkWEXgZ4M3Hv480Dl3OXehAmY1wCOojeMyMQ==
resolved "https://registry.yarnpkg.com/@nestjs/common/-/common-10.3.10.tgz#d8825d55a50a04e33080c9188e6a5b03235d19f2"
integrity sha512-H8k0jZtxk1IdtErGDmxFRy0PfcOAUg41Prrqpx76DQusGGJjsaovs1zjXVD1rZWaVYchfT1uczJ6L4Kio10VNg==
dependencies:
uid "2.0.2"
"@nuxtjs/opencollective" "0.3.2"
fast-safe-stringify "2.1.1"
iterare "1.2.1"
path-to-regexp "3.2.0"
tslib "2.6.3"

"@nestjs/core@^10.3.3":
Expand All @@ -6015,6 +6003,18 @@
path-to-regexp "3.2.0"
tslib "2.6.2"

"@nestjs/core@^8.0.0 || ^9.0.0 || ^10.0.0":
version "10.3.10"
resolved "https://registry.yarnpkg.com/@nestjs/core/-/core-10.3.10.tgz#508090c3ca36488a8e24a9e5939c2f37426e48f4"
integrity sha512-ZbQ4jovQyzHtCGCrzK5NdtW1SYO2fHSsgSY1+/9WdruYCUra+JDkWEXgZ4M3Hv480Dl3OXehAmY1wCOojeMyMQ==
dependencies:
uid "2.0.2"
"@nuxtjs/opencollective" "0.3.2"
fast-safe-stringify "2.1.1"
iterare "1.2.1"
path-to-regexp "3.2.0"
tslib "2.6.3"

"@nestjs/platform-express@^10.3.3":
version "10.3.3"
resolved "https://registry.yarnpkg.com/@nestjs/platform-express/-/platform-express-10.3.3.tgz#c1484d30d1e7666c4c8d0d7cde31cfc0b9d166d7"
Expand Down Expand Up @@ -31918,7 +31918,7 @@ tslib@2.6.2, tslib@^2.6.2:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==

tslib@2.6.3:
tslib@2.6.3, tslib@^2.2.0:
version "2.6.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
Expand All @@ -31933,11 +31933,6 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.2.tgz#1b6f07185c881557b0ffa84b111a0106989e8338"
integrity sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==

tslib@^2.2.0:
version "2.6.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==

tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
Expand Down
Loading