Sentry Javascript(VueJS) Production Build Issues

SDKs
1

Hello there,

We’ve been testing out Sentry javascript integration for usage in our VueJS SPA and have no problems getting errors to automatically get captured in development builds.

The problem is when we release to production, I notice that the SDK isn’t even initialized as there is no Production environment and no issues get logged.

I even hard-coded an exception in a component:
try {
throw new Error(‘Caught’);
} catch (err) {
Sentry.captureException(err);
}

Our initialization code is pretty boring but looks like this:
Sentry.init({
environment: uppercaseEnv,
dsn: process.env.NODE_ENV.VUE_APP_SENTRY_DSN,
integrations: [
new Integrations.Vue(
{
Vue,
attachProps: false,
logErrors: false
})
],
release: process.env.NODE_ENV.VUE_APP_SENTRY_RELEASE_VERSION
});

I installed the following packages and versions:
“@sentry/browser”: “^5.10.2”,
“@sentry/integrations”: “^5.10.2”,
“@sentry/cli”: “^1.49.0”,

We create our production build using vue-cli-service build --mode=deploy --modern

Which results in the vendor code and app code being split into chunks that looks like:

Screen Shot 2019-12-11 at 5.06.25 PM
Screen Shot 2019-12-11 at 5.06.25 PM519×596 11.9 KB

Has anyone seen any issues / had any success with using Sentry with a modern build and app file chunking?

I’m hard pressed to believe that Sentry does not work with Vue modern builds in production since I would believe it was made for this purpose, but have tried just about everything including using Raven to no avail and am running out of ideas.

2

So ended up solving this by doing the following:

  1. Updating the project’s SDK’s to the most recent version.
  2. enabling debug mode in production
  3. testing on a dockerized containerized version of a vue app build

Hope this helps anyone else.

1 Like