Sentry for Ionic/Vue help

tkclark · October 28, 2021, 5:02pm

Hello there! I am trying to get Sentry.io working in my app. Currently, I’ve done the following:

I installed sentry and the sentry webpack plugin like so:

npm install --save @sentry/browser @sentry/tracing
npm install @sentry/webpack-plugin --save-dev

I put the code into my main.ts file like so:

import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';

Sentry.init({
	dsn: 'https://xxx@xxx.ingest.sentry.io/xxx',
	integrations: [new Integrations.BrowserTracing()],

	// Set tracesSampleRate to 1.0 to capture 100%
	// of transactions for performance monitoring.
	// We recommend adjusting this value in production
	tracesSampleRate: 1.0,
});

I added a .sentryclirc file with the following:

const SentryCliPlugin = require('@sentry/webpack-plugin');

const config = {
	plugins: [
		new SentryCliPlugin({
			include: '.',
			ignoreFile: '.sentrycliignore',
			ignore: ['node_modules', 'webpack.config.js'],
			configFile: 'sentry.properties',
		}),
	],
};

I created a purposeful error in my code like so:

console.log(whatever);

I get the results in Sentry (wahoo!). However, looks like the JS in Sentry looks like so:

webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=script&lang=js

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js in callWithErrorHandling at line 279:22

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js in callWithAsyncErrorHandling at line 288:21

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js in Array.hook.__weh.hook.__weh at line 3024:29

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js in flushPostFlushCbs at line 479:47

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js in flushJobs at line 515:9

So I’m assuming I need to upload the source maps. I’ve tried to find easy instructions on how to do that but so far I’ve come up empty. Any guidance to help me get this app up-and-running with proper error handling? Thanks!

mhartington · October 28, 2021, 6:22pm

So this would be something you configure via the vue cli. Can you confirm that you are generator those? If you are, you then just need to upload them and configure sentry to know how to map those back to the original files.

Here’s an exmple I have for react, but the idea should still be the same

tkclark · October 28, 2021, 7:33pm

I’ll check out your solution. In the mean time, I am getting errors in AppFlow:

[17:38:26]: ▸ > @sentry/cli@1.70.1 install /builds/kaiconcepts/mobileapp/node_modules/@sentry/cli
[17:38:26]: ▸ > node scripts/install.js
[17:38:26]: ▸ info sentry-cli Downloading from https://downloads.sentry-cdn.com/sentry-cli/1.70.1/sentry-cli-Linux-x86_64
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 1%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 2%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 3%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 4%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 5%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 6%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 7%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 8%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 9%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 10%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 11%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 12%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 13%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 14%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 15%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 16%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 17%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 18%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 19%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 20%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 21%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 22%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 23%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 24%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 25%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 26%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 27%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 28%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 29%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 30%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 31%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 32%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 33%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 34%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 35%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 36%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 37%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 38%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 39%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 40%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 41%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 42%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 43%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 44%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 45%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 46%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 47%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 48%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 49%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 50%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 51%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 52%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 53%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 54%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 55%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 56%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 57%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 58%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 59%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 60%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 61%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 62%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 63%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 64%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 65%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 66%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 67%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 68%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 69%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 70%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 71%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 72%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 73%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 74%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 75%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 76%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 77%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 78%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 79%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 80%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 81%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 82%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 83%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 84%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 85%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 86%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 87%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 88%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 89%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 90%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 91%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 92%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 93%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 94%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 95%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 96%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 97%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 98%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 99%
[17:38:26]: ▸ fetching sentry-cli-Linux-x86_64 100%
[17:38:26]: ▸ Error: Command failed: /builds/kaiconcepts/mobileapp/node_modules/@sentry/cli/sentry-cli --version
[17:38:26]: ▸ error: 12:0 expecting "[Some('='), Some(':')]" but found EOF.
[17:38:26]: ▸ thread 'unnamed' panicked at 'Config not bound yet': src/config.rs:85
[17:38:26]: ▸ 0: backtrace::capture::Backtrace::create
[17:38:26]: ▸ npm ERR! code ELIFECYCLE
[17:38:26]: ▸ npm ERR! errno 1
[17:38:26]: ▸ npm ERR! @sentry/cli@1.70.1 install: `node scripts/install.js`
[17:38:26]: ▸ npm ERR! Exit status 1
[17:38:26]: ▸ npm ERR!
[17:38:26]: ▸ npm ERR! Failed at the @sentry/cli@1.70.1 install script.
[17:38:26]: ▸ npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[17:38:27]: ▸ npm ERR! A complete log of this run can be found in:
[17:38:27]: ▸ npm ERR!     /root/.npm/_logs/2021-10-28T17_38_27_023Z-debug.log
[17:38:27]: `npm ci` failed falling back to `npm install`

Any idea what this is about?

mhartington · October 28, 2021, 7:56pm

Hmmmm, no clue! But I’ll check with the team and see if they have any ideas. If you could DM me the app id, we could take a look

tkclark · October 29, 2021, 1:23am

Ok, I was getting:

error: 12:0 expecting "[Some('='), Some(':')]" but found EOF.

When I would run sentry-cli so that was a clue. This was because my .sentryclirc was completely wrong! Once I deleted the file I could run the CLI. It should have been something like this:

[auth]
token=mytoken
project=my-project
org=my-org

One step closer!

tkclark · October 29, 2021, 4:20pm

Ok I was able to get everything working inside Sentry (source maps was a big bonus) EXCEPT I can see my source code on my live site under Chrome Dev Tools > Sources > webpack:// so I’m sure there is something I need to do to prevent that but I’ll bring that up over at Sentry’s forum. I’m sure it’s source map related but at least source maps works inside of Sentry now!

As for everything else, this is what I had to do:

I installed sentry and the sentry webpack plugin like so:

npm install --save @sentry/browser @sentry/tracing
npm install @sentry/webpack-plugin --save-dev

I put the code into my main.ts file like so:

import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';
import packageInfo from '../package.json'; // Get version from Package file

Sentry.init({
	app,
	dsn: 'https://xxx@xxx.ingest.sentry.io/xxx',
	release: `${packageInfo.version}`,
	logErrors: false,
	integrations: [
		new Integrations.BrowserTracing({
			routingInstrumentation: Sentry.vueRouterInstrumentation(router),
			tracingOrigins: ['yourdomainname.com', /^\//],
		}),
	],
	tracesSampleRate: 1.0,
});

I added a .sentryclirc file with the following (I totally got this wrong before):

[defaults]
project=yoursentryproject
org=yoursentryorg

[auth]
token=sentrytoken

Created a vue.config.js file with the following:

/* eslint-disable @typescript-eslint/no-var-requires */

const Package = require('./package.json');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const plugins = [
	new SentryWebpackPlugin({
		include: './dist',
		ignoreFile: '.sentrycliignore',
		ignore: ['node_modules', 'vue.config.js'],
    release: Package.version
	}),
];
module.exports = {
	configureWebpack: {
    devtool: 'source-map',
		plugins,
	},
};

I created a purposeful error in my code like so:

console.log(whatever);

I hope this helps someone else as error logging was something very very important to me but the task to get it working seemed too much. Glad it’s over!

tetsuwanadam · January 24, 2022, 5:12pm

One change I needed to make was to replace @sentry/browser with @sentry/vue in steps 1 & 2. Everything else worked a charm. Thanks for sharing in detail, it was super helpful!

mirko77 · March 11, 2024, 9:20am

Good stuff.

What about errors when the app is offline?