question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue integration generates a ton of errors about a tracing feature being enabled & misconfigured

See original GitHub issue

Package + Version

  • @sentry/browser
  • @sentry/node
  • raven-js
  • raven-node (raven for node)
  • other:

Version:

$ yarn list --pattern @sentry
yarn list v1.22.4
├─ @sentry/browser@5.17.0
├─ @sentry/core@5.17.0
├─ @sentry/hub@5.17.0
├─ @sentry/integrations@5.17.0
├─ @sentry/minimal@5.17.0
├─ @sentry/types@5.17.0
└─ @sentry/utils@5.17.0

Description

I’ve had sentry configured on a bunch of frontend javascript apps. These apps use vue for rendering. Because of this, I have enabled the vue integration for sentry.

Recently, the vue integration has started spamming our dev consoles with errors with the following message: Sentry Logger [Error]: Vue integration has tracing enabled, but Tracing integration is not configured. In one of my apps, I have 49 of those messages show up every time I load the app.

This is super noisy and annoying. It makes the dev console pretty hard to use as you have to scroll through a bunch of noisy errors to find what you’re looking for.

The error message itself is rather intriguing. It states that “tracing” is enabled. I’ve never enabled such a feature and when I look at the documentation, I see no mention of that feature. My sentry config is:

import * as Sentry from '@sentry/browser';
import * as SentryIntegrations from '@sentry/integrations';
import Vue from 'vue';

main();

function main () {
  const sentryEnv = process.env.SENTRY_ENV;
  Sentry.init({
    debug: sentryEnv !== 'production',
    dsn: 'REDACTED',
    environment: sentryEnv,
    release: process.env.CI_COMMIT_TAG,

    ignoreErrors: [
      /Blocked a frame with origin.*(staticxx\.facebook\.com|secure\.livechatinc\.com)/
    ],

    ignoreUrls: [
      /phantomjs:\/\//,
      /\/\w{8}-\w{4}-\w{4}-\w{4}-\w{12}\/main\.js/
    ],

    integrations: [
      new SentryIntegrations.Vue({ Vue, logErrors: true })
    ]
  });
}

As you can see, there’s no mention of tracing anywhere in there.

I’ve done some digging and it seems like tracing is this new sentry feature that’s being implemented / integrated. The PR for the vue integration is https://github.com/getsentry/sentry-javascript/pull/2571

From the code I can see that there’s a new tracing option for the vue integration that defaults to true:

https://github.com/getsentry/sentry-javascript/blob/1204302906bbe74edc8a18f8ded047b3041059d7/packages/integrations/src/vue.ts#L151-L164

Adding new features & enabling them by default is fine. I don’t like that it “breaks” existing configurations of sentry. Technically speaking, it’s not broken, everything seems to work fine. The feature seems to be compatible and seems to fail gracefully when the Tracing integration is missing. The problem is that the errors tell me that something is very broken when in reality everything is probably fine.

I would like for sentry to stop generating these noisy errors.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kanadguptacommented, Sep 9, 2020

Hi @kamilogorek! Also seeing an issue with the BrowserTracing() integration, even with a relatively basic config:

import { Integrations as ApmIntegrations } from '@sentry/tracing';

const Sentry = require('@sentry/browser');

module.exports = () => {
  Sentry.init({
    dsn: 'XXX',
    environment: 'XXX',
    release: 'XXX',
    integrations: [new ApmIntegrations.BrowserTracing()],
    tracesSampleRate: 0.25,
  });

  return Sentry;
};

and similar to @jlabresh1, I’m seeing the following error:

TypeError: t.getTransaction is not a function
    at c (bundle-api-explorer.js?1599663428136:53)
    at new n (bundle-api-explorer.js?1599663428136:53)
    ...
0reactions
kamilogorekcommented, Jul 2, 2021

Closing the issue, as it seems like the original issue has been partially resolved or there is a working solution. I’d prefer someone to create a new issue with a fresh description if it’s still an issue. Please do not hesitate to ping me if it is still relevant, and I will happily reopen and work on it. Cheers!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How we debugged a Vue error by tracing it to a backend ...
This article takes you on a journey through a real-world debugging process. We'll show you how we debugged a frontend error in one...
Read more >
Error Tracking and Handling with Vue.js - Rollbar
The error message is tracked in Rollbar, including a stack trace where you can see the line of code that caused the error....
Read more >
Error handling, debugging, and tracing in Vue.js
In this tutorial, we'll demonstrate how to handle errors, set up a debugger, and trace errors efficiently in Vue.js.
Read more >
Changelog - Cypress Documentation
Fixed a regression introduced in the Electron browser in Cypress 10.8.0 where the CYPRESS_EVERY_NTH_FRAME environment variable was not being set appropriately ...
Read more >
Vue - Sentry Documentation
Sentry's SDKs enable automatic reporting of errors and exceptions. On this page, we get you up and running with Sentry's SDK, so that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found