CODEWITHSUNDEEP
webpackvue.jsvuejs2
Random5000
Random5000

Reputation: 1680

How to debug production Vue.js 2 compiled code with Webpack / Laravel

When we have JS errors in our production environment, it's close to impossible to identify where the error is located because all of the files are compressed. Are there any best practices when pushing to production, but yet still having a reliable line items to refer to when an error occurs?

Upvotes: 1

Views: 3185

Answers (1)

Harshal Patil
Harshal Patil

Reputation: 21030

Ideally, you should not be debugging in production. But, in rare scenarios, you may need to debug client-side code for any uncaught JS error. Following are the steps if you have to do production debugging:

  1. First and foremost, you need source-maps. So when you are bundling for production, make sure that you are generating them using Webpack devtool property set to source-map. Read more on Webpack website.
  2. By default, source-maps have .map extension. These files should be blocked in the production environment. Whenever browser Dev tools are opened, browsers try to pull source-maps. Ideally, your server should block requests to source-maps.
  3. When you detect a production incidence, then using some config, you should enable source-maps serving from the server. There are various approaches to do this:
    1. Some admin enabling serving of source-maps for a limited time window.
    2. For some production users (typically production sanity users), source-maps should always be enabled.
    3. Injection of special headers that enables serving of source-maps. It could be enabled via cookies. When the application is being loaded, you can add this as query params, JavaScript will pick it up and set it as a header or cookie.

Once, your issue is identified, you should again block serving of source-maps.

Upvotes: 2

Related Questions