feat(nuxt): Add base boilerplate for nuxt (#12573)

s1gr1d · web-flow · commit 079a46b70a2b · 2024-06-21T14:58:43.000+02:00
Boilerplate which adds a basic wrapper around the vue SDK. Still a lot WIP. closes #12572
diff --git a/dev-packages/e2e-tests/verdaccio-config/config.yaml b/dev-packages/e2e-tests/verdaccio-config/config.yaml
@@ -170,6 +170,12 @@ packages:
     unpublish: $all
     # proxy: npmjs # Don't proxy for E2E tests!
 
+  '@sentry/nuxt':
+    access: $all
+    publish: $all
+    unpublish: $all
+    # proxy: npmjs # Don't proxy for E2E tests!
+
   '@sentry/wasm':
     access: $all
     publish: $all
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "packages/integration-shims",
     "packages/nextjs",
     "packages/node",
+    "packages/nuxt",
     "packages/opentelemetry",
     "packages/profiling-node",
     "packages/react",
diff --git a/packages/nuxt/.eslintrc.js b/packages/nuxt/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['vite.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+    },
+    {
+      files: ['src/vite/**', 'src/server/**'],
+      rules: {
+        '@sentry-internal/sdk/no-optional-chaining': 'off',
+      },
+    },
+  ],
+  extends: ['../../.eslintrc.js'],
+};
diff --git a/packages/nuxt/LICENSE b/packages/nuxt/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2024 Functional Software, Inc. dba Sentry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/nuxt/README.md b/packages/nuxt/README.md
@@ -0,0 +1,85 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Official Sentry SDK for Nuxt (EXPERIMENTAL)
+
+[![npm version](https://img.shields.io/npm/v/@sentry/nuxt.svg)](https://www.npmjs.com/package/@sentry/nuxt)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/nuxt.svg)](https://www.npmjs.com/package/@sentry/nuxt)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/nuxt.svg)](https://www.npmjs.com/package/@sentry/nuxt)
+
+**This SDK is under active development and not yet published!**
+
+## Links
+
+todo: link official SDK docs
+
+- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/)
+
+## Compatibility
+
+The minimum supported version of Nuxt is `3.0.0`.
+
+## General
+
+This package is a wrapper around `@sentry/node` for the server and `@sentry/vue` for the client side, with added
+functionality related to Nuxt.
+
+## Automatic Setup
+
+todo: add wizard instructions
+
+Take a look at the sections below if you want to customize your SDK configuration.
+
+## Manual Setup
+
+If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
+
+### 1. Prerequesits & Installation
+
+1. Install the Sentry Nuxt SDK:
+
+   ```bash
+   # Using npm
+   npm install @sentry/nuxt
+
+   # Using yarn
+   yarn add @sentry/nuxt
+   ```
+
+### 2. Client-side Setup
+
+The Sentry Nuxt SDK is based on [Nuxt Modules](https://nuxt.com/docs/api/kit/modules).
+
+1. Add `@sentry/nuxt` to the modules section of `nuxt.config.ts`:
+
+```javascript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@sentry/nuxt'],
+  runtimeConfig: {
+    public: {
+      sentry: {
+        dsn: env.DSN,
+        // Additional config
+      },
+    },
+  },
+});
+```
+
+### 3. Server-side Setup
+
+todo: add server-side setup
+
+### 4. Vite Setup
+
+todo: add vite setup
+
+---
+
+## Uploading Source Maps
+
+todo: add source maps instructions
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "@sentry/nuxt",
+  "version": "8.10.0",
+  "description": "Official Sentry SDK for Nuxt (EXPERIMENTAL)",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/nuxt",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "build"
+  ],
+  "main": "build/module.cjs",
+  "module": "build/module.mjs",
+  "types": "build/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/types.d.ts",
+      "import": "./build/module.mjs",
+      "require": "./build/module.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "nuxt": "3.x"
+  },
+  "dependencies": {
+    "@sentry/core": "8.10.0",
+    "@sentry/node": "8.10.0",
+    "@sentry/opentelemetry": "8.10.0",
+    "@sentry/types": "8.10.0",
+    "@sentry/utils": "8.10.0",
+    "@sentry/vite-plugin": "2.18.0",
+    "@sentry/vue": "8.10.0",
+    "@nuxt/kit": "^3.12.2"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "0.8.0",
+    "nuxt": "^3.12.2"
+  },
+  "scripts": {
+    "build": "run-p build:transpile",
+    "build:dev": "yarn build",
+    "build:transpile": "nuxt-module-build build --outDir build",
+    "build:watch": "run-p build:transpile:watch build:types:watch",
+    "build:dev:watch": "yarn build:watch",
+    "build:transpile:watch": "nuxt-module-build build --outDir build --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts && npm pack ./build",
+    "circularDepCheck": "madge --circular src/index.client.ts && madge --circular src/index.server.ts && madge --circular src/index.types.ts",
+    "clean": "rimraf build coverage sentry-nuxt-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "yarn test:unit",
+    "test:unit": "vitest run",
+    "test:watch": "vitest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts && yalc publish build --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "nx": {
+    "targets": {
+      "build:transpile": {
+        "dependsOn": [
+          "^build:transpile",
+          "^build:types"
+        ],
+        "outputs": [
+          "{projectRoot}/build"
+        ]
+      }
+    }
+  }
+}
diff --git a/packages/nuxt/src/client/index.ts b/packages/nuxt/src/client/index.ts
@@ -0,0 +1,3 @@
+export * from '@sentry/vue';
+
+export { init } from './sdk';
diff --git a/packages/nuxt/src/client/sdk.ts b/packages/nuxt/src/client/sdk.ts
@@ -0,0 +1,19 @@
+import { applySdkMetadata } from '@sentry/core';
+import type { Client } from '@sentry/types';
+import { init as initVue } from '@sentry/vue';
+import type { SentryVueOptions } from '../common/types';
+
+/**
+ * Initializes the client-side of the Nuxt SDK
+ *
+ * @param options Configuration options for the SDK.
+ */
+export function init(options: SentryVueOptions): Client | undefined {
+  const sentryOptions = {
+    ...options,
+  };
+
+  applySdkMetadata(sentryOptions, 'nuxt', ['nuxt', 'vue']);
+
+  return initVue(sentryOptions);
+}
diff --git a/packages/nuxt/src/common/types.ts b/packages/nuxt/src/common/types.ts
@@ -0,0 +1,3 @@
+import type { init } from '@sentry/vue';
+
+export type SentryVueOptions = Parameters<typeof init>[0] & object;
diff --git a/packages/nuxt/src/index.client.ts b/packages/nuxt/src/index.client.ts
@@ -0,0 +1 @@
+export * from './client';
diff --git a/packages/nuxt/src/index.server.ts b/packages/nuxt/src/index.server.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/nuxt/src/index.types.ts b/packages/nuxt/src/index.types.ts
@@ -0,0 +1 @@
+export {};
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -0,0 +1,23 @@
+import { type Resolver, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+import type { SentryVueOptions } from './common/types';
+
+export type ModuleOptions = SentryVueOptions;
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@sentry/nuxt',
+    configKey: 'sentry',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  setup(_moduleOptions, _nuxt) {
+    const resolver: Resolver = createResolver(import.meta.url);
+
+    if (resolver) {
+      addPlugin(resolver.resolve('runtime/plugins/sentry.client.js'));
+    }
+  },
+});
diff --git a/packages/nuxt/src/runtime/plugins/sentry.client.ts b/packages/nuxt/src/runtime/plugins/sentry.client.ts
@@ -0,0 +1,12 @@
+import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app';
+import { init } from '../../client';
+
+export default defineNuxtPlugin(nuxtApp => {
+  const config = useRuntimeConfig();
+  const sentryConfig = config.public.sentry || {};
+
+  init({
+    ...sentryConfig,
+    app: nuxtApp.vueApp,
+  });
+});
diff --git a/packages/nuxt/test/client/sdk.test.ts b/packages/nuxt/test/client/sdk.test.ts
@@ -0,0 +1,42 @@
+import { SDK_VERSION } from '@sentry/vue';
+import * as SentryVue from '@sentry/vue';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { init } from '../../src/client';
+
+const vueInit = vi.spyOn(SentryVue, 'init');
+
+describe('Nuxt Client SDK', () => {
+  describe('init', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('Adds Nuxt metadata to the SDK options', () => {
+      expect(vueInit).not.toHaveBeenCalled();
+
+      init({
+        dsn: 'https://public@dsn.ingest.sentry.io/1337',
+      });
+
+      const expectedMetadata = {
+        _metadata: {
+          sdk: {
+            name: 'sentry.javascript.nuxt',
+            version: SDK_VERSION,
+            packages: [
+              { name: 'npm:@sentry/nuxt', version: SDK_VERSION },
+              { name: 'npm:@sentry/vue', version: SDK_VERSION },
+            ],
+          },
+        },
+      };
+
+      expect(vueInit).toHaveBeenCalledTimes(1);
+      expect(vueInit).toHaveBeenLastCalledWith(expect.objectContaining(expectedMetadata));
+    });
+
+    it('returns client from init', () => {
+      expect(init({})).not.toBeUndefined();
+    });
+  });
+});
diff --git a/packages/nuxt/test/tsconfig.json b/packages/nuxt/test/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.test.json"
+}
diff --git a/packages/nuxt/test/vitest.setup.ts b/packages/nuxt/test/vitest.setup.ts
@@ -0,0 +1,8 @@
+export function setup() {}
+
+if (!globalThis.fetch) {
+  // @ts-expect-error - Needed for vitest to work with our fetch instrumentation
+  globalThis.Request = class Request {};
+  // @ts-expect-error - Needed for vitest to work with our fetch instrumentation
+  globalThis.Response = class Response {};
+}
diff --git a/packages/nuxt/tsconfig.json b/packages/nuxt/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+
+  "include": ["src/**/*"],
+
+  "compilerOptions": {
+    // package-specific options
+    "module": "esnext"
+  }
+}
diff --git a/packages/nuxt/tsconfig.test.json b/packages/nuxt/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*", "vite.config.ts"],
+
+  "compilerOptions": {
+    // should include all types from `./tsconfig.json` plus types for all test frameworks used
+    "types": ["node", "vitest/globals"]
+  }
+}
diff --git a/packages/nuxt/tsconfig.types.json b/packages/nuxt/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/types"
+  }
+}
diff --git a/packages/nuxt/vite.config.ts b/packages/nuxt/vite.config.ts
diff --git a/packages/vue/src/integration.ts b/packages/vue/src/integration.ts
diff --git a/scripts/node-unit-tests.ts b/scripts/node-unit-tests.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from '@sentry/vue';`
	`2`	`+`
	`3`	`+export { init } from './sdk';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import type { init } from '@sentry/vue';`
	`2`	`+`
	`3`	`+export type SentryVueOptions = Parameters<typeof init>[0] & object;`