feat: @sentry/vue

.craft.yml

@@ -38,6 +38,11 @@ targets:
     onlyIfPresent: /^sentry-react-.*\.tgz$/
     config:
       canonical: 'npm:@sentry/react'
+  - name: registry
+    type: sdk
+    onlyIfPresent: /^sentry-vue-.*\.tgz$/
+    config:
+      canonical: 'npm:@sentry/vue'
   - name: registry
     type: sdk
     onlyIfPresent: /^sentry-gatsby-.*\.tgz$/

README.md

@@ -41,6 +41,11 @@ package. Please refer to the README and instructions of those SDKs for more deta
   including integrations for React, Angular, Ember, Vue and Backbone
 - [`@sentry/node`](https://github.com/getsentry/sentry-javascript/tree/master/packages/node): SDK for Node, including
   integrations for Express, Koa, Loopback, Sails and Connect
+- [`@sentry/angular`](https://github.com/getsentry/sentry-javascript/tree/master/packages/angular): SDK for Angular
+- [`@sentry/react`](https://github.com/getsentry/sentry-javascript/tree/master/packages/react): SDK for ReactJS
+- [`@sentry/ember`](https://github.com/getsentry/sentry-javascript/tree/master/packages/ember): SDK for Ember
+- [`@sentry/vue`](https://github.com/getsentry/sentry-javascript/tree/master/packages/vue): SDK for Vue
+- [`@sentry/gatsby`](https://github.com/getsentry/sentry-javascript/tree/master/packages/gatsby): SDK for Gatsby
 - [`@sentry/react-native`](https://github.com/getsentry/sentry-react-native): SDK for React Native with support for native crashes
 - [`@sentry/integrations`](https://github.com/getsentry/sentry-javascript/tree/master/packages/integrations): Pluggable
   integrations that can be used to enhance JS SDKs

package.json

@@ -35,7 +35,8 @@
     "packages/tracing",
     "packages/types",
     "packages/typescript",
-    "packages/utils"
+    "packages/utils",
+    "packages/vue"
   ],
   "devDependencies": {
     "@google-cloud/storage": "^2.5.0",

packages/integrations/src/angular.ts

@@ -47,6 +47,8 @@ export class Angular implements Integration {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public constructor(options: { angular?: any } = {}) {
+    logger.warn('You are still using the Angular integration, consider moving to @sentry/angular');
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
     this._angular = options.angular || getGlobalObject<any>().angular;
 

packages/integrations/src/vue.ts

@@ -154,6 +154,7 @@ export class Vue implements Integration {
   public constructor(
     options: Partial<Omit<IntegrationOptions, 'tracingOptions'> & { tracingOptions: Partial<TracingOptions> }>,
   ) {
+    logger.warn('You are still using the Vue integration, consider moving to @sentry/vue');
     this._options = {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       Vue: getGlobalObject<any>().Vue,

packages/vue/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  root: true,
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    jsx: true,
+  },
+  extends: ['@sentry-internal/sdk'],
+  ignorePatterns: ['build/**', 'dist/**', 'esm/**', 'examples/**', 'scripts/**'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.d.ts'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+    {
+      files: ['*.tsx'],
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+      },
+    },
+    {
+      files: ['test/**'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+  rules: {
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+  },
+};

packages/vue/.npmignore

@@ -0,0 +1,5 @@
+*
+!/dist/**/*
+!/build/**/*
+!/esm/**/*
+*.tsbuildinfo

packages/vue/LICENSE

@@ -0,0 +1,29 @@
+MIT License
+
+Copyright (c) 2019, Sentry
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/vue/README.md

@@ -0,0 +1,43 @@
+<p align="center">
+  <a href="https://sentry.io" target="_blank" align="center">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" width="280">
+  </a>
+  <br />
+</p>
+
+# Official Sentry SDK for VueJS
+
+## Links
+
+- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)
+- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
+
+## General
+
+This package is a wrapper around `@sentry/browser`, with added functionality related to VueJS. All methods available in
+`@sentry/browser` can be imported from `@sentry/vue`.
+
+To use this SDK, call `Sentry.init(options)` before you create a new Vue instance.
+
+```javascript
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import * as Sentry from '@sentry/vue'
+
+Vue.config.productionTip = false
+
+Sentry.init({
+  Vue: Vue,
+  dsn: '__PUBLIC_DSN__',
+})
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})
+
+```

packages/vue/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@sentry/vue",
+  "version": "5.27.4",
+  "description": "Offical Sentry SDK for Vue.js",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/react",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=6"
+  },
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/browser": "5.27.4",
+    "@sentry/core": "5.27.4",
+    "@sentry/minimal": "5.27.4",
+    "@sentry/types": "5.27.4",
+    "@sentry/utils": "5.27.4",
+    "tslib": "^1.9.3"
+  },
+  "peerDependencies": {
+    "vue": "2.x"
+  },
+  "devDependencies": {
+    "@sentry-internal/eslint-config-sdk": "5.27.4",
+    "eslint": "7.6.0",
+    "jest": "^24.7.1",
+    "jsdom": "^16.2.2",
+    "npm-run-all": "^4.1.2",
+    "prettier": "1.19.0",
+    "react": "^16.0.0",
+    "rimraf": "^2.6.3",
+    "rollup": "^1.10.1",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-license": "^0.8.1",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-terser": "^4.0.4",
+    "rollup-plugin-typescript2": "^0.21.0",
+    "typescript": "3.7.5",
+    "vue": "^2.6",
+    "vue-router": "^3.0.1"
+  },
+  "scripts": {
+    "build": "run-p build:es5 build:esm build:bundle",
+    "build:bundle": "rollup --config",
+    "build:bundle:watch": "rollup --config --watch",
+    "build:es5": "tsc -p tsconfig.build.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:watch": "run-p build:watch:es5 build:watch:esm",
+    "build:watch:es5": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "build:watch:esm": "tsc -p tsconfig.esm.json -w --preserveWatchOutput",
+    "clean": "rimraf dist coverage build esm",
+    "link:yarn": "yarn link",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
+    "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "fix:eslint": "eslint . --format stylish --fix",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
+    "pack": "npm pack"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "jest": {
+    "collectCoverage": true,
+    "transform": {
+      "^.+\\.ts$": "ts-jest"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "ts"
+    ],
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "**/*.test.ts"
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "./tsconfig.json",
+        "diagnostics": false
+      }
+    }
+  },
+  "sideEffects": [
+    "./src/index.ts"
+  ]
+}

packages/vue/rollup.config.js

@@ -0,0 +1,94 @@
+import { terser } from 'rollup-plugin-terser';
+import typescript from 'rollup-plugin-typescript2';
+import license from 'rollup-plugin-license';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+const commitHash = require('child_process')
+  .execSync('git rev-parse --short HEAD', { encoding: 'utf-8' })
+  .trim();
+
+const terserInstance = terser({
+  mangle: {
+    // captureExceptions and captureMessage are public API methods and they don't need to be listed here
+    // as mangler doesn't touch user-facing thing, however sentryWrapped is not, and it would be mangled into a minified version.
+    // We need those full names to correctly detect our internal frames for stripping.
+    // I listed all of them here just for the clarity sake, as they are all used in the frames manipulation process.
+    reserved: ['captureException', 'captureMessage', 'sentryWrapped'],
+    properties: {
+      regex: /^_[^_]/,
+    },
+  },
+});
+
+const paths = {
+  '@sentry/utils': ['../utils/src'],
+  '@sentry/core': ['../core/src'],
+  '@sentry/hub': ['../hub/src'],
+  '@sentry/types': ['../types/src'],
+  '@sentry/minimal': ['../minimal/src'],
+  '@sentry/browser': ['../browser/src'],
+};
+
+const plugins = [
+  typescript({
+    tsconfig: 'tsconfig.build.json',
+    tsconfigOverride: {
+      compilerOptions: {
+        declaration: false,
+        declarationMap: false,
+        module: 'ES2015',
+        paths,
+      },
+    },
+    include: ['*.ts+(|x)', '**/*.ts+(|x)', '../**/*.ts+(|x)'],
+  }),
+  resolve({
+    mainFields: ['module'],
+  }),
+  commonjs(),
+];
+
+const bundleConfig = {
+  input: 'src/index.ts',
+  output: {
+    format: 'iife',
+    name: 'Sentry',
+    sourcemap: true,
+    strict: false,
+  },
+  context: 'window',
+  plugins: [
+    ...plugins,
+    license({
+      sourcemap: true,
+      banner: `/*! @sentry/vue <%= pkg.version %> (${commitHash}) | https://github.com/getsentry/sentry-javascript */`,
+    }),
+  ],
+};
+
+export default [
+  // ES5 Browser Tracing Bundle
+  {
+    ...bundleConfig,
+    input: 'src/index.bundle.ts',
+    output: {
+      ...bundleConfig.output,
+      file: 'build/bundle.vue.js',
+    },
+    plugins: bundleConfig.plugins,
+  },
+  {
+    ...bundleConfig,
+    input: 'src/index.bundle.ts',
+    output: {
+      ...bundleConfig.output,
+      file: 'build/bundle.vue.min.js',
+    },
+    // Uglify has to be at the end of compilation, BUT before the license banner
+    plugins: bundleConfig.plugins
+      .slice(0, -1)
+      .concat(terserInstance)
+      .concat(bundleConfig.plugins.slice(-1)),
+  },
+];

packages/vue/src/eventprocessor.ts

@@ -0,0 +1,27 @@
+import { addGlobalEventProcessor, SDK_VERSION } from '@sentry/browser';
+
+/**
+ * A global side effect that makes sure Sentry events that user
+ * `@sentry/react` will correctly have Sentry events associated
+ * with it.
+ */
+export function createVueEventProcessor(): void {
+  if (addGlobalEventProcessor) {
+    addGlobalEventProcessor(event => {
+      event.sdk = {
+        ...event.sdk,
+        name: 'sentry.javascript.vue',
+        packages: [
+          ...((event.sdk && event.sdk.packages) || []),
+          {
+            name: 'npm:@sentry/vue',
+            version: SDK_VERSION,
+          },
+        ],
+        version: SDK_VERSION,
+      };
+
+      return event;
+    });
+  }
+}