Sentry Replay - Uncaught SyntaxError: invalid increment/decrement operand

JanPetr commented 1 year ago

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/browser

SDK Version

7.74.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/vue'
Sentry.init({
  dsn: "__OUR_DSN__",
  integrations: [new Sentry.BrowserProfilingIntegration(), new Sentry.BrowserTracing(), new Setry.Replay()],
  environment: "#{Rails.env}",
  release: window.cfg.app_version,
  tracesSampleRate: 1.0,
  profilesSampleRate: 1.0,
  denyUrls: [/chat-assets\.frontapp\.com/i],
  app: [],
  trackComponents: true,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});
Sentry.setUser({ email: "#{current_user&.email}" });
window.Sentry = Sentry;

Steps to Reproduce

We complile Sentry SDK like this:

# 1. Download sentry packages
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-utils-7.74.0.tgz
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-core-7.74.0.tgz
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-internal-tracing-7.74.0.tgz
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-browser-7.74.0.tgz
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-vue-7.74.0.tgz
curl -LO https://github.com/getsentry/sentry-javascript/releases/download/7.74.0/sentry-replay-7.74.0.tgz 

# 2. Untar
mkdir sentry-utils
mkdir sentry-core
mkdir sentry-internal-tracing
mkdir sentry-browser
mkdir sentry-vue
mkdir sentry-replay

tar -xzf sentry-utils-7.74.0.tgz -C sentry-utils
tar -xzf sentry-core-7.74.0.tgz -C sentry-core/
tar -xzf sentry-internal-tracing-7.74.0.tgz -C sentry-internal-tracing/
tar -xzf sentry-browser-7.74.0.tgz -C sentry-browser/
tar -xzf sentry-vue-7.74.0.tgz -C sentry-vue/
tar -xzf sentry-replay-7.74.0.tgz -C sentry-replay/

# 3. Get rid of unused tracing integrations 
sed -i -e "/export { Express } from '.\/node\/integrations\/express.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { Postgres } from '.\/node\/integrations\/postgres.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { Mysql } from '.\/node\/integrations\/mysql.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { Mongo } from '.\/node\/integrations\/mongo.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { Prisma } from '.\/node\/integrations\/prisma.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { GraphQL } from '.\/node\/integrations\/graphql.js';/d" sentry-internal-tracing/package/esm/index.js
sed -i -e "/export { Apollo } from '.\/node\/integrations\/apollo.js';/d" sentry-internal-tracing/package/esm/index.js

# 4. Build the fat es module
webpack --config ./webpack.config.js -o ./

Webpack config:

const path = require('path');

module.exports = {
  entry: './sentry-vue/package/esm/index.js',
  experiments: {
    outputModule: true
  },
  optimization: {
    minimize: true
  },
  output: {
    iife: false,
    libraryTarget: 'module',
    filename: './sentry-vue.js'
  },
  resolve: {
    alias: {
      '@sentry/core': path.resolve(__dirname, 'sentry-core/package/esm/index.js'),
      '@sentry/utils': path.resolve(__dirname, 'sentry-utils/package/esm/index.js'),
      '@sentry-internal/tracing': path.resolve(__dirname, 'sentry-internal-tracing/package/esm/index.js'),
      '@sentry/browser': path.resolve(__dirname, 'sentry-browser/package/esm/index.js'),
      '@sentry/replay': path.resolve(__dirname, 'sentry-replay/package/esm/index.js'),
    },
  },
  devtool: false,
  mode: 'production'
}

& load final file to broser and Sentry.init. When compiling including Sentry Replay, the browser doesn't record any sessions, but rather throws:

Uncaught SyntaxError: invalid increment/decrement operand

When compling the Sentry SDK without Replay (running sed -i -e "/export { Replay } from '@sentry\/replay';/d" sentry-browser/package/esm/index.js with other sed commands), everything works OK.

Expected Result

No error thrown Session replays loaded in our Sentry.io

Actual Result

(version is older on screenshot, but works the same with 7.74.0)

And no session replays recorded.

Thank you for looking into it! 💙

lforst commented 1 year ago

Hi, we generally do not support use cases like these where you mess with the SDK in an unorthodox way. It would explode our maintenance efforts. I hope you can understand that.

We do however support the tree-shaking capabilities of all the commonly used bundlers, including webpack, which you seem to be using. I recommend you configure your bundler to tree shake, instead of doing crude string replacement.

getsantry[bot] commented 11 months ago

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

getsentry / sentry-javascript