Why Care About Sourcemaps?
Imagine we have a very simple React component, written in ES6. All it does is print “Hello World” and the date it rendered.
To make this component, we’re using ES6 classes, the ES6 import syntax, and we’ve also got a little bit of JSX thrown in for good measure.
Ack! Our beautiful ES6 and JSX syntax has turned in to unreadable muck. What if there’s a bug in this code? How do we fix it? For that matter, where do we fix it?
Enter the Sourcemap
Both Chrome and Firefox currently support the processing of sourcemaps in the developer tools. Additionally, logging & monitoring tools like TrackJS are supporting these maps as well.
You know what else is cool? We can even put breakpoints in the original source code, and Chrome is smart enough to handle that for us!
Sourcemaps Are Awesome, How Do I Use Them?
Let’s go back to our HelloWorld component. We’re using Webpack, so in our case, generating a sourcemap is a simple configuration tweak. Within our webpack config file, we set
devtool: "source-map" and we’re good to go.
bundle.js. By default Webpack will now start producing a
bundle.js.map as well. If you crack open the map file, it’s just a JSON blob. A mostly non-human readable JSON blob. If you’re interested in all the gory details that make up the map file, check out the most current version of the Sourcemap spec.
One other interesting thing happens as we begin generating sourcemaps. At the end of our transpiled file, we now see a weird bit of code
This is the key piece that tells our browser where the sourcemap lives that applies to this particular file. Once this is in place, and the map is present, Chrome will perform the sourcemap replacement magic.
Pretend we have an error in our HelloWorld component. Maybe instead of calling
toLocaleDateString() we accidentally call
toLocalDateString(). Our customers are getting all kinds of white screens because our component isn’t loading.
Chrome and Firefox give you a great development time experience with sourcemaps, but what happens when a customer gets an error in production? You can’t easily ask them to open their console and report the file and line number!
Fortunately, TrackJS automatically loads sourcemaps and applies them to error stack traces for you. (The red dot above the Stack Trace tab appears when a sourcemap was found and automatically applied)
TrackJS Error Report TrackJS Stack Trace with Source Applied
Our servers were able to retrieve, and apply, the sourcemap for the stack trace. You get the actual original ES6/JSX code, and a nice pointer to where exactly the error occurred. You can see we even get a look inside the React source as we move down the stack!
Sourcemaps are an important weapon in the front-end arsenal, and more and more tools are supporting them. If you’re developing with the latest client side technologies, you need to make sure you have an excellent debugging and monitoring story as well! Sourcemaps (and TrackJS) are important keys to ensuring that. Let us help you be awesome at debugging today. Sign up for a free 30 day trial of TrackJS!