title: Unable to transform Angular v9's JavaScript error stack trace from its minified form on RollBar in local environment
body: <p>Just a little background about our app, we have been running our Angular frontend inside the docker container and have a shell script that is responsible to set the environment variables and build the frontend container with the required configuration. While building the frontend we also upload the minified files to our Rollbar server using the command as described in the RollBar docs. So, when we run our app in production we had the following commands to upload them to the Rollbar server. (Note minified_url holds the HTTP path of our app.</p>
  <pre><code>curl https://api.rollbar.com/api/1/sourcemap \
    -F access_token={$RollBar_Access_Token}\
    -F version=$GIT_CURRENT_REVISION\
    -F minified_url=https://example.com/$MINIFIED_JS \
    -F source_map=@dist/webapp/${MINIFIED_JS}.map;
  </code></pre>
  <p>However now in order to replicate the behaviour in the local development environment, we  changed the minified_url to the path inside the container as shown below which points to our minified JS file inside the container(Note $MINIFIED_JS is the variable that holds the name of our minified Js file)</p>
  <pre><code>curl https://api.rollbar.com/api/1/sourcemap \
    -F access_token={$RollBar_Access_Token}\
    -F version=$GIT_CURRENT_REVISION\
    -F minified_url=///front/dist/webapp/$MINIFIED_JS \
    -F source_map=@dist/webapp/${MINIFIED_JS}.map;
  </code></pre>
  <p>After trying this we were successfully able to upload the main.[hash].js file to the Rollbar Server and thought it is going to work fine until we saw the stack trace of an error after we made the above changes. Here is the stack trace. As we see it was unable to resolve it to the lines pointing to our source code thus making it difficult to debug in the local development environment.
  <a href="https://i.stack.imgur.com/cSlHd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cSlHd.png" alt="enter image description here" /></a>
  As you see in the above image it says <strong>&quot;Source map was not available for some minified file&quot;</strong> which made us realize that why it failed to translate. So we went and checked which file it failed to upload and here is the screenshot for the same
  <a href="https://i.stack.imgur.com/SdOOI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SdOOI.png" alt="enter image description here" /></a>
  So,  after many attempts, we thought of just uploading the failed file manually where we attached the source map it wanted, and we put URL as http://localhost/main.[hash].js and the appropriate GIT version of the source code. And yes thing started working fine and it was able to translate the error pointing to our source code.
  Now, we want to know is there any way to do it through our shell script as we do in production so that we do not have to go through the manual process every time we work in the local environment with RollBar. Any help or leads appreciated.</p>
  <p>Articles referred<br>
  <a href="https://medium.com/angular-in-depth/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85" rel="nofollow noreferrer">https://medium.com/angular-in-depth/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85</a>
  <a href="https://pusher.com/tutorials/error-handling-angular-part-4" rel="nofollow noreferrer">https://pusher.com/tutorials/error-handling-angular-part-4</a>
  <a href="https://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html" rel="nofollow noreferrer">https://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html</a></p>