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!