title: How to setup source map on Sentry
body: <p>I'm using Sentry for error reporting on the React app that I created.</p>
  <p>The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:</p>
  <p><a href="https://i.stack.imgur.com/azMUZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/azMUZ.png" alt="enter image description here" /></a></p>
  <p>I'm using Laravel mix for compiling. The <code>webpack.mix.js</code> looks like this:</p>
  <pre><code>mix
    .react(&quot;resources/js/checkout/CheckoutRoot.js&quot;, &quot;public/js&quot;)
    .version();
  </code></pre>
  <p>I tried using <code>sourceMaps()</code> like so:</p>
  <pre><code>const productionSourceMaps = true;
  
  mix
    .react(&quot;resources/js/checkout/CheckoutRoot.js&quot;, &quot;public/js&quot;)
    .react(&quot;resources/js/checkout/DonationRoot.js&quot;, &quot;public/js&quot;)
    .version()
    .sourceMaps(productionSourceMaps, &quot;source-map&quot;)
  </code></pre>
  <p>But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:</p>
  <pre><code>//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600
  </code></pre>
  <p>But when I pretty print it still results in the same gibberish:</p>
  <p><a href="https://i.stack.imgur.com/g0fIz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g0fIz.png" alt="enter image description here" /></a></p>
  <p>I'm expecting to see it point out to the component file I'm working on locally. Is that possible?</p>
  <p><strong>Update</strong></p>
  <p>I tried installing Sentry's webpack plugin:</p>
  <pre><code>const SentryWebpackPlugin = require(&quot;@sentry/webpack-plugin&quot;);
  
  let config = {
    output: {
      publicPath: &quot;/&quot;,
      chunkFilename: &quot;js/chunks/[name].js?id=[chunkhash]&quot;,
    },
    plugins: [
      new SentryWebpackPlugin({
        // sentry-cli configuration
        authToken: &quot;MY_AUTH_TOKEN&quot;,
        org: &quot;MY_ORG&quot;,
        project: &quot;MY_PROJECT&quot;,
        release: &quot;MY_RELEASE&quot;,
  
        include: &quot;.&quot;,
        ignore: [&quot;node_modules&quot;, &quot;webpack.config.js&quot;],
      }),
    ],
  };
  </code></pre>
  <p>Used the same <code>release</code> when initializing Sentry on my source file:</p>
  <pre><code>Sentry.init({
    dsn: &quot;MY_DSN&quot;,
    release: &quot;testing&quot;,
  });
  </code></pre>
  <p>Put some failing code:</p>
  <pre><code>useEffect(() =&gt; {
    console.bog(&quot;MY_RELEASE&quot;);
  }, []);
  </code></pre>
  <p>Then compiled like usual:</p>
  <pre><code>npm run production
  </code></pre>
  <p>I triggered the error on the browser and I got the expected file in there (<code>MobilePayment.js</code>):</p>
  <p><a href="https://i.stack.imgur.com/qAWYn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qAWYn.png" alt="enter image description here" /></a></p>
  <p>But from Sentry, all I get is this:</p>
  <p><a href="https://i.stack.imgur.com/hMsM7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hMsM7.png" alt="enter image description here" /></a></p>
  <p>I would expect to find <code>MobilePayment.js</code> in there but there's none.
  When compiling, I got this:</p>
  <p><a href="https://i.stack.imgur.com/37YHj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/37YHj.png" alt="enter image description here" /></a></p>
  <p>So I assume it uploaded the sources to Sentry.</p>
  <p>I even tried the same thing using Sentry-cli:</p>
  <pre><code>sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js
  </code></pre>
  <p>And it pretty much did the same thing:</p>
  <p><a href="https://i.stack.imgur.com/PiGKQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PiGKQ.png" alt="enter image description here" /></a></p>
  <p>I then triggered the same error. But I still got the same output from Sentry dashboard. Please help.</p>