consistent options serialization & filter out Vue integration options

Author: rchl

lib/plugin.client.js

@@ -22,11 +22,13 @@ export default async function (ctx, inject) {
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
   const config = {
     Vue,
-    <%= Object.entries(options.config).map(([key, option]) =>
-      typeof option === 'function'
-        ? `${key}:${serializeFunction(option)}`
-        : `${key}:${serialize(option)}`
-    ).join(',\n    ') %>,
+    <%= Object
+      .entries(options.config)
+      .map(([key, option]) => {
+        const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+        return `${key}:${value}`
+      })
+      .join(',\n    ') %>,
   }
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
@@ -35,15 +37,20 @@ export default async function (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, integration]) => {
-      const integrationOptions = Object.entries(integration).map(([key, option]) =>
-        typeof option === 'function'
-          ? `${key}:${serializeFunction(option)}`
-          : `${key}:${serialize(option)}`
-      )
+    <%= Object
+      .entries(options.integrations)
+      .filter(([name]) => name !== 'Vue')
+      .map(([name, integration]) => {
+        const integrationOptions = Object
+          .entries(integration)
+          .map(([key, option]) => {
+            const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+            return `${key}:${value}`
+          })
 
-      return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
-    }).join(',\n    ')%>,
+        return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
+      })
+      .join(',\n    ') %>,
   ]
   <% if (options.tracing) { %>
   // eslint-disable-next-line prefer-regex-literals

lib/plugin.lazy.js

@@ -1,4 +1,4 @@
-import VueLib from 'vue'
+import Vue from 'vue'
 
 <% if (options.lazy.injectMock) { %>
 /* eslint-enable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
@@ -20,16 +20,16 @@ const delayUnhandledRejection = function (event) {
   delayedUnhandledRejections.push('reason' in event ? event.reason : 'detail' in event && 'reason' in event.detail ? event.detail.reason : event)
 }
 
-const vueErrorHandler = VueLib.config.errorHandler
+const vueErrorHandler = Vue.config.errorHandler
 
-VueLib.config.errorHandler = (error, vm, info) => {
+Vue.config.errorHandler = (error, vm, info) => {
   if (!loadCompleted) {
     if (vm) {
       vm.$sentry.captureException(error)
     }
 
-    if (VueLib.util) {
-      VueLib.util.warn(`Error in ${info}: "${error.toString()}"`, vm)
+    if (Vue.util) {
+      Vue.util.warn(`Error in ${info}: "${error.toString()}"`, vm)
     }
     console.error(error)
   }
@@ -119,10 +119,24 @@ async function loadSentry (ctx, inject) {
     integrations = options.BROWSER_INTEGRATIONS.filter(key => key in options.integrations)
     if (integrations.length) {%>  const { <%= integrations.join(', ') %> } = Sentry.Integrations
 <%}
+
+  const serializedConfig = Object
+    .entries({
+      ...options.config,
+      ...options.integrations.Vue,
+      ...(options.tracing ? options.tracing.vueOptions.tracingOptions : {}),
+    })
+    .map(([key, option]) => {
+      const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+      return`${key}: ${value}`
+    })
+    .join(',\n    ')
   %>
   /* eslint-disable object-curly-spacing, quote-props, quotes, key-spacing, comma-spacing */
-  const config = <%= serialize(options.config) %>
-  config.Vue = VueLib
+  const config = {
+    Vue,
+    <%= serializedConfig %>
+  }
 
   const runtimeConfigKey = <%= serialize(options.runtimeConfigKey) %>
   if (ctx.$config && runtimeConfigKey && ctx.$config[runtimeConfigKey]) {
@@ -131,16 +145,22 @@ async function loadSentry (ctx, inject) {
   }
 
   config.integrations = [
-    <%= Object.entries(options.integrations).map(([name, integration]) => {
-      const integrationOptions = Object.entries(integration).map(([key, option]) =>
-        typeof option === 'function'
-          ? `${key}:${serializeFunction(option)}`
-          : `${key}:${serialize(option)}`
-      )
-
-      return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
-    }).join(',\n    ')%>,
+    <%= Object
+      .entries(options.integrations)
+      .filter(([name]) => name !== 'Vue')
+      .map(([name, integration]) => {
+        const integrationOptions = Object
+          .entries(integration)
+          .map(([key, option]) => {
+            const value = typeof option === 'function' ? serializeFunction(option) : serialize(option)
+            return `${key}:${value}`
+          })
+
+        return `new ${name}(${integrationOptions.length ? '{' + integrationOptions.join(',') + '}' : ''})`
+      }).join(',\n    ')
+    %>,
   ]
+
   <%if (options.customClientIntegrations) {%>
   const customIntegrations = (await import(/* <%= magicComments.join(', ') %> */ '<%= options.customClientIntegrations %>').then(m => m.default || m))(ctx)
   if (Array.isArray(customIntegrations)) {