TypeError: d.m_ is not a function after upgrading to @sentry/ember 7.100.1

[rohitpaulk]

Is there an existing issue for this?

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

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/ember

SDK Version

7.100.1

Framework Version

7.100.1

Link to Sentry event

https://codecrafters.sentry.io/issues/4953498292/?project=5922961&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=24h&stream_index=0

SDK Setup

Sentry.init({
    autoSessionTracking: true,
    dsn: config.environment === 'production' ? sentryDSN : '',
    environment: config.environment,
    tracesSampleRate: 0.01,
});

Steps to Reproduce

Load any page with Sentry enabled.

Expected Result

No errors in console

Actual Result

Errors are present in the console.

[mydea]

Hey, can you double check that all @sentry/xxx packages you have installed have the same/correct version? This smells to me like there may be an outdated dependency somewhere that is being picked up, possibly, as this method was added in an recent version.

[rohitpaulk]

@mydea from the looks of it everything does seem to have the correct version:

The only entry in package.json is @sentry/ember, I looked in package-lock.json and found these:

[AbhiPrasad]

This should be exported:

https://github.com/getsentry/sentry-javascript/blob/737fb0e5774d5e261614dab79e454ee854aef6e9/packages/ember/addon/index.ts#L120

https://github.com/getsentry/sentry-javascript/blob/737fb0e5774d5e261614dab79e454ee854aef6e9/packages/browser/src/index.ts#L64

https://github.com/getsentry/sentry-javascript/blob/737fb0e5774d5e261614dab79e454ee854aef6e9/packages/ember/addon/instance-initializers/sentry-performance.ts#L9

If you do

import * as Sentry from '@sentry/ember';

console.log(Sentry.startBrowserTracingPageLoadSpan);

what gets emitted?

[mike-engel]

I'm having the same issue here. Here's the output with the log:

I'm on ^7.102.1 for all dependencies

[mydea]

Did you try this:

import * as Sentry from '@sentry/ember';

console.log(Sentry.startBrowserTracingPageLoadSpan);

Can you let us know what you see there?

[mike-engel]

@mydea That's what my screenshot is showing. Here's the first 5 lines of our sentry config file. For that screenshot, I just added the console.log line.

import * as Sentry from '@sentry/ember';
import { Event, EventHint, Breadcrumb } from '@sentry/types';
import { httpClientIntegration, extraErrorDataIntegration } from '@sentry/integrations';

console.log(Sentry.startBrowserTracingPageLoadSpan);

[mydea]

Ah, sorry, I didn't understand that, thank you!

OK, so this is not about this method but about something else... Some questions:

• Can you enable source maps for the build - or alternatively, enable minification + source maps in dev mode and see if you get the same error there?
• Maybe the problem is that it is minifying something that it shouldn't - although not really sure why/how this should be happening...

[mike-engel]

@mydea here's what it looks like with sourcemaps loaded:

And here's the source of the error:

---

I'm wondering now if this has to do with tree shaking and the function is being removed? We using embroider now with all compile-time static analysis features turned on. If I pause execution at that line, Sentry is populated with functions, though probably not all the ones expected:

If I stringify them all, this is what I get:

{
  "$e": "function m(){const e=(0,o.Gd)();for(var t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];if(2===n.length){const[t,i]=n;return t?e.withScope((()=>(e.getStackTop().scope=t,i(t)))):e.withScope(i)}return e.withScope(n[0])}",
  "Tb": "function l(e,t){return(0,o.Gd)().captureException(e,(0,s.U0)(t))}",
  "cg": "function w(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]?y():v()}",
  "e": "function p(e){(0,o.Gd)().configureScope(e)}",
  "eN": "function u(e,t){return(0,o.Gd)().captureEvent(e,t)}",
  "nZ": "function g(){return(0,o.Gd)().getScope()}",
  "n_": "function d(e,t){(0,o.Gd)().addBreadcrumb(e,t)}",
  "s3": "function b(){return(0,o.Gd)().getClient()}",
  "sU": "function h(e,t){(0,o.Gd)().setExtra(e,t)}",
  "uT": "function c(e,t){const n=\"string\"==typeof t?t:void 0,i=\"string\"!=typeof t?{captureContext:t}:void 0;return(0,o.Gd)().captureMessage(e,n,i)}",
  "yj": "function f(e){const t=b(),n=(0,o.aF)(),s=g(),{release:l,environment:c=r.J}=t&&t.getOptions()||{},{userAgent:u}=i.GLOBAL_OBJ.navigator||{},p=(0,a.Hv)({release:l,environment:c,user:s.getUser()||n.getUser(),...u&&{userAgent:u},...e}),d=n.getSession();return d&&\"ok\"===d.status&&(0,a.CT)(d,{status:\"exited\"}),y(),n.setSession(p),s.setSession(p),p}"
}

[mydea]

Hmm, so a few things immediately jump to mind there:

1. why are there so few things there on Sentry?
2. That leads me to 2: it seems to be overly aggressively tree shaking away stuff... I'll try to import stuff directly instead of using namespace import, maybe that's the problem, let's see!

[mydea]

Actually, maybe the problem is that it thinks this should be lazy loaded/imported - will try to put up a fix!

[AbhiPrasad]

We released https://github.com/getsentry/sentry-javascript/releases/tag/7.106.0 which may fix this - please give it a try and let us know!

[mike-engel]

Unfortunately this doesn't seem to fix the issue for us (line with the breakpoint is the line with the error):

[mydea]

Hmm, damn!

The problem seems to be that it is minifying and tree shaking this function (?) away, incorrectly 🤔 But I don't understand why, sadly.

Could you share your ember build config?

[mike-engel]

Here's a slightly minified output:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { Webpack } = require('@embroider/webpack');
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');
const { WatchedDir } = require('broccoli-source');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PostProcessPlugin = require('./lib/embed-script-build/lib/post-process');

const environment = process.env.EMBER_ENV;
const cioEnvironment = process.env.CIO_ENV ?? 'development';
const isProduction = environment === 'production';
const skipFingerprint = process.env.SKIP_FINGERPRINT === 'true';
const forceFingerprint = process.env.FORCE_FINGERPRINT === 'true';
const publicAssetUrl = process.env.PUBLIC_ASSET_URL ?? null;

module.exports = function (defaults) {
  let appTree = new WatchedDir('app');

  // https://github.com/embroider-build/embroider/issues/758#issuecomment-983059421
  // workaround for .ts files in the mirage directories being ignored
  if (environment !== 'production') {
    appTree = new MergeTrees([
      appTree,
      new Funnel(new WatchedDir('mirage'), {
        destDir: 'mirage',
      }),
    ]);
  }

  let app = new EmberApp(defaults, {
    trees: { app: appTree },

    babel: {
      plugins: [require.resolve('ember-auto-import/babel-plugin')],
      sourceMaps: isProduction ? 'inline' : false,
    },
    autoImport: {
      watchDependencies: [
        '@customerio/fly-components',
        '@customerio/pluma-components',
        '@customerio/encompass',
        '@customerio/carta',
        '@customerio/carta-visualized',
        '@customerio/magic-html',
        '@customerio/marshaled-preview',
        '@customerio/process-conditional-comments',
        '@customerio/source-htmlparser2',
        '@customerio/event-emitter',
        '@customerio/hydra-nav-state',
        '@customerio/hydra-pluma-state',
        '@customerio/hydra-ember-test-helpers',
      ],
      forbidEval: true,
      webpack: {
        module: {
          rules: [
            // required for monaco-editor module bundling
            {
              test: /\.ttf$/i,
              use: ['file-loader'],
            },
          ],
        },
      },
    },

    sourcemaps: {
      enabled: environment !== 'test',
      extensions: ['js'],
    },

    minifyCSS: { enabled: false },

    'ember-cli-terser': {
      enabled: isProduction,

      terser: {
        compress: true,
      },
    },

    tests: process.env.EMBER_CLI_TEST_COMMAND || !isProduction,
    hinting: process.env.EMBER_CLI_TEST_COMMAND || !isProduction,

    fingerprint: {
      extensions: ['js', 'extcss', 'css', 'png', 'jpg', 'jpeg', 'gif', 'ico', 'eot', 'svg', 'ttf', 'woff', 'mp3'],
      enabled: (isProduction && !skipFingerprint) || forceFingerprint,
    },

    // third-party package configs
  });

  // various app.import calls

  let countryFlags = new Funnel('node_modules/flagpack', {
    srcDir: 'flags/4x3/',
    include: ['*.*'],
    destDir: '/assets/images/flags',
  });

  return require('@embroider/compat').compatBuild(app, Webpack, {
    extraPublicTrees: [countryFlags],
    staticAddonTestSupportTrees: true,
    staticAddonTrees: true,
    staticHelpers: true,
    staticModifiers: true,
    staticComponents: true,
    staticEmberSource: true,
    splitAtRoutes: ['internal-tools'],
    packagerOptions: {
      cssLoaderOptions: {
        import: false,
      },

      webpackConfig: {
        devtool: 'source-map',

        stats: {
          errorDetails: true,
        },

        plugins: [
          new PostProcessPlugin(app),
          new MiniCssExtractPlugin({
            filename: `assets/chunk.[chunkhash].css`,
            chunkFilename: `assets/chunk.[chunkhash].css`,
          }),
        ],

        output: {
          // Keep the output path of assets the same originally (without this,
          // all static assets are output at the root)
          // https://stackoverflow.com/a/68902490/12679717
          assetModuleFilename: (pathData) => {
            let filenameFormat = isProduction ? '[name].[contenthash][ext][query]' : '[name][ext][query]';
            let filepath = path.dirname(pathData.filename);

            // rename some ".css" assets,
            // saved as "app/assets/styles/*.extcss" to avoid default Embroider processing,
            // back to ".css" in the dist output:
            if ((pathData.filename ?? '').endsWith('.extcss')) {
              filenameFormat = isProduction ? '[name].[contenthash].css[query]' : '[name].css[query]';
            }

            return `${filepath}/${filenameFormat}`;
          },
        },

        module: {
          rules: [
            {
              test: /\.(extcss|png|jpg|jpeg|gif|ico|eot|svg|ttf|woff|mp3)$/i,
              type: 'asset/resource',
            },
            {
              test: /\.scss$/i,
              use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
                      config: './postcss.config.js',
                    },
                  },
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sassOptions: {
                      implementation: require('sass'),
                      includePaths: [
                        'node_modules/@customerio/fly-components/app/styles',
                        'node_modules/ember-power-select/app/styles',
                        'node_modules/ember-basic-dropdown/app/styles',
                      ],
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    },
  });
};

[mydea]

Thank you, I was able to reproduce this locally. Still no idea why it is doing that, but this PR fixed the issue for me locally, at least: https://github.com/getsentry/sentry-javascript/pull/11026

[mike-engel]

Thanks for taking a look and for the fix @mydea! Looking forward to the v7 release with this!

[AbhiPrasad]

Fix released with https://github.com/getsentry/sentry-javascript/releases/tag/7.107.0

[mike-engel]

Thanks for the heads up @AbhiPrasad! Looks like this fixes it 😄

[mydea]

Great to hear that! 🚀