How to get a meaningful error message in ErrorBoundary?

[ric980]

Hello,

I am using an error notification system and send all errors captured in my ErrorBoundary in the root.tsx to it? The thing is that the error message is blank and the stack trace it this one:

Error
    at ErrorBoundary ([PROJECT_ROOT]/build/index.js:315:29)
    at Uc ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:70:44)
    at Xc ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:72:253)
    at Z ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:78:89)
    at Xc ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:76:231)
    at Z ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:78:89)
    at Xc ([NODE_MODULES]/react-dom/cjs/react-dom-server.node.production.min.js:76:231)

So, I end up with nothing. How can I trace more info about my error. The route that threw the error would be a good start.

Thanks.

[kiliman]

You should use the handleError export from entry.server.tsx

This will get the error before the ErrorBoundary.

https://remix.run/docs/en/main/file-conventions/entry.server#handleerror

[ric980]

Now it's much better:

Error: 
    at generateStackTrace (/app/node_modules/@honeybadger-io/core/build/src/util.js:431:15)
    at Honeybadger.Client.makeNotice (/app/node_modules/@honeybadger-io/core/build/src/client.js:244:61)
    at Honeybadger.Client.notify (/app/node_modules/@honeybadger-io/core/build/src/client.js:139:27)
    at notify (/app/build/index.js:52:60)
    at handleError (/app/build/index.js:114:29)
    at handleError (/app/node_modules/@remix-run/server-runtime/dist/server.js:73:32)
    at /app/node_modules/@remix-run/server-runtime/dist/server.js:186:9
    at Array.forEach (<anonymous>)
    at handleDocumentRequestRR (/app/node_modules/@remix-run/server-runtime/dist/server.js:183:35)
    at requestHandler (/app/node_modules/@remix-run/server-runtime/dist/server.js:93:18)

I had no idea if it's a problem in Remix or in my app. How people troubleshoot problems in the JS world is beyond me.

[ric980]

Ok. I found my answer - source maps. Thanks again.

[kiliman]

Yes. By default Remix doesn't include source maps on production builds, because the map file also contains your server code, which would be downloaded to the browser.

Typically if you're using a service like Sentry, you would generate source maps and upload them to Sentry, then delete them from your build output. That way error logs will have the mapped info, but browsers won't get your source code.

Perhaps with the move to Vite, we'll be able to generate production source maps that will strip out server code for the client bundle.