Problems with @sentry/utils after we switched from @sentry/browser to @sentry/gatsby

[aaron5670]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/gatsby

SDK Version

7.16.0

Framework Version

React 17.0.2

Link to Sentry event

No response

Steps to Reproduce

We switched from the latest version of @sentry/browser to @sentry/gatsby and got the following error:

Error in function eval in ./node_modules/@sentry/utils/esm/instrument.js:134

We didn't change any configuration, we only switched from Sentry SDK (@sentry/browser to @sentry/gatsby).

We use the following Sentry dependencies:

{
    "@sentry/gatsby": "^7.16.0",
    "@sentry/integrations": "^7.16.0",
    "@sentry/tracing": "^7.16.0",
    "@sentry/types": "^7.16.0",
}

This is how our gatsby-browser.js file looks:

import { init } from '@sentry/gatsby';
import { BrowserTracing } from '@sentry/tracing';
import { Dedupe, ExtraErrorData } from '@sentry/integrations';

/**
 * Called when the Gatsby browser runtime first starts.
 */
export const onClientEntry = async () => {
  /**
   * Available Options: https://docs.sentry.io/error-reporting/configuration/?platform=browser
   */
  init({
    dsn: process.env.GATSBY_SENTRY_DSN,
    release: __DYNAMIC_RELEASE_STRING__, // eslint-disable-line
    environment: process.env.GATSBY_ACTIVE_ENV,
    debug: process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',
    maxBreadcrumbs: 50,
    autoSessionTracking: true,

    // You can log events to Sentry, even locally in development env, but you need to opt-in for it.
    enabled: process.env.GATSBY_ACTIVE_ENV === 'production' || process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',

    normalizeDepth: 6,
    integrations: [
      new Dedupe(),
      new ExtraErrorData(),

      // This enables automatic instrumentation (highly recommended), but is not
      // necessary for purely manual usage
      new BrowserTracing({
        tracingOrigins: ['localhost', 'domain-a.nl', 'domain-b.be', /^\//],
      }),
    ],
    ignoreErrors: [
      'ResizeObserver loop limit exceeded',
      'CookieControl', // CookieBot related errors
      'webkitPresentationMode',
      'iFrameResizer',
      'iframe-resizer-react',
      'ChunkLoadError',
      'Pastease',
    ],
    denyUrls: [
      /accutics\.net/,
      /cookiebot\.com/,
      /doubeclick\.net/,
      /facebook\.net/,
      /google\.com/,
      /google-analytics\.com/,
      /googleadservices\.com/,
      /hotjar\.com/,
      /mopinion\.com/,
      /omappapi\.com/,
      /opmnstr\.com/,
      /zdassets\.com/,
      /zendesk\.com/,
      /zopim\.com/,
      /cdn\.optimizely\.com/,
    ],
    beforeSend: (event) => {
      if (['production', 'staging'].includes(process.env.GATSBY_ACTIVE_ENV)) {
        // Debug messages will be shown for staging and production only
        // if GATSBY_SENTRY_DEBUG_MODE env var set to 'true'.
        // Fatal, error, warning and info messages will always be shown.
        return event.level !== 'debug' || process.env.GATSBY_SENTRY_DEBUG_MODE === 'true' ? event : null;
      }

      return null;
    },
    beforeBreadcrumb: (breadcrumb) => {
      // All related to Hot Module Reloading locally, so no need to have it.
      if (breadcrumb.category === 'xhr' && breadcrumb.data && /socket.io\/\?EIO/.test(breadcrumb.data.url)) {
        return null;
      }

      if (breadcrumb.category === 'console' && /\[HMR\]/.test(breadcrumb.message)) {
        return null;
      }

      return breadcrumb;
    },
    // Stacktrace is always attached during errors.
    // If you want to see it also for debug, warning and info messages, set the GATSBY_SENTRY_DEBUG_MODE to 'true'
    attachStacktrace: process.env.GATSBY_SENTRY_DEBUG_MODE === 'true',

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

Expected Result

The integration has always worked properly with the package @sentry/browser, but after switching to @sentry/gatsby we get the following error message.

Actual Result

We switched from the latest version of @sentry/browser to @sentry/gatsby and got the following error:

[aaron5670]

Issue resolved.

The issue/bug is because of the config inside tacingOrigins.

      new BrowserTracing({
        tracingOrigins: ['localhost', 'drukwerkdeal.nl', 'printdeal.be', /^\//],
      }),

Fixed by removing the tracingOrigins.

[mogsdad]

I believe I've run into the same issue by upgrading @sentry/node from 7.15.0 to 7.16.0, with @sentry/browser and @sentry/react still at 7.15.0. A webpack build spewed logs like this:

WARNING in ./node_modules/@sentry/browser/esm/client.js 33:37-52
export 'WINDOW' (imported as 'WINDOW') was not found in '@sentry/utils' (possible exports: BAGGAGE_HEADER_NAME, CONSOLE_LEVELS, DEFAULT_RETRY_AFTER, MAX_BAGGAGE_STRING_LENGTH, SENTRY_BAGGAGE_KEY_PREFIX, SENTRY_BAGGAGE_KEY_PREFIX_REGEX, SentryError, SyncPromise, TRACEPARENT_REGEXP, _browserPerformanceTimeOriginMode, addContextToFrame, addExceptionMechanism, addExceptionTypeValue, addInstrumentationHandler, addItemToEnvelope, addNonEnumerableProperty, addRequestDataToEvent, addRequestDataToTransaction, arrayify, baggageHeaderToDynamicSamplingContext, basename, browserPerformanceTimeOrigin, checkOrSetAlreadyCaught, consoleSandbox, convertToPlainObject, createAttachmentEnvelopeItem, createClientReportEnvelope, createEnvelope, createStackParser, dateTimestampInSeconds, dirname, disabledUntil, dropUndefinedKeys, dsnFromString, dsnToString, dynamicRequire, dynamicSamplingContextToSentryBaggageHeader, envelopeItemTypeToDataCategory, escapeStringForRegex, extractExceptionKeysForMessage, extractPathForTransaction, extractRequestData, extractTraceparentData, fill, forEachEnvelopeItem, getDomElement, getEventDescription, getFunctionName, getGlobalObject, getGlobalSingleton, getLocationHref, getNumberOfUrlSegments, getOriginalFunction, htmlTreeAsString, isAbsolute, isBrowserBundle, isDOMError, isDOMException, isElement, isError, isErrorEvent, isEvent, isInstanceOf, isMatchingPattern, isNaN, isNativeFetch, isNodeEnv, isPlainObject, isPrimitive, isRateLimited, isRegExp, isString, isSyntheticEvent, isThenable, join, loadModule, logger, makeDsn, makePromiseBuffer, markFunctionWrapped, memoBuilder, nodeStackLineParser, normalize, normalizePath, normalizeToSize, objectify, parseRetryAfterHeader, parseSemver, parseUrl, rejectedSyncPromise, relative, resolve, resolvedSyncPromise, safeJoin, serializeEnvelope, severityFromString, severityLevelFromString, snipLine, stackParserFromStackParserOptions, stripSentryFramesAndReverse, stripUrlQueryAndFragment, supportsDOMError, supportsDOMException, supportsErrorEvent, supportsFetch, supportsHistory, supportsNativeFetch, supportsReferrerPolicy, supportsReportingObserver, timestampInSeconds, timestampWithMs, truncate, updateRateLimits, urlEncode, usingPerformanceAPI, uuid4, validSeverityLevels, walk)
 @ ./node_modules/@sentry/browser/esm/index.js 6:0-44 6:0-44
 @ consume shared module (default) @sentry/browser@^7.15.0 (strict) (fallback: ./node_modules/@sentry/browser/esm/index.js)
 @ ./node_modules/@sentry/react/esm/index.js 1:0-32 1:0-32
 @ consume shared module (default) @sentry/react@^7.15.0 (strict) (fallback: ./node_modules/@sentry/react/esm/index.js)

[AbhiPrasad]

@mogsdad, this is occuring because we need all @sentry/X deps to be of the same version, otherwise there is risk of conflicting sub dependencies. In this case, @sentry/browser is using the wrong version of @sentry/utils, so the export doesn't work properly.

[mogsdad]

@AbhiPrasad That doesn't appear to be the reason for this error, since it also occurs with all my @sentry dependencies at 7.16.0. Instead, this looks like #6016.

[AbhiPrasad]

Ah sorry then, #6016 was just fixed with #6024, and will be out with the next release! Release will be within the next 1-2 days. Thanks!