Capture sentry exception in app directory error.tsx instead of in Sentry global handler (Nextjs)

agualis commented 3 months ago

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

SDK Version

8.15.0

Framework Version

Next 14.1.0

Link to Sentry event

https://agualis.sentry.io/issues/5584526200/?project=4507566926462976&query=is%3Aunresolved+issue.priority%3A%5Bhigh%2C+medium%5D&referrer=issue-stream&stream_index=0

SDK Setup/Reproduction Example

Repo with reproduction issue:

https://github.com/agualis/nextjs-sentry

(you need to create an .env file with NEXT_PUBLIC_SENTRY_DSN=https://********.ingest.us.sentry.io/******)

Steps to Reproduce

The linked repo shows a simplified example of the issue reported in here.

The main question would be: how can I capture an exception in a nextjs error boundary without it being propagated to Sentry global handlers.

Expected Result

In the linked repo, I would expect foo.tsx Error Boundary to capture the exception (instead of global sentry handler).

Actual Result

foo.tsx captures the error once and I only receive the error once in sentry.

lforst commented 3 months ago

Hi, I cannot reproduce the issue you were describing with your reproduction example. You mentioned that your errors were getting reported twice, once for the normal error.tsx, once for the global-error.tsx.

When doing a production build, first of all your repro didn't compile because the page couldn't be statically rendered because it was always throwing. After replacing it with the following, and when causing the error I was only getting one error for the error.tsx:

"use client";

import { useState } from "react";

export default function Foo() {
  const [err, setErr] = useState(false);

  if (err) {
    throw new Error("asdf");
  }

  return (
    <main
      onClick={() => {
        setErr(true);
      }}>
        If you can see this the error did not throw
    </main>
  );
}

In dev mode, I was receiving multiple errors for error.tsx (that is expected due to react internals), but none for global-error.tsx.

To me, this is exactly expected behaviour. Would you mind elaborating, what may be wrong here? Good chance I am misunderstanding.

agualis commented 2 months ago

I updated the repo and it works as expected. You are right. Sorry and thanks for your clear explanation 🙌

Updated the linked repo in case anyone want to replicate it or in case I finally can reproduce what I was experiencing in a more complex scenario.

getsentry / sentry-javascript