After following the error handler setup in the Vue documentation, I encountered a difference between using it on the development server and in production. The error handler effectively pinpointed the component and line number where the error occurred during development:
https://vuejs.org/guide/best-practices/production-deployment.html#tracking-runtime-errors
app.config.errorHandler = (err, instance, info) => {
console.log(err);
}
However, in a production environment where the code is bundled (using Vite), the error handling became less useful as file names changed and everything seemed to originate from line 1:
ReferenceError: foo is not defined
at ComponentNameButNotWhereErrorHappened.b61810f1.js:1:10588
at Pt (vendor.7753fa93.js:5:656)
at lt (vendor.7753fa93.js:5:735)
at Array._ (vendor.7753fa93.js:5:3255)
at Cl (vendor.7753fa93.js:5:1980)
at pf (vendor.7753fa93.js:5:2249)
This dilemma raised the question of whether there is a method to retain useful information about runtime errors when dealing with production-ready Vue code.