How to debug unfriendly errors in Vue production build

Question

I am developing a Laravel/Vuejs(3) app. For error capturing it was decided to use Sentry. The problem is some of the errors in Sentry log are very unfriendly and have no usable stack trace for debugging. Also these “unfriendly” errors are showing only in production environment. Source maps are uploaded correctly.

I tried to reproduce example of such error in console (same in Sentry log) when I am trying to pass empty and incorrect type required property to component.

<search :test=“”…

In development (local) env app doesn’t crash and only show warnings:

[Vue warn]: Template compilation error: v-bind is missing expression. 1386| :test=""

[Vue warn]: Missing required prop: "test" 
  at <Search…

[Vue warn]: Invalid prop: type check failed for prop "test". Expected Object, got String with value "". 
  at <Search

All stack traces are usable and go straight to the needed lines in code.

In production env app crashes:

Uncaught SyntaxError: 34 (at app.js?id=79c2a9c9566c92c78209124eb01cbfb4:2:150910)

With no trace to component name whatsoever.

I suspect the reason for that is Vue production build drops chunks of code for smaller payload size and better performance and there are no options for changing that, am I right?

As data passed to properties is dynamic and differs in development/production environment, so it’s not possible to test everything before releasing, how do you cope with debugging such hardly-traceable errors then?

I'd recommend you add a source map to your production build. It will enable debug tools like Sentry shows the correct stack trace with your source code. You can refer to this link for more information https://dev.to/oyetoket/is-it-safe-to-ship-javascript-source-maps-to-production-34p8 — Duannx, Mar 15 '23 at 04:04

tao · Answer 1 · 2023-03-15T02:30:38.900

The meaningful part of the error is Missing required prop: "test" at <Search….

This means you have a <Search... component with a declared prop test, marked as { required: true }. That component is used without providing a value for test.

By marking a prop as required, you're effectively telling Vue: "Throw an error when this component is used without a value for this property (e.g: :test="/* allowed value */")".

If you don't want the errors, remove required: true from the prop (and provide a default).

In production env app crashes: (...) with no trace to component name whatsoever.

What you want to do is build with source maps on local (for debugging). The exact syntax will depend on whether you're using @vue/cli or vite and whether you're using TypeScript or not.

Once you've built, serve the dist folder using http-server.

As data passed to properties is dynamic and differs in development/production environment, so it’s not possible to test everything before releasing.

That's what unit tests are for. They give you confidence your code doesn't break in any scenario.

how do you cope with debugging such hardly-traceable errors?

I'd argue they're not hard to trace. I've just traced this one using an incomplete error message.
In my estimation, Vue is one of the frameworks with the most helpful error messages out there. And I have considerable experience in React and Angular, for comparison.
You're probably new to Vue and are not yet used to finding the relevant parts. Practice makes perfect.

How to debug unfriendly errors in Vue production build

1 Answers1