Unknown issue for "Console Error" or "createUnhandledError"

[LikeDreamwalker]

Summary

After I update to Next.js 15, I think I meet this issue often but can't figure out what caused:

• When my browser's devtool crashed by out of memory. This might be weird but my app do cost much memory
• When I enter the devtool or leave it
• Some hot updates
  
  I really can't get more from this issue and seems like my app still work fine under this issue. And I can't reproduce it by a clear solution, it is more like an accident.
  And here is my package.json, also I haven't test it production, but still seems like this issue is harmless.

{
  "name": "open-sora-app",
  "version": "0.1.0",
  "author": "Alan Yuan @LikeDreamwalker",
  "private": true,
  "packageManager": "[email protected]",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "docker:build": "node scripts/docker-build.js",
    "docker:deploy": "node scripts/docker-deploy.js",
    "docker:run": "node scripts/docker-run.js",
    "docker:product": "node scripts/docker-product.js"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mdx-js/loader": "^3.0.1",
    "@mdx-js/react": "^3.0.1",
    "@mui/icons-material": "^6.2.0",
    "@mui/material": "^6.2.0",
    "@mui/material-nextjs": "^6.2.0",
    "@mui/system": "^6.2.0",
    "@next/mdx": "15.1.2",
    "@next/third-parties": "15.1.2",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-scroll-area": "^1.2.1",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.3",
    "@radix-ui/react-visually-hidden": "^1.1.1",
    "@types/lodash": "^4.17.10",
    "@types/mdx": "^2.0.13",
    "browser-image-compression": "^2.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "crypto": "^1.0.1",
    "idb": "^8.0.0",
    "immer": "^10.1.1",
    "lodash": "^4.17.21",
    "lucide-react": "^0.456.0",
    "media-chrome": "^4.2.3",
    "next": "15.1.2",
    "next-compose-plugins": "^2.2.1",
    "next-intl": "^3.26.3",
    "next-themes": "^0.4.4",
    "notistack": "^3.0.1",
    "qrcode.react": "^4.1.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-dropzone": "^14.2.9",
    "react-easy-crop": "^5.1.0",
    "sonner": "^1.7.0",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^10.0.0",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@types/node": "^20.16.11",
    "@types/react": "19.0.1",
    "@types/react-dom": "19.0.2",
    "@types/uuid": "^10.0.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.57.1",
    "eslint-config-next": "15.1.2",
    "postcss": "^8.4.48",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  },
  "pnpm": {
    "overrides": {
      "@types/react": "19.0.1",
      "@types/react-dom": "19.0.2"
    }
  }
}

Additional information

No response

Example

No response

[jasonm]

FWIW I was also encountering this issue. Using Next 15.1.3 (current latest). For me, the underlying error was ResizeObserver loop completed with undelivered notifications caused by @radix-ui/react-scroll-area <ScrollArea /> component. I was able to see the error by:

• Opening src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts in the Chrome dev tools
• Removing that script from the devtools ignore list https://developer.chrome.com/docs/devtools/settings/ignore-list
• When the error occurred, going up the stack one level to onUnhandledError to see window.error:
  

It appears that, in my case, this issue is caused by radix-ui/primitives#2313 which will be fixed when radix-ui/primitives#2315 is merged.

@LikeDreamwalker it looks like you are using @radix-ui/react-scroll-area -- you might check to see if removing that fixes the error?

I didn't dig in to understand why the react-dev-overlay doesn't show this error. @huozhi it looks like you've done some work maintaining react-dev-overlay - maybe you have some insight here?

[LikeDreamwalker]

Thanks for reply and I do use shadcn/ui and radix-ui for now, but I was in a heavy working progress, so this issue seems like has been solved in my project, but I don't know why. I paste my current package.json below, maybe some updates solved this issue

[huozhi]

It's a new feaeture in v15 that we're capturing console.error in the console to capture both react replayed server errors and unresolved client side errors.

This empty message is probably caused by some weird errors, would like to see a full reproduction to investigate. Can you submit an issue with repro if possible? Thanks

[jasonm]

@huozhi Thanks! I have extracted a minimal reproduction here: https://github.com/jasonm/dropdown-error-repro

To repro, npm install && next dev and, on the default page:

1. Click the dropdown
2. Select "Option 1"
3. Should see the error

Here's a Loom video of me reproing this: https://www.loom.com/share/a183d050de2b428d8e6ee16f49615d58

In my case, the error is "ResizeObserver loop completed with undelivered notifications" caused by radix-ui/primitives#2313

Hope this helps - thanks for your work on Next tooling :)

[jasonm]

Re-reading your comment -- let me know if submitting a new issue would be preferable.

[huozhi]

Thanks, I found the root cause is that we received an error event but the event.error is actually null. It does related to the radix. I'll address with a fix for that

[LikeDreamwalker]

This issue doesn't happen again after a heavy development, and I don't know how it is solved. Here is my current package.json file:

{
  "name": "open-sora-app",
  "version": "0.1.0",
  "author": "Alan Yuan @LikeDreamwalker",
  "private": true,
  "packageManager": "[email protected]",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "docker:build": "node scripts/docker-build.js",
    "docker:deploy": "node scripts/docker-deploy.js",
    "docker:run": "node scripts/docker-run.js",
    "docker:product": "node scripts/docker-product.js"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@hookform/resolvers": "^3.9.1",
    "@mdx-js/loader": "^3.1.0",
    "@mdx-js/react": "^3.1.0",
    "@mui/icons-material": "^6.3.0",
    "@mui/material": "^6.3.0",
    "@mui/material-nextjs": "^6.3.0",
    "@mui/system": "^6.3.0",
    "@next/mdx": "15.1.2",
    "@next/third-parties": "15.1.2",
    "@radix-ui/react-avatar": "^1.1.2",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@radix-ui/react-menubar": "^1.1.4",
    "@radix-ui/react-popover": "^1.1.4",
    "@radix-ui/react-scroll-area": "^1.2.2",
    "@radix-ui/react-select": "^2.1.4",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.6",
    "@radix-ui/react-visually-hidden": "^1.1.1",
    "@types/lodash": "^4.17.13",
    "@types/mdx": "^2.0.13",
    "browser-image-compression": "^2.0.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "crypto": "^1.0.1",
    "idb": "^8.0.1",
    "immer": "^10.1.1",
    "lodash": "^4.17.21",
    "lucide-react": "^0.456.0",
    "media-chrome": "^4.3.0",
    "next": "15.1.2",
    "next-compose-plugins": "^2.2.1",
    "next-intl": "^3.26.3",
    "next-themes": "^0.4.4",
    "notistack": "^3.0.1",
    "qrcode.react": "^4.2.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-dropzone": "^14.3.5",
    "react-easy-crop": "^5.2.0",
    "react-hook-form": "^7.54.2",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^10.0.0",
    "zod": "^3.24.1",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@types/node": "^20.17.10",
    "@types/react": "19.0.1",
    "@types/react-dom": "19.0.2",
    "@types/uuid": "^10.0.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.57.1",
    "eslint-config-next": "15.1.2",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.2"
  },
  "pnpm": {
    "overrides": {
      "@types/react": "19.0.1",
      "@types/react-dom": "19.0.2"
    }
  }
}