Next.js: Sentry can't merge these similar events

[meotimdihia]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nextjs

SDK Version

8

Framework Version

@sentry/nextjs ^8

Link to Sentry event

No response

SDK Setup

import * as Sentry from "@sentry/nextjs"
import { UAParser } from "ua-parser-js"
const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN

Sentry.init({
  environment: "production",

  dsn: SENTRY_DSN 
  beforeSend(event, hint) {
    if (hint.originalException === "Timeout") return null
    const parser = new UAParser()
    const browser = parser.getBrowser()
    if (browser.name == "UCBrowser" || browser.name == "Samsung Browser") {
      return null
    }
    if (
      browser.name == "Chrome" &&
      Number(browser.version.split(".")[0]) < 100
    ) {
      return null
    }
    // https://github.com/getsentry/sentry-javascript/issues/3977
    const frames = event.exception?.values[0].stacktrace?.frames
    if (frames) {
      const lastFilename = frames[frames.length - 1].filename
      // as of https://github.com/getsentry/sentry-javascript/pull/3842, these
      // values are ignored by `allowUrls` and `denyUrls` if they're in the last
      // frame
      if (lastFilename === "<anonymous>" || lastFilename === "[native code]") {
        // in some cases, however, they're in *all* the frames, and in those cases
        // we *do* actually want to use the value as a filter
        if (
          frames.every(
            (frame) =>
              !frame.filename ||
              frame.filename === "<anonymous>" ||
              frame.filename === "[native code]"
          )
        ) {
          return null
        }
      }
      if (!frames[0].filename?.match(/\.(js|ts|tsx)$/)) {
        return null
      }
    }

    if (event.breadcrumbs?.length > 0) {
      const breadcrumbs = event.breadcrumbs
      breadcrumbs.reverse()
      for (let i = 0; i < breadcrumbs.length; i++) {
        if (breadcrumbs[i].category == "fetch") {
          if (
            breadcrumbs[i].data.url.match(/adform.net|prebid|criteo/)
          ) {
            return null
          }
        }
      }
    }

    return event
  },

  ignoreErrors: [
    // Random plugins/extensions
    "Failed to fetch", // Windows
    "Load failed", // IOS
    "NetworkError when attempting to fetch resource.",
    "cancelled",
    "undefined is not an object (evaluating 'document.getElementsByTagName('video')[0].webkitExitFullScreen')",
    "Request failed",
    // Generic error code from errors outside the security sandbox
    // You can delete this if using raven.js > 1.0, which ignores these automatically.
    "Script error.",
    "The network connection was lost.",
    "The Internet connection appears to be offline.",
    
  ],
  denyUrls: [
    /injectedScript/,
    /zaraz/,
    /adagio/,
    // Facebook flakiness
    /graph\.facebook\.com/i,
    // Facebook blocked
    /connect\.facebook\.net\/en_US\/all\.js/i,
    // Woopra flakiness
    /eatdifferent\.com\.woopra-ns\.com/i,
    /static\.woopra\.com\/js\/woopra\.js/i,
    // Chrome extensions
    /extensions\//i,
    /^chrome:\/\//i,
    // Other plugins
    /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
    /webappstoolbarba\.texthelp\.com\//i,
    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i
  ],
  autoSessionTracking: false,
  tracesSampleRate: 0.05

})

Steps to Reproduce

Sentry can't merge these events because it doesn't know these issues belong to dynamic routes:

{
...
"fingerprint": [
"{{ default }}"
],
"grouping_config": {
"enhancements": "KLUv_SAYwQAAkwKRs25ld3N0eWxlOjIwMjMtMDEtMTGQ",
"id": "newstyle:2023-01-11"
}
}

Expected Result

These issues should be merged.
I know we had:

• SDK Fingerprinting
• Fingerprint Rules
• Stack Trace Rules
• Merging Issues
• Issue Grouping
  But the documentation is hard to understand while there is no example for next.js.

Actual Result

These issues were created on every different URLs. Even though they are on the same dynamic route.

[s1gr1d]

Hello and thanks for writing! Can you share the whole JSON you get when clicking on "View JSON"? Especially the fingerprinting part would be interesting.

[meotimdihia]

Hi, here is the whole file JSON:

https://gist.github.com/meotimdihia/d6a06c1d7b2c9ee3555bf02290c4b1f3

[s1gr1d]

First, the default grouping is based on the stack trace (docs here). Therefore, you get multiple error events for the same parametrized route. Based on what I can see in the stack trace of your shared json file, it looks like you have script tags in your html. It is not possible to create source maps for this part of the code. Therefore, you get the actual module name in the stack trace.

If we would change the grouping behavior, it would also have an effect on other users. You could try to customize your error grouping by changing the fingerprinting rules or the stack trace rules (see docs link above). Another option would be to remove the script tags inside the html code (if this is possible).

[meotimdihia]

Thanks for explaining, but I still don't get this part:

it looks like you have script tags in your html. It is not possible to create source maps for this part of the code

I think any website have <script></script> tag too, for example:
view-source:https://sentry.io

Currently, our website is running ad scripts, they could create an external script tag without source maps and ad scripts have many problems because of various cases. Do you think they are root of this problem?
Do we have any way to exclude them? TI try to search solution on other issues but can't find a way to solve it. I think there is very common problem.