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

[steve-rodri]

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 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)

[Haroenv]

The JS SDK will take any parameter and pass it on to the network. I guess what may happen in this case is you pass an extra prop to Configure, which then gets turned into a search parameter. As we can't know in advance what all possible parameters are, we don't have an allowlist.

Maybe sentry needs some configuration to prevent attaching these props to certain components?

[lforst]

@Haroenv Please see the following not as passing around a hot potato but rather from a purely technical standpoint 😂: I think it would be more reasonable if the Algolia SDK had a denylist. Our plugin runs during build and in some situations, it is semantically impossible (without doing a completely unreasonable amount of computations) to know what component we are attaching attributes to.

cc @0Calories because he owns the annotation plugin.