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.

Sign up for GitHub

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(sveltekit): Add bundle size optimizations to plugin options #13318

Merged
merged 5 commits into from
Aug 12, 2024
Merged

feat(sveltekit): Add bundle size optimizations to plugin options #13318

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f11ea40
feat(sveltekit): Add bundle size optimizations to plugin options
s1gr1d Aug 12, 2024
4ef7aa4
Merge branch 'develop' into sig/sveltekit-tracing-build-option
s1gr1d Aug 12, 2024
8e55b30
upgrade vite-plugin
s1gr1d Aug 12, 2024
8155527
Merge branch 'develop' into sig/sveltekit-tracing-build-option
s1gr1d Aug 12, 2024
fa419ad
change comment
s1gr1d Aug 12, 2024
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
227 changes: 45 additions & 182 deletions packages/sveltekit/src/vite/sentryVitePlugins.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,178 +1,10 @@
import { dropUndefinedKeys } from '@sentry/utils';
import type { Plugin } from 'vite';

import type { SentryVitePluginOptions } from '@sentry/vite-plugin';
import type { AutoInstrumentSelection } from './autoInstrument';
import { makeAutoInstrumentationPlugin } from './autoInstrument';
import type { SupportedSvelteKitAdapters } from './detectAdapter';
import { detectAdapter } from './detectAdapter';
import { makeCustomSentryVitePlugins } from './sourceMaps';

/**
* Options related to source maps upload to Sentry
*/
type SourceMapsUploadOptions = {
/**
* If this flag is `true`, the Sentry plugins will automatically upload source maps to Sentry.
* @default true`.
*/
autoUploadSourceMaps?: boolean;

/**
* Options for the Sentry Vite plugin to customize and override the release creation and source maps upload process.
* See [Sentry Vite Plugin Options](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/vite-plugin#configuration) for a detailed description.
*/
sourceMapsUploadOptions?: {
/**
* 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 svelte.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 SvelteKit'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>;
};

/**
* Options related to managing the Sentry releases for a build.
*
* Note: Managing releases is optional and not required for uploading source maps.
*/
release?: {
/**
* Unique identifier for the release you want to create.
* This value can also be specified via the SENTRY_RELEASE environment variable.
*
* Defaults to automatically detecting a value for your environment. This includes values for Cordova, Heroku,
* AWS CodeBuild, CircleCI, Xcode, and Gradle, and otherwise uses the git HEAD's commit SHA (the latter requires
* access to git CLI and for the root directory to be a valid repository).
*
* If you didn't provide a value and the plugin can't automatically detect one, no release will be created.
*/
name?: string;

/**
* Whether the plugin should inject release information into the build for the SDK to pick it up when
* sending events.
*
* Defaults to `true`.
*/
inject?: boolean;
};

/**
* Options to further customize the Sentry Vite Plugin (@sentry/vite-plugin) behavior directly.
* Options specified in this object take precedence over the options specified in
* the `sourcemaps` and `release` objects.
*
* @see https://www.npmjs.com/package/@sentry/vite-plugin/v/2.14.2#options which lists all available options.
*
* Warning: Options within this object are subject to change at any time.
* We DO NOT guarantee semantic versioning for these options, meaning breaking
* changes can occur at any time within a major SDK version.
*
* Furthermore, some options are untested with SvelteKit specifically. Use with caution.
*/
unstable_sentryVitePluginOptions?: Partial<SentryVitePluginOptions>;
};
};

type AutoInstrumentOptions = {
/**
* The Sentry plugin will automatically instrument certain parts of your SvelteKit application at build time.
* Set this option to `false` to disable this behavior or what is instrumentated by passing an object.
*
* Auto instrumentation includes:
* - Universal `load` functions in `+page.(js|ts)` files
* - Server-only `load` functions in `+page.server.(js|ts)` files
*
* @default true (meaning, the plugin will instrument all of the above)
*/
autoInstrument?: boolean | AutoInstrumentSelection;
};

export type SentrySvelteKitPluginOptions = {
/**
* If this flag is `true`, the Sentry plugins will log some useful debug information.
* @default false.
*/
debug?: boolean;

/**
* Specify which SvelteKit adapter you're using.
* By default, the SDK will attempt auto-detect the used adapter at build time and apply the
* correct config for source maps upload or auto-instrumentation.
*
* Currently, the SDK supports the following adapters:
* - node (@sveltejs/adapter-node)
* - auto (@sveltejs/adapter-auto) only Vercel
* - vercel (@sveltejs/adapter-auto) only Serverless functions, no edge runtime
*
* Set this option, if the SDK detects the wrong adapter or you want to use an adapter
* that is not in this list. If you specify 'other', you'll most likely need to configure
* source maps upload yourself.
*
* @default {} the SDK attempts to auto-detect the used adapter at build time
*/
adapter?: SupportedSvelteKitAdapters;
} & SourceMapsUploadOptions &
AutoInstrumentOptions;
import type { CustomSentryVitePluginOptions, SentrySvelteKitPluginOptions } from './types';

const DEFAULT_PLUGIN_OPTIONS: SentrySvelteKitPluginOptions = {
autoUploadSourceMaps: true,
Expand Down Expand Up @@ -211,18 +43,53 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
);
}

if (mergedOptions.autoUploadSourceMaps && process.env.NODE_ENV !== 'development') {
const sentryVitePluginsOptions = generateVitePluginOptions(mergedOptions);

if (sentryVitePluginsOptions) {
const sentryVitePlugins = await makeCustomSentryVitePlugins(sentryVitePluginsOptions);

sentryPlugins.push(...sentryVitePlugins);
}

return sentryPlugins;
}

/**
* This function creates the options for the custom Sentry Vite plugin.
* The options are derived from the Sentry SvelteKit plugin options, where the `_unstable` options take precedence.
*
* only exported for testing
*/
export function generateVitePluginOptions(
svelteKitPluginOptions: SentrySvelteKitPluginOptions,
): CustomSentryVitePluginOptions | null {
let sentryVitePluginsOptions: CustomSentryVitePluginOptions | null = null;

// Bundle Size Optimizations
if (svelteKitPluginOptions.bundleSizeOptimizations) {
sentryVitePluginsOptions = {
bundleSizeOptimizations: {
// TODO: with a future version of the vite plugin (probably 2.22.0) this re-mapping is not needed anymore
// ref: https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/582
excludePerformanceMonitoring: svelteKitPluginOptions.bundleSizeOptimizations.excludeTracing || false,
...svelteKitPluginOptions.bundleSizeOptimizations,
},
};
}

// Source Maps
if (svelteKitPluginOptions.autoUploadSourceMaps && process.env.NODE_ENV !== 'development') {
const { unstable_sentryVitePluginOptions, ...sourceMapsUploadOptions } =
mergedOptions.sourceMapsUploadOptions || {};
svelteKitPluginOptions.sourceMapsUploadOptions || {};

const sentryVitePluginsOptions = {
...sourceMapsUploadOptions,
sentryVitePluginsOptions = {
...(sentryVitePluginsOptions ? sentryVitePluginsOptions : {}),

...sourceMapsUploadOptions,
...unstable_sentryVitePluginOptions,

adapter: mergedOptions.adapter,
adapter: svelteKitPluginOptions.adapter,
// override the plugin's debug flag with the one from the top-level options
debug: mergedOptions.debug,
debug: svelteKitPluginOptions.debug,
};

if (sentryVitePluginsOptions.sourcemaps) {
Expand All @@ -238,11 +105,7 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
...unstable_sentryVitePluginOptions?.release,
};
}

const sentryVitePlugins = await makeCustomSentryVitePlugins(sentryVitePluginsOptions);

sentryPlugins.push(...sentryVitePlugins);
}

return sentryPlugins;
return dropUndefinedKeys(sentryVitePluginsOptions);
}
6 changes: 1 addition & 5 deletions packages/sveltekit/src/vite/sourceMaps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import type { Plugin } from 'vite';

import MagicString from 'magic-string';
import { WRAPPED_MODULE_SUFFIX } from './autoInstrument';
import type { SupportedSvelteKitAdapters } from './detectAdapter';
import type { GlobalSentryValues } from './injectGlobalValues';
import { VIRTUAL_GLOBAL_VALUES_FILE, getGlobalValueInjectionCode } from './injectGlobalValues';
import { getAdapterOutputDir, getHooksFileName, loadSvelteConfig } from './svelteConfig';
import type { CustomSentryVitePluginOptions } from './types';

// sorcery has no types, so these are some basic type definitions:
type Chain = {
Expand All @@ -25,10 +25,6 @@ type Sorcery = {
load(filepath: string): Promise<Chain>;
};

type CustomSentryVitePluginOptions = SentryVitePluginOptions & {
adapter: SupportedSvelteKitAdapters;
};

// storing this in the module scope because `makeCustomSentryVitePlugin` is called multiple times
// and we only want to generate a uuid once in case we have to fall back to it.
const releaseName = detectSentryRelease();
Expand Down
Loading
Loading