reactComponentAnnotation creates Bad Requests (400) when fetching from external data source such as Algolia

[steve-rodri]

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

SDK Version

8.11.0

Framework Version

18.3.1

Link to Sentry event

No response

SDK Setup/Reproduction Example

Sentry.init({
  dsn: "***",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  environment: process.env.NODE_ENV || "local",
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", SITE_URL.test, SITE_URL.production],
  // Session Replay
  replaysSessionSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1.0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
})

Steps to Reproduce

Here is my webpack config:

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin")

const { NxAppWebpackPlugin } = require("@nx/webpack/app-plugin")
const { NxReactWebpackPlugin } = require("@nx/react/webpack-plugin")

const { join } = require("path")

module.exports = {
  output: {
    path: join(__dirname, "./dist"),
  },

  devServer: {
    port: 4200,
    historyApiFallback: { index: "/" },
  },

  plugins: [
    new NxAppWebpackPlugin({
      tsConfig: "./tsconfig.app.json",
      compiler: "babel",
      main: "./src/main.tsx",
      index: "./src/index.html",
      baseHref: "/",
      assets: ["./src/favicon.ico", "./src/assets"],
      styles: ["./src/styles.scss"],
      outputHashing: process.env["NODE_ENV"] === "production" ? "all" : "none",
      optimization: process.env["NODE_ENV"] === "production",
    }),
    new NxReactWebpackPlugin({}),
    sentryWebpackPlugin({
      authToken: process.env.SENTRY_AUTH_TOKEN_FRONTEND,
      org: "v-school",
      project: "lms-react-app",
      reactComponentAnnotation: { enabled: true },
    }),
  ],

  devtool: "source-map",
}

Expected Result

When reactComponentAnnotation is enabled I should not have a response from algolia indicating a failed request of 400.

Actual Result

[lforst]

@0Calories Would you mind taking a look at this if you got the time? Thanks!

[JonasBa]

Tagging @Haroenv - this looks like an issue on our end (prop bleeding?), thought I would expect the Algolia SDK to guard from this.

[smeubank]

@JonasBa what do you mean by our end in this scenario? Sentry SDK, Algolia SDK?

[JonasBa]

@smeubank I think we generate these annotations, but then they somehow end up in Algolia, which I would expect the Algolia SDK to guard from (unless we are doing something really bad here)