Skip to content

Commit fccca98

Browse files
mydeamydea
authored
feat(vue): Check if SDK is initialized before app is mounted (#6227)
* feat(vue): Check if SDK is initialized before app is mounted * feat(vue): Actually `console.warn` when not passing app/Vue
1 parent e0fe46d commit fccca98

File tree

4 files changed

+243
-10
lines changed

4 files changed

+243
-10
lines changed

‎packages/vue/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
"peerDependencies": {
2626
"vue": "2.x || 3.x"
2727
},
28+
"devDependencies": {
29+
"vue": "~3.2.41"
30+
},
2831
"scripts": {
2932
"build": "run-p build:rollup build:types",
3033
"build:bundle": "yarn ts-node ../../scripts/ensure-bundle-deps.ts && yarn rollup --config rollup.bundle.config.js",

‎packages/vue/src/sdk.ts

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { init as browserInit, SDK_VERSION } from '@sentry/browser';
2-
import { arrayify, GLOBAL_OBJ, logger } from '@sentry/utils';
2+
import { arrayify, GLOBAL_OBJ } from '@sentry/utils';
33

44
import { DEFAULT_HOOKS } from './constants';
55
import { attachErrorHandler } from './errorhandler';
@@ -43,12 +43,12 @@ export function init(
4343
browserInit(options);
4444

4545
if (!options.Vue && !options.app) {
46-
__DEBUG_BUILD__ &&
47-
logger.warn(
48-
'Misconfigured SDK. Vue specific errors will not be captured.\n' +
49-
'Update your `Sentry.init` call with an appropriate config option:\n' +
50-
'`app` (Application Instance - Vue 3) or `Vue` (Vue Constructor - Vue 2).',
51-
);
46+
// eslint-disable-next-line no-console
47+
console.warn(
48+
`[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured.
49+
Update your \`Sentry.init\` call with an appropriate config option:
50+
\`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`,
51+
);
5252
return;
5353
}
5454

@@ -61,6 +61,23 @@ export function init(
6161
}
6262

6363
const vueInit = (app: Vue, options: Options): void => {
64+
// Check app is not mounted yet - should be mounted _after_ init()!
65+
// This is _somewhat_ private, but in the case that this doesn't exist we simply ignore it
66+
// See: https://github.com/vuejs/core/blob/eb2a83283caa9de0a45881d860a3cbd9d0bdd279/packages/runtime-core/src/component.ts#L394
67+
const appWithInstance = app as Vue & {
68+
_instance?: {
69+
isMounted?: boolean;
70+
};
71+
};
72+
73+
const isMounted = appWithInstance._instance && appWithInstance._instance.isMounted;
74+
if (isMounted === true) {
75+
// eslint-disable-next-line no-console
76+
console.warn(
77+
'[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',
78+
);
79+
}
80+
6481
attachErrorHandler(app, options);
6582

6683
if ('tracesSampleRate' in options || 'tracesSampler' in options) {

‎packages/vue/test/integration/init.test.ts

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { createApp } from 'vue';
2+
3+
import * as Sentry from './../../src';
4+
5+
describe('Sentry.init', () => {
6+
let _consoleWarn: any;
7+
let warnings: string[] = [];
8+
9+
beforeEach(() => {
10+
warnings = [];
11+
// eslint-disable-next-line no-console
12+
_consoleWarn = console.warn;
13+
// eslint-disable-next-line no-console
14+
console.warn = jest.fn((message: string) => {
15+
warnings.push(message);
16+
});
17+
});
18+
19+
afterEach(() => {
20+
// eslint-disable-next-line no-console
21+
console.warn = _consoleWarn;
22+
});
23+
24+
it('does not warn when correctly setup (Vue 3)', () => {
25+
const el = document.createElement('div');
26+
const app = createApp({
27+
template: '<div>hello</div>',
28+
});
29+
30+
Sentry.init({
31+
app,
32+
defaultIntegrations: false,
33+
});
34+
35+
app.mount(el);
36+
37+
expect(warnings).toEqual([]);
38+
});
39+
40+
it('does not warn when correctly setup (Vue 2)', () => {
41+
const el = document.createElement('div');
42+
const app = createApp({
43+
template: '<div>hello</div>',
44+
});
45+
46+
Sentry.init({
47+
// this is a bit "hacky", but good enough to test what we want
48+
Vue: app,
49+
defaultIntegrations: false,
50+
});
51+
52+
app.mount(el);
53+
54+
expect(warnings).toEqual([]);
55+
});
56+
57+
it('warns when mounting before SDK init', () => {
58+
const el = document.createElement('div');
59+
const app = createApp({
60+
template: '<div>hello</div>',
61+
});
62+
63+
app.mount(el);
64+
65+
Sentry.init({
66+
app,
67+
defaultIntegrations: false,
68+
});
69+
70+
expect(warnings).toEqual([
71+
'[@sentry/vue]: Misconfigured SDK. Vue app is already mounted. Make sure to call `app.mount()` after `Sentry.init()`.',
72+
]);
73+
});
74+
75+
it('warns when not passing app & Vue', () => {
76+
const el = document.createElement('div');
77+
const app = createApp({
78+
template: '<div>hello</div>',
79+
});
80+
81+
Sentry.init({
82+
defaultIntegrations: false,
83+
});
84+
85+
app.mount(el);
86+
87+
expect(warnings).toEqual([
88+
`[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured.
89+
Update your \`Sentry.init\` call with an appropriate config option:
90+
\`app\` (Application Instance - Vue 3) or \`Vue\` (Vue Constructor - Vue 2).`,
91+
]);
92+
});
93+
});

‎yarn.lock

Lines changed: 123 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -843,6 +843,11 @@
843843
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
844844
integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
845845

846+
"@babel/parser@^7.16.4":
847+
version "7.20.3"
848+
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
849+
integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
850+
846851
"@babel/parser@^7.18.10", "@babel/parser@^7.19.6":
847852
version "7.19.6"
848853
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.6.tgz#b923430cb94f58a7eae8facbffa9efd19130e7f8"
@@ -5497,6 +5502,96 @@
54975502
"@typescript-eslint/types" "4.23.0"
54985503
eslint-visitor-keys "^2.0.0"
54995504

5505+
"@vue/[email protected]":
5506+
version "3.2.45"
5507+
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b"
5508+
integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==
5509+
dependencies:
5510+
"@babel/parser" "^7.16.4"
5511+
"@vue/shared" "3.2.45"
5512+
estree-walker "^2.0.2"
5513+
source-map "^0.6.1"
5514+
5515+
"@vue/[email protected]":
5516+
version "3.2.45"
5517+
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
5518+
integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==
5519+
dependencies:
5520+
"@vue/compiler-core" "3.2.45"
5521+
"@vue/shared" "3.2.45"
5522+
5523+
"@vue/[email protected]":
5524+
version "3.2.45"
5525+
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
5526+
integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==
5527+
dependencies:
5528+
"@babel/parser" "^7.16.4"
5529+
"@vue/compiler-core" "3.2.45"
5530+
"@vue/compiler-dom" "3.2.45"
5531+
"@vue/compiler-ssr" "3.2.45"
5532+
"@vue/reactivity-transform" "3.2.45"
5533+
"@vue/shared" "3.2.45"
5534+
estree-walker "^2.0.2"
5535+
magic-string "^0.25.7"
5536+
postcss "^8.1.10"
5537+
source-map "^0.6.1"
5538+
5539+
"@vue/[email protected]":
5540+
version "3.2.45"
5541+
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2"
5542+
integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==
5543+
dependencies:
5544+
"@vue/compiler-dom" "3.2.45"
5545+
"@vue/shared" "3.2.45"
5546+
5547+
"@vue/[email protected]":
5548+
version "3.2.45"
5549+
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d"
5550+
integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==
5551+
dependencies:
5552+
"@babel/parser" "^7.16.4"
5553+
"@vue/compiler-core" "3.2.45"
5554+
"@vue/shared" "3.2.45"
5555+
estree-walker "^2.0.2"
5556+
magic-string "^0.25.7"
5557+
5558+
"@vue/[email protected]":
5559+
version "3.2.45"
5560+
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0"
5561+
integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==
5562+
dependencies:
5563+
"@vue/shared" "3.2.45"
5564+
5565+
"@vue/[email protected]":
5566+
version "3.2.45"
5567+
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f"
5568+
integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==
5569+
dependencies:
5570+
"@vue/reactivity" "3.2.45"
5571+
"@vue/shared" "3.2.45"
5572+
5573+
"@vue/[email protected]":
5574+
version "3.2.45"
5575+
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59"
5576+
integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==
5577+
dependencies:
5578+
"@vue/runtime-core" "3.2.45"
5579+
"@vue/shared" "3.2.45"
5580+
csstype "^2.6.8"
5581+
5582+
"@vue/[email protected]":
5583+
version "3.2.45"
5584+
resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f"
5585+
integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==
5586+
dependencies:
5587+
"@vue/compiler-ssr" "3.2.45"
5588+
"@vue/shared" "3.2.45"
5589+
5590+
"@vue/[email protected]":
5591+
version "3.2.45"
5592+
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
5593+
integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
5594+
55005595
"@web3-storage/multipart-parser@^1.0.0":
55015596
version "1.0.0"
55025597
resolved "https://registry.yarnpkg.com/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz#6b69dc2a32a5b207ba43e556c25cc136a56659c4"
@@ -10074,6 +10169,11 @@ cssstyle@^2.3.0:
1007410169
dependencies:
1007510170
cssom "~0.3.6"
1007610171

10172+
csstype@^2.6.8:
10173+
version "2.6.21"
10174+
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
10175+
integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
10176+
1007710177
csstype@^3.0.2:
1007810178
version "3.0.7"
1007910179
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
@@ -12189,7 +12289,7 @@ estree-walker@^1.0.1:
1218912289
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
1219012290
integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
1219112291

12192-
estree-walker@^2.0.1:
12292+
estree-walker@^2.0.1, estree-walker@^2.0.2:
1219312293
version "2.0.2"
1219412294
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
1219512295
integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -18333,7 +18433,7 @@ nan@^2.12.1:
1833318433
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
1833418434
integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
1833518435

18336-
nanoid@^3.1.16, nanoid@^3.1.20, nanoid@^3.1.30:
18436+
nanoid@^3.1.16, nanoid@^3.1.20, nanoid@^3.1.30, nanoid@^3.3.4:
1833718437
version "3.3.4"
1833818438
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
1833918439
integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
@@ -20544,6 +20644,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.27
2054420644
picocolors "^0.2.1"
2054520645
source-map "^0.6.1"
2054620646

20647+
postcss@^8.1.10:
20648+
version "8.4.19"
20649+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
20650+
integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
20651+
dependencies:
20652+
nanoid "^3.3.4"
20653+
picocolors "^1.0.0"
20654+
source-map-js "^1.0.2"
20655+
2054720656
postcss@^8.1.7, postcss@^8.2.15:
2054820657
version "8.4.4"
2054920658
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.4.tgz#d53d4ec6a75fd62557a66bb41978bf47ff0c2869"
@@ -22927,7 +23036,7 @@ source-list-map@^2.0.0:
2292723036
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
2292823037
integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
2292923038

22930-
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1:
23039+
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
2293123040
version "1.0.2"
2293223041
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
2293323042
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -25235,6 +25344,17 @@ void-elements@^2.0.0:
2523525344
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
2523625345
integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
2523725346

25347+
vue@~3.2.41:
25348+
version "3.2.45"
25349+
resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8"
25350+
integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==
25351+
dependencies:
25352+
"@vue/compiler-dom" "3.2.45"
25353+
"@vue/compiler-sfc" "3.2.45"
25354+
"@vue/runtime-dom" "3.2.45"
25355+
"@vue/server-renderer" "3.2.45"
25356+
"@vue/shared" "3.2.45"
25357+
2523825358
w3c-hr-time@^1.0.2:
2523925359
version "1.0.2"
2524025360
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

0 commit comments

Comments
 (0)