# Uploading sourcemaps from AIX webserver

**URL:** <https://discuss.elastic.co/t/uploading-sourcemaps-from-aix-webserver/303526>\
**Category:** APM\
**Tags:** rum\
**Created:** [April 28, 2022, 2:35pm UTC](https://discuss.elastic.co/t/uploading-sourcemaps-from-aix-webserver/303526 "2022-04-28T14:35:01Z")\
**Posts on this page:** 1\
**Showing post:** 15

<div class="post-metadata">

**Author:** ![Alberto\_Delgado](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/alberto_delgado/32/98488_2.png) [@Alberto\_Delgado](https://discuss.elastic.co/u/Alberto_Delgado)\
**Post date:** [June 16, 2022, 11:10am UTC](https://discuss.elastic.co/t/uploading-sourcemaps-from-aix-webserver/303526/15 "2022-06-16T11:10:48Z")

</div>

Hi @Hamunaptroid,

Yes, `intake/v2/rum/events` endpoint is not related to sourcemaps.

I set up an example that I hope helps you:

Versions used on the example:

**APM Server** : 7.17  
**RUM agent:** 5.12.0

**html** :

```auto
<html>
    <head>
        <title>source map test</title>
    </head>
    <body>
        <button id="error-button">click to generate an error</button>
        <h1>Welcome to the sourcemap test page</h1>
        <script src="https://unpkg.com/@elastic/apm-rum@5.12.0/dist/bundles/elastic-apm-rum.umd.min.js" crossorigin></script>
        <script src="test.min.js"></script>

        <script type="text/javascript">
            document.getElementById('error-button').addEventListener('click', function handleClick() {
                functionInsideTestFile()
            })
            var agent = elasticApm.init({
                serviceName: 'sourcemap_test_7_17',
                serviceVersion: 'sourcemap_test_7_17_version',
                serverUrl:"http://localhost:8200"
            })
    </script>
    </body>
</html>

```

javascript file before the minify process:

```auto
function functionInsideTestFile() {
    throw new Error("I am an error, I have good intentions though.")
}

```

javascript after the minify process:

```auto
function functionInsideTestFile(){throw new Error("I am an error, I have good intentions though.")}
//# sourceMappingURL=http://localhost:1111/sourcemap_test_7_17/test.min.js.map

```

Command executed to create the minification and map:

```auto
npx terser test.js --compress --mangle -o test.min.js --source-map "url='http://localhost:1111/sourcemap_test_7_17/test.min.js.map'"

```

Note: localhost:1111 corresponds to my local dev server.

Case 1:

If I trigger the error without uploading the sourcemap, we are going to see this on Kibana:

 ![Screenshot 2022-06-16 at 12.02.02](https://us1.discourse-cdn.com/elastic/original/3X/6/3/638f50c443cb3458e3b5c79f26d7faf05f858d7b.png)

As you can see there, the UI refers to the minified file `test.min.js` and **colNumber 41**

--

Now if we want to see the stacktrace related to the original file, what we need to do is to upload the sourcemap (I'm sharing the two common strategies):

**Using CURL:**

```auto
curl -i -X POST http://localhost:8200/assets/v1/sourcemaps \
--header 'Authorization: ApiKey TUVVRWJJRUJoRHdOVXN6WFJRWEw6NF93MGNFQlBTRkdhXzFITy1SZkVpdw==' \
--header 'Content-Type: multipart/form-data' \
--form service_name="sourcemap_test_7_17" \
--form service_version="sourcemap_test_7_17_version" \
--form bundle_filepath="http://localhost:1111/sourcemap_test_7_17/test.min.js" \
--form sourcemap="@test.min.js.map"

```

**USING node.js script**

```auto
const fs = require('fs')
const request = require('request')

function uploadSourcemap() {
     const headers = {
       'Content-Type': 'multipart/form-data',
       Authorization: "ApiKey TUVVRWJJRUJoRHdOVXN6WFJRWEw6NF93MGNFQlBTRkdhXzFITy1SZkVpdw=="
     }

     const sourcemapPath = 'test.min.js.map'

     const formData = {
       sourcemap: fs.createReadStream(sourcemapPath),
       service_version: 'sourcemap_test_7_17_version',
       bundle_filepath:
         'http://localhost:1111/sourcemap_test_7_17/test.min.js',
       service_name: 'sourcemap_test_7_17'
     }

     request.post(
       {
         url: 'http://localhost:8200/assets/v1/sourcemaps',
         formData,
         headers
       },
       function (err, resp, body) {
         if (err || (resp.statusCode !== 200 && resp.statusCode !== 202)) {
           var message = `Error while uploading sourcemap, error: ${err}, response: ${
             resp && resp.statusCode
           }, body: ${body}`
           console.log(message)
         } else {
           console.log("sourcemap upload properly!")
         }
       }
     )
}

uploadSourcemap();

```

Okay, now, after doing this. If I go to the webpage and **I trigger the error again** , that's what I can see on Kibana:

 ![Screenshot 2022-06-16 at 13.04.38](https://us1.discourse-cdn.com/elastic/original/3X/7/f/7fec25cdfc6ebe9f81afe0890c64117dc460d1c5.png)

Now we are seeing the UI referring to the **unminified** file "test.js" and the proper **lineno** and **colno**.

By the way, this is how my local project structure looks like:

![Screenshot 2022-06-16 at 13.07.57](https://us1.discourse-cdn.com/elastic/original/3X/3/0/3043274efbfd9a4ba4c63235411c4483cf433f36.png)

**How to create an api key using Kibana**

If you need it, the link below is pretty helpful. I have followed the instructions there when I was working on the example

> **[API Keys | Kibana Guide \[master\] | Elastic](https://www.elastic.co/guide/en/kibana/master/api-keys.html)**
>
> Conceptual and step-by-step procedures for using runtime fields, scripted fields, and field formatters.

Thanks,  
Alberto

---

_[View the full topic](https://discuss.elastic.co/t/uploading-sourcemaps-from-aix-webserver/303526)._