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?
1 Answer
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:
- First and foremost, you need
source-maps. So when you are bundling for production, make sure that you are generating them using Webpackdevtoolproperty set tosource-map. Read more on Webpack website. - By default, source-maps have
.mapextension. 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. - 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:
- Some admin enabling serving of source-maps for a limited time window.
- For some production users (typically production sanity users), source-maps should always be enabled.
- 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.
devinstead ofbuildso you still get: console logs, alerts, warnings, source mapping, etc. If you absolutely must, you can change thesource mapoutput so you can see the code as is.