Searching for a possible solution to this, and if someone is not specifically using Sentry, I got to this blog post (ironically a Sentry blog post):

https://blog.sentry.io/2015/10/29/debuggable-javascript-with-source-maps.html

Where there is an interesting idea: &quot;private source maps&quot;. It implies generating the source maps in someplace that is not accessible from the internet (such as your company VPN), so only you or your team can access the source maps files. 

Quoting the **&quot;Private Source Maps&quot;** section of the post:

&gt;    [...] all of our examples assume that your source maps are publicly available, and served from the same server as your executing JavaScript code. In which case, any developer can use them to obtain your original source code.
&gt;
&gt; To prevent this, instead of providing a publicly-accessible sourceMappingURL, you can instead serve your source maps from a server that is only accessible to your development team. For example, a server that is only reachable from your company’s VPN.
&gt;
&gt;//# sourceMappingURL: http://company.intranet/app/static/app.min.js.map
&gt;
&gt;When a non-team member visits your application with developer tools open, they will attempt to download this source map but get a 404 (or 403) HTTP error, and the source map will not be applied.

Seems like a good idea to me! 

Your primary concerns will be &quot;is it ok if the user has my source code?&quot; Usually it is fine, as users can deobfuscate things anyways.

That said, if you&#39;re using Sentry, you can actually use the [releases API][1] to avoid this problem. You&#39;ll still need to generate the artifacts, and set URLs (or something that the API can handle), but you don&#39;t have to expose them to the internet.


  [1]: https://gist.github.com/dcramer/619d53dabfbc2ed008a1

I&#39;m building a set of code diagnostics using Roslyn (in VS2015 Preview). Ideally, I&#39;d like any errors they produce to act as persistent errors, just as if I were violating a normal language rule.

There are a bunch of options, but I&#39;m having a hard time getting any of them to work consistently. I&#39;ve managed to implement a rudimentary syntax node action, i.e. one registered with 

    context.RegisterSyntaxNodeAction(AnalyzeSyntaxNode, SyntaxKind.InvocationExpression);

in the `Initialize` method of my diagnostic class. Lo and behold, when I open up a file which violates this diagnostic (while running the VSIX project), VS2015 shows an error:

- Red squiggle under the right bit of code
- Red block in the margin
- Error in the error list

However, the error goes away when I close the file.

I&#39;ve tried using `context.RegisterCompilationEndAction` as well, but this has two problems:

- It seems to fire inconsistently. *Usually* when I open the solution it fires, but not always. It doesn&#39;t fire on a clean/rebuild, which seems odd.
- Although diagnostics created *directly* in the analysis method fire, in order to implement the diagnostics I&#39;m using a visitor, like this - which may be inept:

        private static void AnalyzeEndCompilation(CompilationEndAnalysisContext context)
        {
            foreach (var tree in context.Compilation.SyntaxTrees)
            {
                var visitor = new ReportingVisitor(context.Compilation.GetSemanticModel(tree));
                visitor.Visit(tree.GetRoot());
                foreach (var diagnostic in visitor.Diagnostics)
                {
                    context.ReportDiagnostic(diagnostic);
                }
            }
        }

 I know that the diagnostics are being created - a breakpoint on the `ReportDiagnostic` line is hit several times - but I&#39;m not seeing anything in the error list. (Whereas a similar `ReportDiagnostic` call at the start of the method, or one per syntax tree with the file path, *does* get shown.)

What am I doing wrong here? The first approach (a syntax node action) would be ideal if feasible - it gives me exactly the context I need. Is there some setting in the project properties that I need to make the compiler use that for &quot;full project&quot; compilation as well as just interactive &quot;in the IDE&quot; handling? Is this perhaps just a bit of Roslyn integration which isn&#39;t quite finished yet?

(I can include the full code for the class if it would be useful - in this case I suspect it would be more noise than signal though.)

How can I make my code diagnostic syntax node action work on closed files?

I had some issues trying to install Node on Windows 10 and found the solution.

The error was as follows:

&gt;C:\Users\Stephan&gt;npm&lt;br&gt;
Error: ENOENT, stat &#39;C:\Users\Stephan\AppData\Roaming\npm&#39;

The solution is below.

Installing Node.js (and npm) on Windows 10

I&#39;m using [UglifyJS][1] to minify and uglify my sources, and [Sentry][2] to report errors from my production environment.

In order to get errors from Sentry, in a readable manner, I need to add source-map 

Is it safe to do it in production servers, or the source-maps files should only exist on staging environment?  
Is there a way to secure them on production environment?

  [1]: https://github.com/mishoo/UglifyJS2
  [2]: https://www.getsentry.com/docs/sourcemaps/

Source maps files in production - Is it safe?

I'm using <a href="https://github.com/mishoo/UglifyJS2" target="_blank" rel="noopener noreferrer">UglifyJS</a> to minify and uglify my sources, and <a href="https://www.getsentry.com/docs/sourcemaps/" target="_blank" rel="noopener noreferrer">Sentry</a> to report errors from my production environment.
In order to get errors from Sentry, in a readable manner, I need to add source-map
Is it safe to do it in production servers, or the source-maps files should only exist on staging environment? 
Is there a way to secure them on production environment?

I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, especially when I want a comparison to chart.js.

I have found this: http://www.fusioncharts.com/javascript-charting-comparison/
but it is not what I was looking for.

Does anyone know about a comparison of these frameworks in terms of usability and performance (only for charts)?

Comparison between d3.js and chart.js (only for charts)

For a project of mine (see [BigPictu.re][1] or [bigpicture.js GitHub project][2]), I have to deal with potentially a very, very, very big `&lt;div&gt;` container.

I knew there was a risk of poor performance with the simple approach I use, but I did not expect it to be mostly present with ... Chrome only!

If you test [this small page][3] (see code below), panning (click + drag) will be:

* Normal / smooth on Firefox
* Normal / smooth even on Internet Explorer
* Very slow (nearly crashing) on Chrome!

Of course, I could add some code (in my project) to do that when you&#39;re zoomed in a lot, text with potentially very very big font-size would be hidden. But still, **why does Firefox and Internet&amp;nbsp;Explorer handle it correctly and not Chrome?**

**Is there a way in JavaScript, HTML, or CSS to tell the browser *not to try* to render the whole page (which is 10000 pixels wide here) for every action?** (only render the current viewport!)

____

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
        &lt;head&gt;
            &lt;meta charset=&quot;utf-8&quot;&gt;
            &lt;style&gt;
                html, body {
                    overflow: hidden;
                    min-height: 100%; }

                #container {
                    position: absolute;
                    min-height: 100%;
                    min-width: 100%; }

                .text {
                    font-family: &quot;Arial&quot;;
                    position: absolute;
                }
            &lt;/style&gt;
        &lt;/head&gt;

        &lt;body&gt;
            &lt;div id=&quot;container&quot;&gt;
                &lt;div class=&quot;text&quot; style=&quot;font-size: 600px; left:100px; top:100px&quot;&gt;Small text&lt;/div&gt;
                &lt;div class=&quot;text&quot; style=&quot;font-size: 600000px; left:10000px; top:10000px&quot;&gt;Very big text&lt;/div&gt;
            &lt;/div&gt;

            &lt;script&gt;
                var container = document.getElementById(&#39;container&#39;), dragging = false, previousmouse;
                container.x = 0; container.y = 0;

                window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }

                window.onmouseup = function() { dragging = false; }

                window.ondragstart = function(e) { e.preventDefault(); }

                window.onmousemove = function(e) {
                    if (dragging) {
                        container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
                        container.style.left = container.x + &#39;px&#39;; container.style.top = container.y + &#39;px&#39;;
                        previousmouse = {x: e.pageX, y: e.pageY};
                    }
                }
            &lt;/script&gt;
        &lt;/body&gt;
    &lt;/html&gt;

  [1]: http://bigpictu.re/demo
  [2]: http://github.com/josephernest/bigpicture.js/
  [3]: http://gget.it/caveot4g/big-div-test.html


A very, very, very big div

If I create an `iframe` like this: 

    var dialog = $(&#39;&lt;div id=&quot;&#39; + dialogId + &#39;&quot; align=&quot;center&quot;&gt;&lt;iframe id=&quot;&#39; + frameId + &#39;&quot; src=&quot;&#39; + url + &#39;&quot; width=&quot;100%&quot; frameborder=&quot;0&quot; height=&quot;&#39;+frameHeightForIe8+&#39;&quot; data-ssotoken=&quot;&#39; + token + &#39;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&#39;).dialog({

How can I fix the error:

&gt; Refused to display `&#39;https://www.google.com.ua/?gws_rd=ssl&#39;` in a frame because it set &#39;X-Frame-Options&#39; to &#39;SAMEORIGIN&#39;.

with JavaScript?

How to set &#39;X-Frame-Options&#39; on iframe?

I have a object like that one:

    Object {a: 1, b: 2, undefined: 1} 

How can I quickly pull the largest value identifier (here: `b`) from it? I tried converting it to array and then sorting, but it didn&#39;t work out, since it got sorted alphabetically (and it seems like a overkill to juggle data back and forth just for getting one value out of three).

Getting key with the highest value from object

Why does object destructuring throw an error if there is no `var` keyword in front of it?

    {a, b} = {a: 1, b: 2};

throws `SyntaxError: expected expression, got &#39;=&#39;`

The following three examples work without problems

    var {a, b} = {a: 1, b: 2};
    var [c, d] = [1, 2];
        [e, f] = [1, 2];

Bonus question: Why do we not need a `var` for array destructuring?


I ran into the problem doing something like
  
    function () {
      var {a, b} = objectReturningFunction();

      // Now a and b are local variables in the function, right?
      // So why can&#39;t I assign values to them?

      {a, b} = objectReturningFunction();
    }

Object destructuring without var, let or const

I am trying to remove `console.logs` with Webpack&#39;s Uglify plugin but it seems that Uglify plugin that comes bundled with Webpack doesn&#39;t have that option, its not mentioned in the documentation.

I am initializing uglify from webpack like this: 

    new webpack.optimize.UglifyJsPlugin()

My understanding is that I can use standalone Uglify lib to get all the options, but I don&#39;t know which one?

The problem is that `drop_console` isn&#39;t working.

Remove console.logs with Webpack &amp; Uglify

I&#39;m logging JS client errors using Sentry and there&#39;s a lot of `TypeError: cancelled` errors. It&#39;s only occurring on iOS. I can&#39;t find anything on Google. Is this a native Javascript error or something else? What does it mean?

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/AqSsV.png

I also get similar errors in other languages, such as `취소됨`, `Abgebrochen`, and `cancelado`. This tells me that the error isn&#39;t raised by my code.

Javascript &quot;TypeError: cancelled&quot; error when calling &quot;fetch&quot; on iOS

I&#39;m new to webpack, and I need a hand in setting up to generate sourcemaps. I&#39;m running `webpack serve` from the command line, which compiles successfully. But I really need sourcemaps. This is my `webpack.config.js`.


    var webpack = require(&#39;webpack&#39;);

    module.exports = {
    
      output: {
        filename: &#39;main.js&#39;,
        publicPath: &#39;/assets/&#39;
      },
    
      cache: true,
      debug: true,
      devtool: true,
      entry: [
          &#39;webpack/hot/only-dev-server&#39;,
          &#39;./src/components/main.js&#39;
      ],
    
      stats: {
        colors: true,
        reasons: true
      },
    
      resolve: {
        extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;],
        alias: {
          &#39;styles&#39;: __dirname + &#39;/src/styles&#39;,
          &#39;mixins&#39;: __dirname + &#39;/src/mixins&#39;,
          &#39;components&#39;: __dirname + &#39;/src/components/&#39;,
          &#39;stores&#39;: __dirname + &#39;/src/stores/&#39;,
          &#39;actions&#39;: __dirname + &#39;/src/actions/&#39;
        }
      },
      module: {
        preLoaders: [{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: &#39;jsxhint&#39;
        }],
        loaders: [{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: &#39;react-hot!babel-loader&#39;
        }, {
          test: /\.sass/,
          loader: &#39;style-loader!css-loader!sass-loader?outputStyle=expanded&amp;indentedSyntax&#39;
        }, {
          test: /\.scss/,
          loader: &#39;style-loader!css!sass&#39;
        }, {
          test: /\.(png|jpg|woff|woff2)$/,
          loader: &#39;url-loader?limit=8192&#39;
        }]
      },
    
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ]
    
    };

I&#39;m really new to webpack, and looking though the docs hasn&#39;t really helped as I&#39;m not sure what this problem is specific to.

How do I generate sourcemaps when using babel and webpack?

Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?

Disable source maps in Chrome DevTools

My react folder structure is as below

[![enter image description here][1]][1]



   

I&#39;ve not used the create-react-app version. I tried using `GENERATE_SOURCEMAP=false`. But It didn&#39;t work.

Where can I find the .map files. How can I delete those files?

I cannot find a build folder.
I&#39;ve tried using the below script But It cannot work in removing source maps 

     &quot;scripts&quot;: {
    
        &quot;start&quot;: &quot;react-scripts start&quot;,
       &quot;build&quot;: &quot;GENERATE_SOURCEMAP=false &amp;&amp; npm run build&quot;,
        &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;
      },


  [1]: https://i.stack.imgur.com/cH8sj.png

How to disable source maps for React JS Application

### My code

```lang-html
&lt;html&gt;
  &lt;head&gt;
    &lt;!-- Load TensorFlow.js --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow/tfjs&quot;&gt;&lt;/script&gt;
    &lt;!-- Load Posenet --&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;

  &lt;body&gt;
    &lt;img id=&#39;cat&#39; src=&#39;./pose/images/aa_085.jpg&#39;/&gt;
  &lt;/body&gt;
  &lt;!-- Place your code in the script tag below. You can also use an external .js file --&gt;
  &lt;script&gt;
    var flipHorizontal = false;

    var imageElement = document.getElementById(&#39;cat&#39;);

    posenet.load().then(function(net) {
      const pose = net.estimateSinglePose(imageElement, {
        flipHorizontal: true
      });
      return pose;
    }).then(function(pose){
      console.log(pose);
    })
  &lt;/script&gt;
&lt;/html&gt;
```

I rarely use HTML and JavaScript and almost forget the most fundamentals. What is the error? 

### Error information

&gt; [DevTools][1] failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

  [1]: https://developers.google.com/web/tools/chrome-devtools/



Content Type	Original Author	Original Content on Stackoverflow
Question	Ofer Velich	View Question on Stackoverflow
Solution 1 - Javascript	John Bernardsson	View Answer on Stackoverflow
Solution 2 - Javascript	David Cramer	View Answer on Stackoverflow

Source maps files in production - Is it safe?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Installing Node.js (and npm) on Windows 10

How can I make my code diagnostic syntax node action work on closed files?

Attributions