0👍
✅
You need to upload your sourcemaps to Sentry.io on every build.
In your vue.config.js
add this:
const pkg = require('./package.json');
const SentryCliPlugin = require('@sentry/webpack-plugin');
module.exports =
{
productionSourceMap: true,
configureWebpack: (config) =>
{
config.devtool = process.env.NODE_ENV === 'development' ? 'source-map' : 'hidden-source-map';
if (!config.plugins) config.plugins = [];
if (process.env.NODE_ENV === 'production')
{
config.plugins.push(new SentryCliPlugin({
include: './dist',
ignore: ['node_modules', 'webpack.config.js'],
configFile: 'sentry.properties',
release: pkg.version,
}));
}
},
};
And then in your src/main.js
import Vue from 'vue';
import { init as InitSentry } from '@sentry/vue';
import { ExtraErrorData, CaptureConsole } from '@sentry/integrations';
import { version } from '../package.json';
if (process.env.NODE_ENV === 'production')
{
InitSentry({
dsn: process.env.VUE_APP_SENTRY_DSN,
release: version,
sendDefaultPii: true,
Vue,
integrations: [
new ExtraErrorData(),
new CaptureConsole({
levels: ['error']
}),
],
denyUrls:
[
// Chrome extensions
/extensions\//i,
/^safari-extension:\/\//i,
/^safari-web-extension:\/\//i,
/^moz-extension:\/\//i,
/^chrome:\/\//i,
/^chrome-extension:\/\//i,
/moz-extension/i,
/intercomcdn\.com/,
/widget-assets\/js/,
],
ignoreErrors:
[
'@webkit-masked-url',
'debugger eval',
'Not implemented on this platform',
'Failed to fetch',
'Bin profiling',
'DF completed after',
'ChunkLoadError',
'Loading CSS chunk',
],
beforeSend: (event) =>
{
event.user = {
username: '....', // you somehow get the username of the currently logged-in user
email: '.....',
company: '.....',
screen: `${window.screen.width} x ${window.screen.height}`,
};
return event;
},
beforeBreadcrumb: (breadcrumb, hint) =>
{
if (breadcrumb.category === 'xhr' && hint)
{
const data = {
requestBody: hint.xhr.__sentry_xhr__.body,
response: hint.xhr.response,
responseUrl: hint.xhr.responseURL
};
return {
...breadcrumb,
data
};
}
return breadcrumb;
}
});
}
else
{
Vue.config.errorHandler = (err, vm, info) =>
{
// err: error trace
// vm: component in which error occurred
// info: Vue specific error information such as lifecycle hooks, events etc.
console.error(vm.$options._componentTag + ': ' + info, err);
// Use your UI kit to show an error toast/popup showErrorPopup(vm.$options._componentTag + '\n' + info + '\n' + err.message + '\n' + err.stack);
};
window.onerror = function(message, source, lineno, colno, error)
{
// without an alert you may not notice there is an error in the console
alert('Error at ' + lineno + ':' + colno + ' in "' + source + '"\n' + message + '\n' + error);
};
}
Also, do not forget to set the environment variables in .env
or in your CI pipeline:
SENTRY_ORG=xxxxx
SENTRY_PROJECT=yyyyy
SENTRY_AUTH_TOKEN=zzzzz
To create a token – goto https://sentry.io/settings/account/api/auth-tokens/
Source:stackexchange.com