Nextjs server side rendering deployed on custom server

[mcAnastasiou]

We deploy the app not in Vercel but in our own custom server. I tried your project and i saw that server side source maps still don't work. I checked the issue and the solutions suggested there, but it seems that it doesn't work

Also it seems that for client error handling to work properly NEXT_PUBLIC_HONEYBADGER_API_KEY should be set instead of HONEYBADGER_API_KEY. Otherwise [Honeybadger] Unable to send error report: no API key has been configured is being displayed in console

[subzero10]

Hey @mcAnastasiou, thanks for submitting an issue!

We deploy the app not in Vercel but in our own custom server. I tried your project and i saw that server side source maps still don't work. I checked the issue and the solutions suggested there, but it seems that it doesn't work

I will take a look at the example project in the coming days and setup a demo app with Next.js and see if I can get source maps working.

Also it seems that for client error handling to work properly NEXT_PUBLIC_HONEYBADGER_API_KEY should be set instead of HONEYBADGER_API_KEY. Otherwise [Honeybadger] Unable to send error report: no API key has been configured is being displayed in console

This is because of Next.js. Env variables that are to be consumed on the browser need to be prefixed with NEXT_PUBLIC.

[mcAnastasiou]

Thank you @subzero10 for the response. I am looking forward to your reply

[subzero10]

Hey @mcAnastasiou, I have some updates on this.

I was able to get client errors reported mapped to the correct source files! Here is what I did:

• Install the latest @honeybadger-io/js package
• Install the latest @honeybadger-io/webpack package
• Modify Honeybadger.beforeNotify

Note: I did not have to set the HONEYBADGER_API_KEY to be NEXT_PUBLIC_HONEYBADGER_API_KEY for the client reporting to work.

Did you confirm that the source maps are indeed uploaded to Honeybadger? You can read more about this here. Make sure that you have matching revision tags between the Application Environment section of the error and the revision in Project Settings -> Source Maps -> Uploaded Source Maps.
Also, make sure to set the correct HONEYBADGER_ASSETS_URL. It should match the URL in the reported error.

Moving on to the server errors:
I can’t get server errors to be reported consistently.

• Most of the times (if not all) they are not reported,
• I am expecting Error('Server Test 2') but if something is reported, it shows UnhandledPromiseRejectionWarning: Error: Client Test 4

Basically, I can’t get Error(Server … to be reported. I think I have an idea why this could happen: When the error is thrown, the function is terminated before the error is reported to Honeybadger. I don’t know much about Vercel though, so I’m not saying that with confidence.

@joshuap Any ideas about the server errors?

[joshuap]

• I am expecting Error('Server Test 2') but if something is reported, it shows UnhandledPromiseRejectionWarning: Error: Client Test 4

Could this be related to #1?

It's been a while since I worked with this, and tbh it seemed at the time that vercel was still working on ironing out some of these issues. I'll have to take a closer look. I do recall that it's important that the page is being loaded for the first time in a fresh tab for the server errors to be reported.

[mcAnastasiou]

Thank you both for your answers! Regarding the server side errors is it something that vercel team has to fix?

[joshuap]

Thank you both for your answers! Regarding the server side errors is it something that vercel team has to fix?

Server-side errors should be automatically reported as far as I know (if they're not, there may be a configuration issue, or Vercel may have changed something and we need to update our example). I still need to do some digging on the server-side source maps issue.

[mcAnastasiou]

Thank you both for your answers! Regarding the server side errors is it something that vercel team has to fix?

Server-side errors should be automatically reported as far as I know (if they're not, there may be a configuration issue, or Vercel may have changed something and we need to update our example). I still need to do some digging on the server-side source maps issue.

The server side errors are being reported correctly. The only issue is that source maps don't seem to work. I see the error for the minified js

[joshuap]

I had time to check out where I left off with the node-source-maps branch, and here's what I found:

1. Both client side and server side source maps DO work on the node-source-maps branch
2. To make it work locally, you must simulate production mode with NODE_ENV=production
3. You must also configure a Honeybadger project

Here's my .env.local (replace [project api key] with your real API key):

HONEYBADGER_API_KEY=[project api key]
HONEYBADGER_ASSETS_URL=http://localhost:3000/_next

Here are the commands I ran:

NODE_ENV=production yarn build
NODE_ENV=production yarn start

Here's what the reported error looks like:

Here's the node backtrace:

Here's the application environment section:

@mcAnastasiou could you try out the node-source-maps branch and see if you can get it to work in a test project? Note that you need to have this additional config for it to work properly.

One last thing to note is that Next.js still appears to report some duplicate promise rejections (so you may get two error reports in some cases). You can disable reporting unhandled promise rejections with Honeybadger.configure({ enableUnhandledRejection: false }) (see the docs).

cc @subzero10

[subzero10]

@joshuap I just tried the node-source-maps branch with NODE_ENV=production on my local environment. The errors are reported and the source maps are working as expected (I am ignoring the unhandled promise rejections for now). However, I still can't make it work if I deploy on Vercel.

I also tried changing this line

line.file = line.file.replace(`${ projectRoot }/.next/server/`, 'http://localhost:3000/_next/')

to

line.file = line.file.replace(`${ projectRoot }/.next/server/`, process.env.HONEYBADGER_ASSETS_URL)

[BethanyBerkowitz]

Just a quick update on this:

1. I updated the nextjs example repo to get server-side sourcemaps working: Update example with most recent NextJS and server-side sourcemaps #8. The example is not the most elegant, but it does work and should be helpful for folks trying to get their setup working.
2. I have a ticket out to nextjs / vercel to address the fact that we have not seen server-side errors get reported correctly when deployed to vercel. They get reported correctly locally and when I deploy to Heroku, just not when deployed to Vercel, so I don't think this is something we can fix without their input.

We haven't heard back from @mcAnastasiou in a while. I think I will close this issue in favor of https://github.com/honeybadger-io/docs/issues/190, which should also address the same concerns.

[BethanyBerkowitz]

Closing since I believe this issue is encompassed by https://github.com/honeybadger-io/docs/issues/190 and #8