SPFx - Learning And Findings - Part Three

This post is about my learnings and findings in SPFx.

Introduction 

 

Hello everyone, this is part 3 of my series. Below are the earlier series:

• SPFx - Learning And Findings - Part Two
• SPFX - Learning And Findings - Part One

Most of you may have faced issues in production after deployment, but since the files are minified, it is very difficult to debug or find the error. In this series, we will see how to generate a source map and use it for debugging. I had the issue and I tried to find out the solution. There is a very good article on sourcemap and debugging by Waldek Mastykarz, which is as follows:

• debug production version

This article is good and will give you a lot of information, but the problem is that it applies to an older webpack version. Webpack 4+ uses Terser plugin to minify. In this article, we will learn how to generate a sourcemap for a  newer webpack version. For an older one, you can refer to the Waldek article.

 

SPFx Source Map Generation (applies to Webpack 4+)

 

To enable sourcemap generation for --ship/production version, we need to add the below code in gulpfile.js before “build.initialize(gulp);”

//When you pass --ship in gulp it sets process.env.NODE_ENV to production so we are checking that.
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {

    var envmode = "";
    for (var i = 0; i < generatedConfiguration.plugins.length; i++) {
      var plugin = generatedConfiguration.plugins[i];
      if (plugin instanceof webpack.DefinePlugin) {
        envmode = plugin.definitions["process.env.NODE_ENV"];
        break;
      }
    }
    if (envmode && envmode == '"production"') {
        //setting the webpack configuration to generate sourcemap
       generatedConfiguration.devtool = 'source-map';

       //setting the terser plugin configuration to enable sourcemap.
      const TerserPlugin = require('terser-webpack-plugin');
//removing the existing terser plugin object
      generatedConfiguration.optimization.minimizer.pop();
//adding the new object with source map true
      generatedConfiguration.optimization.minimizer.push(new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
      }));
    }

    return generatedConfiguration;
  }
});

Run the below line:

gulp bundle –ship

You will see that the .map file is generated in the “dist” folder. This file has the source code and will be used for debugging.

 

This file should be placed in such a location that can be accessed by the browser. It can be a local node server or any web server. For my debugging, I am using SharePoint. I am uploading the file in the document library of the site so that it is easily accessed by the browser. Once my debugging is completed, I will delete the file so that no one has access.

 

Debugging using the map file 

 

Open your Production site in Chrome. Press F12 or open the developer toolbar. Click on the Sources tab. On the left navigation, find your js file as highlighted below:

 

 

Put a breakpoint in the first line that is near define.

 

 

Reload the page to hit the breakpoint. Once the breakpoint is hit, right-click inside the file, and you will see the following options.

 

 

Click on "Add source map" and you will see the following screen:

 

 

 

Enter the absolute URL of your uploaded source map and click on Add. Once the browser successfully loads the source map file, you will see an additional folder on the left-hand side, as shown in the below screen:

 

 

Expand the folder. Expand the second-level by clicking. You will see your src folder.

 

 

 

Expand the src folder and you will see the files. Click on the file you want to debug.The file will open. Put a breakpoint on the line as highlighted below.

 

 

Once the breakpoint is put resume the script execution by clicking F8 or play arrow. You will find that the breakpoint is hit and now you can debug easily.

 

Note

If you reload the page, you need to do the steps again to create a breakpoint.

 

To avoid these steps again and again for refreshing, another way is to use fiddler. If you are familar with fiddler, then you can use autoresponder and modify the response.

 

Fiddler steps

• Save the actual response (Decrypt it if it is https).
• Edit the response in notepad.
• At the end, you will find "//# sourceMappingURL ". Remove the whole line
• Add "//# sourceURL=<<absoluteurl of file>>" in the file.
• Save and close the file.
• Create AutoResponser rule to load this response when a JS request is made.

If it is successful, you will see the folder automatically created in the left navigation.

 

As you see there are various ways to load sourcemap in the browser. I have specified two of them, but you can let me know other ways, like using 'X-Sourcemap' in the comment section.