Skip to content

Commit 4334375

Browse files
HazATkamilogorek
HazAT
and
kamilogorek
authored
feat: @sentry/vue (#2953)
* feat: @sentry/vue * feat: Update Vue package * fix: Add safeguard for detection wrong init * fix: Vue Readme * fix: Warning * fix: Example * fix: Tracing check * ref: Bump versions * ref: Add bundle build * feat: Add VueRouterInstrumentation * Apply suggestions from code review Co-authored-by: Kamil Ogórek <[email protected]> * Update packages/vue/src/sdk.ts Co-authored-by: Kamil Ogórek <[email protected]> * ref: CR * ref: CR * ref: CR * fix: Package * fix: VueHelper * ref: Error handling * ref: Comment Co-authored-by: Kamil Ogórek <[email protected]>
1 parent c15967e commit 4334375

22 files changed

+5334
-1
lines changed

‎.craft.yml

+5
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ targets:
3838
onlyIfPresent: /^sentry-react-.*\.tgz$/
3939
config:
4040
canonical: 'npm:@sentry/react'
41+
- name: registry
42+
type: sdk
43+
onlyIfPresent: /^sentry-vue-.*\.tgz$/
44+
config:
45+
canonical: 'npm:@sentry/vue'
4146
- name: registry
4247
type: sdk
4348
onlyIfPresent: /^sentry-gatsby-.*\.tgz$/

‎README.md

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

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
"packages/tracing",
3636
"packages/types",
3737
"packages/typescript",
38-
"packages/utils"
38+
"packages/utils",
39+
"packages/vue"
3940
],
4041
"devDependencies": {
4142
"@google-cloud/storage": "^2.5.0",

‎packages/integrations/src/angular.ts

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export class Angular implements Integration {
4747
*/
4848
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4949
public constructor(options: { angular?: any } = {}) {
50+
logger.log('You are still using the Angular integration, consider moving to @sentry/angular');
51+
5052
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
5153
this._angular = options.angular || getGlobalObject<any>().angular;
5254

‎packages/integrations/src/vue.ts

+1
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ export class Vue implements Integration {
154154
public constructor(
155155
options: Partial<Omit<IntegrationOptions, 'tracingOptions'> & { tracingOptions: Partial<TracingOptions> }>,
156156
) {
157+
logger.log('You are still using the Vue.js integration, consider moving to @sentry/vue');
157158
this._options = {
158159
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
159160
Vue: getGlobalObject<any>().Vue,

‎packages/types/src/options.ts

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface Options {
2828
/**
2929
* If this is set to false, default integrations will not be added, otherwise this will internally be set to the
3030
* recommended default integrations.
31+
* TODO: We should consider changing this to `boolean | Integration[]`
3132
*/
3233
defaultIntegrations?: false | Integration[];
3334

‎packages/vue/.eslintrc.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
es6: true,
5+
browser: true,
6+
},
7+
parserOptions: {
8+
ecmaVersion: 2018,
9+
jsx: true,
10+
},
11+
extends: ['@sentry-internal/sdk'],
12+
ignorePatterns: ['build/**', 'dist/**', 'esm/**', 'examples/**', 'scripts/**'],
13+
overrides: [
14+
{
15+
files: ['*.ts', '*.d.ts'],
16+
parserOptions: {
17+
project: './tsconfig.json',
18+
},
19+
},
20+
{
21+
files: ['test/**'],
22+
rules: {
23+
'@typescript-eslint/no-explicit-any': 'off',
24+
},
25+
},
26+
],
27+
rules: {
28+
'react/prop-types': 'off',
29+
'@typescript-eslint/no-unsafe-member-access': 'off',
30+
},
31+
};

‎packages/vue/.npmignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*
2+
!/dist/**/*
3+
!/build/**/*
4+
!/esm/**/*
5+
*.tsbuildinfo

‎packages/vue/LICENSE

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

‎packages/vue/README.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<p align="center">
2+
<a href="https://sentry.io" target="_blank" align="center">
3+
<img src="https://sentry-brand.storage.googleapis.com/sentry-logo-black.png" width="280">
4+
</a>
5+
<br />
6+
</p>
7+
8+
# Official Sentry SDK for Vue.js
9+
10+
## Links
11+
12+
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)
13+
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
14+
15+
## General
16+
17+
This package is a wrapper around `@sentry/browser`, with added functionality related to Vue.js. All methods available in
18+
`@sentry/browser` can be imported from `@sentry/vue`.
19+
20+
To use this SDK, call `Sentry.init(options)` before you create a new Vue instance.
21+
22+
```javascript
23+
import Vue from 'vue'
24+
import App from './App'
25+
import router from './router'
26+
import * as Sentry from '@sentry/vue'
27+
28+
Sentry.init({
29+
Vue: Vue,
30+
dsn: '__PUBLIC_DSN__',
31+
})
32+
33+
new Vue({
34+
el: '#app',
35+
router,
36+
components: { App },
37+
template: '<App/>'
38+
})
39+
```

‎packages/vue/package.json

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"name": "@sentry/vue",
3+
"version": "5.27.4",
4+
"description": "Offical Sentry SDK for Vue.js",
5+
"repository": "git://github.com/getsentry/sentry-javascript.git",
6+
"homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/react",
7+
"author": "Sentry",
8+
"license": "MIT",
9+
"engines": {
10+
"node": ">=6"
11+
},
12+
"main": "dist/index.js",
13+
"module": "esm/index.js",
14+
"types": "dist/index.d.ts",
15+
"publishConfig": {
16+
"access": "public"
17+
},
18+
"dependencies": {
19+
"@sentry/browser": "5.27.4",
20+
"@sentry/core": "5.27.4",
21+
"@sentry/minimal": "5.27.4",
22+
"@sentry/types": "5.27.4",
23+
"@sentry/utils": "5.27.4",
24+
"tslib": "^1.9.3"
25+
},
26+
"peerDependencies": {
27+
"vue": "2.x"
28+
},
29+
"devDependencies": {
30+
"@sentry-internal/eslint-config-sdk": "5.27.4",
31+
"eslint": "7.6.0",
32+
"jest": "^24.7.1",
33+
"jsdom": "^16.2.2",
34+
"npm-run-all": "^4.1.2",
35+
"prettier": "1.19.0",
36+
"rimraf": "^2.6.3",
37+
"rollup": "^1.10.1",
38+
"rollup-plugin-commonjs": "^9.3.4",
39+
"rollup-plugin-license": "^0.8.1",
40+
"rollup-plugin-node-resolve": "^4.2.3",
41+
"rollup-plugin-terser": "^4.0.4",
42+
"rollup-plugin-typescript2": "^0.21.0",
43+
"typescript": "3.7.5",
44+
"vue": "^2.6",
45+
"vue-router": "^3.0.1"
46+
},
47+
"scripts": {
48+
"build": "run-p build:es5 build:esm build:bundle",
49+
"build:bundle": "rollup --config",
50+
"build:bundle:watch": "rollup --config --watch",
51+
"build:es5": "tsc -p tsconfig.build.json",
52+
"build:esm": "tsc -p tsconfig.esm.json",
53+
"build:watch": "run-p build:watch:es5 build:watch:esm",
54+
"build:watch:es5": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
55+
"build:watch:esm": "tsc -p tsconfig.esm.json -w --preserveWatchOutput",
56+
"clean": "rimraf dist coverage build esm",
57+
"link:yarn": "yarn link",
58+
"lint": "run-s lint:prettier lint:eslint",
59+
"lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
60+
"lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
61+
"fix": "run-s fix:eslint fix:prettier",
62+
"fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
63+
"fix:eslint": "eslint . --format stylish --fix",
64+
"test": "jest --passWithNoTests",
65+
"test:watch": "jest --watch",
66+
"pack": "npm pack"
67+
},
68+
"volta": {
69+
"extends": "../../package.json"
70+
},
71+
"jest": {
72+
"collectCoverage": true,
73+
"transform": {
74+
"^.+\\.ts$": "ts-jest"
75+
},
76+
"moduleFileExtensions": [
77+
"js",
78+
"ts"
79+
],
80+
"testEnvironment": "jsdom",
81+
"testMatch": [
82+
"**/*.test.ts"
83+
],
84+
"globals": {
85+
"ts-jest": {
86+
"tsConfig": "./tsconfig.json",
87+
"diagnostics": false
88+
}
89+
}
90+
},
91+
"sideEffects": [
92+
"./src/index.ts"
93+
]
94+
}

‎packages/vue/rollup.config.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { terser } from 'rollup-plugin-terser';
2+
import typescript from 'rollup-plugin-typescript2';
3+
import license from 'rollup-plugin-license';
4+
import resolve from 'rollup-plugin-node-resolve';
5+
import commonjs from 'rollup-plugin-commonjs';
6+
7+
const commitHash = require('child_process')
8+
.execSync('git rev-parse --short HEAD', { encoding: 'utf-8' })
9+
.trim();
10+
11+
const terserInstance = terser({
12+
mangle: {
13+
// captureExceptions and captureMessage are public API methods and they don't need to be listed here
14+
// as mangler doesn't touch user-facing thing, however sentryWrapped is not, and it would be mangled into a minified version.
15+
// We need those full names to correctly detect our internal frames for stripping.
16+
// I listed all of them here just for the clarity sake, as they are all used in the frames manipulation process.
17+
reserved: ['captureException', 'captureMessage', 'sentryWrapped'],
18+
properties: {
19+
regex: /^_[^_]/,
20+
},
21+
},
22+
});
23+
24+
const paths = {
25+
'@sentry/utils': ['../utils/src'],
26+
'@sentry/core': ['../core/src'],
27+
'@sentry/hub': ['../hub/src'],
28+
'@sentry/types': ['../types/src'],
29+
'@sentry/minimal': ['../minimal/src'],
30+
'@sentry/browser': ['../browser/src'],
31+
};
32+
33+
const plugins = [
34+
typescript({
35+
tsconfig: 'tsconfig.build.json',
36+
tsconfigOverride: {
37+
compilerOptions: {
38+
declaration: false,
39+
declarationMap: false,
40+
module: 'ES2015',
41+
paths,
42+
},
43+
},
44+
include: ['*.ts+(|x)', '**/*.ts+(|x)', '../**/*.ts+(|x)'],
45+
}),
46+
resolve({
47+
mainFields: ['module'],
48+
}),
49+
commonjs(),
50+
];
51+
52+
const bundleConfig = {
53+
input: 'src/index.ts',
54+
output: {
55+
format: 'iife',
56+
name: 'Sentry',
57+
sourcemap: true,
58+
strict: false,
59+
},
60+
context: 'window',
61+
plugins: [
62+
...plugins,
63+
license({
64+
sourcemap: true,
65+
banner: `/*! @sentry/vue <%= pkg.version %> (${commitHash}) | https://github.com/getsentry/sentry-javascript */`,
66+
}),
67+
],
68+
};
69+
70+
export default [
71+
// ES5 Browser Tracing Bundle
72+
{
73+
...bundleConfig,
74+
input: 'src/index.bundle.ts',
75+
output: {
76+
...bundleConfig.output,
77+
file: 'build/bundle.vue.js',
78+
},
79+
plugins: bundleConfig.plugins,
80+
},
81+
{
82+
...bundleConfig,
83+
input: 'src/index.bundle.ts',
84+
output: {
85+
...bundleConfig.output,
86+
file: 'build/bundle.vue.min.js',
87+
},
88+
// Uglify has to be at the end of compilation, BUT before the license banner
89+
plugins: bundleConfig.plugins
90+
.slice(0, -1)
91+
.concat(terserInstance)
92+
.concat(bundleConfig.plugins.slice(-1)),
93+
},
94+
];

‎packages/vue/src/eventprocessor.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { addGlobalEventProcessor, SDK_VERSION } from '@sentry/browser';
2+
3+
/**
4+
* A global side effect that makes sure Sentry events that user
5+
* `@sentry/react` will correctly have Sentry events associated
6+
* with it.
7+
*/
8+
export function createVueEventProcessor(): void {
9+
addGlobalEventProcessor(event => {
10+
event.sdk = {
11+
...event.sdk,
12+
name: 'sentry.javascript.vue',
13+
packages: [
14+
...((event.sdk && event.sdk.packages) || []),
15+
{
16+
name: 'npm:@sentry/vue',
17+
version: SDK_VERSION,
18+
},
19+
],
20+
version: SDK_VERSION,
21+
};
22+
23+
return event;
24+
});
25+
}

0 commit comments

Comments
 (0)