How to use @sentry/browser - 10 common examples

constructor() {
    if (process.env.NODE_ENV === 'production') {
      Sentry.init({
        dsn: process.env.SENTRY_DSN,
        integrations: [
          new Sentry.Integrations.Breadcrumbs({
            console: true, // Log calls to `console.log`, `console.debug`, etc
            dom: true, // Log all click and keypress events
            fetch: true, // Log HTTP requests done with the Fetch API
            history: true, // Log calls to `history.pushState` and friends
            sentry: true, // Log whenever we send an event to the server
            xhr: true, // Log HTTP requests done with the XHR API
          }),
        ],
      });
    }
  }

constructor() {
    if (process.env.NODE_ENV === 'production') {
      Sentry.init({
        dsn: process.env.SENTRY_DSN,
        integrations: [
          new Sentry.Integrations.Breadcrumbs({
            console: true, // Log calls to `console.log`, `console.debug`, etc
            dom: true, // Log all click and keypress events
            fetch: true, // Log HTTP requests done with the Fetch API
            history: true, // Log calls to `history.pushState` and friends
            sentry: true, // Log whenever we send an event to the server
            xhr: true, // Log HTTP requests done with the XHR API
          }),
        ],
      });
    }
  }

export function captureException(error: any, extra: any = {}) {
  Sentry.withScope((scope) => {
    each(extra, (data, key) => {
      scope.setExtra(key, extra[key]);
    });

    Sentry.captureException(error);

    console.error(error); // eslint-disable-line no-console
    if (size(extra) > 0) console.error(extra); // eslint-disable-line no-console
  });
}

function init(config) {
  // Only send events for errors which can be attributed to our code. This
  // reduces noise in Sentry caused by errors triggered by eg. script tags added
  // by browser extensions. The downside is that this may cause us to miss errors
  // which are caused by our code but, for any reason, cannot be attributed to
  // it. This logic assumes that all of our script bundles are served from
  // the same origin as the bundle which includes this module.
  //
  // If we can't determine the current script's origin, just disable the
  // whitelist and report all errors.
  const scriptOrigin = currentScriptOrigin();
  const whitelistUrls = scriptOrigin ? [scriptOrigin] : null;

  Sentry.init({
    dsn: config.dsn,
    environment: config.environment,
    release: '__VERSION__', // replaced by versionify
    whitelistUrls,

    // See https://docs.sentry.io/error-reporting/configuration/filtering/?platform=javascript#before-send
    beforeSend: (event, hint) => {
      if (eventsSent >= maxEventsToSendPerSession) {
        // Cap the number of events that any client instance will send, to
        // reduce the impact on our Sentry event quotas.
        //
        // Sentry implements its own server-side rate limiting in addition.
        // See https://docs.sentry.io/accounts/quotas/.
        warnOnce(
          'Client-side Sentry quota reached. No further Sentry events will be sent'
        );

constructor(...args) {
    super(...args);

    if (remote) {
      // TODO: When we disable SSR, this can be a normal import
      const {is, darkMode} = remote.require('electron-util');
      const settings = remote.require('./common/settings');

      if (!is.development && settings.get('allowAnalytics')) {
        Sentry.init({dsn: SENTRY_PUBLIC_DSN});
      }

      this.darkMode = darkMode;
    }
  }

componentDidCatch(error: any, errorInfo: any) {
    console.error({ errorInfo })
    Sentry.configureScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
    });
    Sentry.captureException(error);

    // This is needed to render errors correctly in development / production
    super.componentDidCatch(error, errorInfo);
  }

if (!IS_DEVELOPMENT) {
            Sentry.init({
                dsn: 'https://a3b5f6c50bc04555835f9a83d6e76b23@sentry.io/1448331',
                beforeSend: (event) => {
                    // Filter out aborted XHRs.
                    if (event.exception!.values!.length) {
                        const exc = event.exception!.values![0];
                        if (exc.type === 'AbortedError')
                            return null;
                    }

                    return event;
                },
            });

            Sentry.configureScope((scope) => {
                scope.setExtra('git-revision', GIT_REVISION);
            });
        }
    }

import * as Sentry from '@sentry/browser'
import { SENTRY_CONFIG } from '../config/config'

export const log = {
  message: Sentry.captureMessage,
  event: Sentry.captureEvent,
  exception: Sentry.captureException,
}
export const Level = Sentry.Severity
export const initErrorHandler = () => {
  if (
    location.search.indexOf('noSentry=true') !== -1 ||
    location.hostname === 'localhost'
  ) {
    return
  }
  // please check https://docs.sentry.io/error-reporting/configuration/?platform=javascript for options
  Sentry.init({
    dsn: SENTRY_CONFIG.dsn,
  })
}

}));
    dispatch(historyPop());
  });

  const { enabled, level, sampleRate } = appConfig.sentry;
  // Is not enabled
  if (!enabled) {
    return;
  }

  const severityMap = {
    [Severity.Fatal]: SentrySeverity.Fatal,
    [Severity.Error]: SentrySeverity.Error,
    [Severity.Critical]: SentrySeverity.Critical,
    [Severity.Warning]: SentrySeverity.Warning,
    [Severity.Info]: SentrySeverity.Info,
    [Severity.Debug]: SentrySeverity.Debug,
  };

  let trackedSeverities = Object.getOwnPropertySymbols(severityMap).map(s => severityMap[s]);
  const minSeverityIndex = trackedSeverities.indexOf(level);
  if (minSeverityIndex > -1) {
    trackedSeverities = trackedSeverities.slice(0, minSeverityIndex + 1);
  }

  subscribe(appWillStart$, ({ getState }) => {
    init({
      dsn: 'https://1a444b262ac6405594ab33fb0102b377@sentry.io/1398210',
      environment: env,
      debug: env === 'development',
      release: pckVersion,
      attachStacktrace: true,

Vue.config.productionTip = false

export default new Vue({
  router,
  store,
  i18n,
  render: h => h(Faucet),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

  // todo should store key/project elsewhere (vault?)
  Sentry.init({
    dsn: debugMode ? null : 'https://7e893bd9be0942a0977eb2120b7722d4@sentry.io/1394913"',
    integrations: [new Sentry.Integrations.Vue({ 
      Vue,
      attachProps: true
    })]
  })