Sentry-javascript: DevTools failed to load SourceMap

[xon52]

Version

• "@sentry/browser": "^5.15.0",
• "@sentry/integrations": "^5.15.0",

Description

Receiving pages of warnings in Chrome and Firefox of the format:
DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/@sentry/types/esm/status.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

I am using Win10, latest Chrome and Firefox, and Webpack to build my Vue project. All NPM packages are updated.

I appreciate this is likely to be a server/browser issue; but the only Node package referred to in my pages of these warnings is @sentry and @aws (but in this example I removed aws completely and the sentry one still exists).

Screenshots

Environment

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
    Memory: 4.80 GB / 15.94 GB
  Binaries:
    Node: 12.16.2 - D:\Program Files\nodejs\node.EXE    
    npm: 6.14.4 - D:\Program Files\nodejs\npm.CMD       
  Browsers:
    Edge: 44.18362.449.0
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @sentry/browser: ^5.15.0 => 5.15.5 
    @sentry/integrations: ^5.15.0 => 5.15.5 
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.1
    @vue/cli-plugin-eslint: ~4.3.0 => 4.3.1
    @vue/cli-plugin-router: ~4.3.0 => 4.3.1
    @vue/cli-plugin-unit-jest: ~4.3.0 => 4.3.1
    @vue/cli-plugin-vuex: ~4.3.0 => 4.3.1
    @vue/cli-service: ~4.3.0 => 4.3.1
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31
    babel-eslint: ^10.1.0 => 10.1.0
    core-js: ^3.6.5 => 3.6.5
    eslint: ^6.7.2 => 6.8.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    lodash: ^4.17.15 => 4.17.15
    node-sass: ^4.14.0 => 4.14.0
    sass: ^1.26.5 => 1.26.5
    sass-loader: ^8.0.2 => 8.0.2
    vue: ^2.6.11 => 2.6.11
    vue-cli-plugin-vuetify: ~2.0.5 => 2.0.5
    vue-router: ^3.1.6 => 3.1.6
    vue-template-compiler: ^2.6.11 => 2.6.11
    vuetify: ^2.2.26 => 2.2.26
    vuetify-loader: ^1.3.0 => 1.4.3
    vuex: ^3.2.0 => 3.3.0
    webpack-bundle-analyzer: ^3.6.1 => 3.7.0
    x5-gmaps: ^0.3.6 => 0.3.6
    x5-modal: ^0.4.1 => 0.4.1
    x5-notify: ^0.3.7 => 0.3.7
    x5-tools: ^0.2.6 => 0.2.6
  npmGlobalPackages:
    @vue/cli-init: 4.3.1
    @vue/cli-service-global: 4.3.1
    @vue/cli: 4.3.1
    eslint: 6.8.0
    vue: 2.6.11

[xon52]

I've worked around this for now but I'm not 100% sure why it was occurring. Leaving my solution here in case someone else runs into the same thing.

I had turned Sentry into a plugin that could be called with Vue.use():

Broken Method

// Sentry.js
import * as Sentry from '@sentry/browser'
import { Vue as VueIntegration } from '@sentry/integrations'

export default (Vue) => Sentry.init({
  dsn: 'https://my-dsn',
  integrations: [new VueIntegration({ Vue, attachProps: true })]
})

// main.js
import Vue from 'vue'
import sentry from './sentry.js'

if (process.env.NODE_ENV === 'production') Vue.use(sentry)

new Vue({ /* ... */ })

Working Method

// Sentry.js
import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import { Vue as VueIntegration } from '@sentry/integrations'

Sentry.init({
  dsn: 'https://my-dsn',
  integrations: [new VueIntegration({ Vue, attachProps: true })]
})

// main.js
import Vue from 'vue'

if (process.env.NODE_ENV === 'production') require('./sentry.js')

new Vue({ /* ... */ })

Initially I thought source no SourceMaps were being generated in development mode, but I think Vue-CLI does generate a "cheap" SourceMap which may not be in the right format for Sentry.

It also appears that importing the Sentry modules in case I was running in production may be actually including them anyway even if I wasn't using them in development.

EDIT
I have found something else which might be worth looking at too: https://vuejs.org/v2/cookbook/debugging-in-vscode.html
I have enabled this in my vue.config.js file with the understanding it tells webpack to ensure everything built has a sourcemap:

module.exports = {
  productionSourceMap: true, // NOTE: this is default
  configureWebpack: {
    devtool: 'source-map',
  }
}

[darielvicedo]

I start having the same issue when use a third party component, vueCountryRegionSelect. The above solution doesn't work for me.

import Vue from 'vue';
import RegisterComponent from '@/components/register/registerComponent';
import vueCountryRegionSelect from 'vue-country-region-select';

Vue.use(vueCountryRegionSelect);

new Vue({/*...*/}).$mount('#decsComponentRegister');