ErrorBoundary triggering on error thrown within try catch block

[lukasb]

Summary

The ErrorBoundary is triggering on some errors thrown within a try catch block, see screenshot.

Should I open a bug for this?

Additional information

No response

Example

No response

[icyJoseph]

Darn this is interesting. I was about to say that, most likely, the call you make is async, but having looked at minisearch, everything seems pretty sync to me.

Btw, I saw you use a timeout to race your promises, but you could also use AbortSignal.timeout, https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static, you'd need to re-work some parameters on your function, but it'd do the trick.

This issue is weird though, the error is being swallowed, at least that's what it looks like when inspecting the code. I'd try to make a small reproduction repository, ideally, without minisearch, and only the exact code that triggers this.

[icyJoseph]

Aha, interesting, your example uses pages router to trigger that issue. I've been able to see it reproduced here, https://stackblitz.com/github/lukasb/error-repro?file=pages%2Findex.tsx,components%2FChatComponent.tsx,lib%2Ffuncs.ts a Stackblitz run of your repository.

Let me explore this a bit further.

[icyJoseph]

Ok, I got the error, I think... the problem is logging with console.error, which is bizarre, but I see in the codebase that they are monkey patching the console.error, and then when you console.error, they make a new error out of it, that gets raised out of your function scope, which is why it looks like it doesn't try catch.

Just comment the console.error, and it will be fine. I'll try to make a PR for it.

[lukasb]

weird. thanks for looking into it.

[icyJoseph]

Ok, so yeah:

Important

These patches apply to development mode only

In Pages Router

• next.js/packages/next/src/client/components/react-dev-overlay/pages/client.ts

  Lines 53 to 60 in 3a6fa57

  	let origConsoleError = console.error
  	function nextJsHandleConsoleError(...args: any[]) {
  	// See https://github.com/facebook/react/blob/d50323eb845c5fde0d720cae888bf35dedd05506/packages/react-reconciler/src/ReactFiberErrorLogger.js#L78
  	const error = process.env.NODE_ENV !== 'production' ? args[1] : args[0]
  	storeHydrationErrorStateFromConsoleArgs(...args)
  	handleError(error)
  	origConsoleError.apply(window.console, args)
  	}

The nextJsHandleConsoleError is used to override the console.error:

• next.js/packages/next/src/client/components/react-dev-overlay/pages/client.ts

  Lines 90 to 101 in 3a6fa57

  	isRegistered = true
  	try {
  	const limit = Error.stackTraceLimit
  	Error.stackTraceLimit = 50
  	stackTraceLimit = limit
  	} catch {}
  	window.addEventListener('error', onUnhandledError)
  	window.addEventListener('unhandledrejection', onUnhandledRejection)
  	window.console.error = nextJsHandleConsoleError
  	}

Which doesn't really make much sense to me, but perhaps there is a reason for it... I doubt it though. I kind of want to open a PR removing that for Pages Router.

In App Router

• https://stackblitz.com/edit/nextjs-mtigtb4d?file=app%2Fpage.tsx

The issue is less aggressive, but you do get a badge saying, 1 error, when you do so much as console.error

Screen.Recording.2025-01-24.at.00.33.36.mov

That is done here:

• next.js/packages/next/src/client/components/globals/intercept-console-error.ts

  Lines 31 to 38 in 3a6fa57

  	handleClientError(
  	// replayed errors have their own complex format string that should be used,
  	// but if we pass the error directly, `handleClientError` will ignore it
  	maybeError,
  	args,
  	true
  	)
  	}

And the internals of handleClientError were last worked on this PR: #72468 which seems to suggest that their intention is indeed, to push console.error to the overlay...

In a way it feels intrusive.. I haven't looked at issues, but I imagine there can be a few there. For Pages Router, it does feel very intrusive, as the entire UI is overlayed, and it gets in the way of seeing the error handling UI, even though the error is being correctly handled. It can easily throw off beginners.

[icyJoseph]

@samcx Hi, sorry for the ping, once again, but do you know if the Pages Router, console.error patch, is still valid, or perhaps we could remove it?

And as per the App Router patch, I guess, it is intentional, that Next.js wants to patch the console.error, to also show those in the dev overlay?

[icyJoseph]

@lukasb I think you could, mark this as answered, and close it, then open an issue with your GitHub repository, and point back to this investigation there. This is at the very least an issue that deserves some explanation/addressing, specially for Pages Router.

[samcx]

@icyJoseph Sorry for the late response!

Taking a look—

[samcx]

@icyJoseph curious: what are you seeing with your Pages reproduction with the new dev overlay?

  experimental: {
    newDevOverlay: true,
  }