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:
<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:
function functionInsideTestFile() {
throw new Error("I am an error, I have good intentions though.")
}
javascript after the minify process:
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:
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:
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:
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
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:
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:
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
Thanks,
Alberto