Sentry NextJS only work when the error occurs on the server, not the client side

[destroyer22719]

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 package are you using?

@sentry/nextjs

SDK Version

7.6.0

Framework Version

7.6.0

Link to Sentry event

No response

Steps to Reproduce

Keep in mind this is when there is no server listening on localhost:4000 at all

Sentry will catch this error since this occurs on the server

const index: React.FC<{}> = () => {
    return <div>This should return an error</div>;
};

export const getServerSideProps: GetServerSideProps = async () => {
    await fetch("localhost:4000/fail");
    return { props: {} };
};

export default index;

This one does NOT

export default function index() {
    useEffect(() => {
        (async () => {
            await fetch("localhost:4000/fail")
        })();
    }, []);
    return <div>This should return an error</div>;
}

Expected Result

Sentry's issues section should be reporting client and server side issues from NextJS

Actual Result

The issues section on the Sentry dashboard will only catch the error thrown on the server

[lforst]

@destroyer22719 Hi, I cannot reproduce your issue. When I use the code snipped you shared (with useEffect) the fetch error shows up in Sentry just like expected.

Could you provide a minimal reproduction example so we can investigate this further? Thanks!

[destroyer22719]

Hi there @lforst, thanks for the response, the code is all on my repo https://github.com/destroyer22719/FoodFlation, obviously the code in question is the frontend folder. Should you require a working API you can create a .env file in the frontend folder with the API_URL set to https://foodflationapi.azurewebsites.net/ as well as setting the SENTRY_DSN in the .env file. If you want to test it you can go to localhost:3000/debug and comment in and out the different versions in the frontend/pages/debug/index.tsx file.

[lforst]

Thanks for providing the repo. I checked it out but couldn't reproduce the issue you're describing.

When commenting out line 4-11 in debug/index.ts and uncommenting line 15 onwards and after loading the page I'm getting a TypeError: Failed to fetch in Sentry as expected.

Do you by any chance try to have a faulty getServersideProps and a faulty component at once? If getServersideProps throws, Next.js won't even try to render the page, not throwing inside the component. You can have an error for one of them, but not both on one singular page load.

[destroyer22719]

Hi there thank you for your help. After some testing including using it on Chrome instead of Firefox, deleting the Sentry project and creating a new one I can't seem to get Sentry to throw an error with the client-side code. I looked at the network tab and I noticed how none of them made any request to Sentry and the Sentry DSN, that might be the issue. Is it supposed to be like this?

This was the network tab on the code that was supposed to throw an error for NextJS on the server side Whereas these are the network tab of the error on the client side Sentry again never shows up in the network tab

[lforst]

@destroyer22719 If you set debug: true in the clientside Sentry init call, it will log some information in the browser console. Maybe this will help us figure out what's wrong.

Please make sure the DSN is set in both the server config and the client config. I recommend replacing the process.env... with a hardcoded DSN to debug.

[destroyer22719]

Hi there @lforst after following your steps I realized I was the one who made the mistake. Like this comment mentioned SENTRY_DSN only works on the server, not on the browser, because NextJS says so. I must not only set a SENTRY_DSN because that'll only work in the server, but also NEXT_PUBLIC_SENTRY_DSN because that will be allowed by Next to use in the browser.

Thank you so much for your help

[lforst]

@destroyer22719 Glad to help!