Hi Team,
Version: Splunk Enterprise v9.2.1
We are trying to capture user generated data so we have created forms with Classic Dashboard utilising HTML, CSS and JS. Our current approach to capturing data is outputting everything to a csv file and then import it back into Splunk. Short term and with little data, this isn't a drama and can we display the data how we want to but I can see the long-term issues (unable to update without outputting the whole file again) so we are looking for different ways to capture this.
One option is KV Stores where we can update the specific information that needs changing, but we are also looking at HEC and ingesting the data directly into Splunk. I am not a front-end expert so I have encountered an issue I'm not sure of how to get by.
We can use curl after allowing the port through out firewall and that returns success, even though Splunk does not ingest, but I want to do this directly via JS. My dashboard is built using HTML and has a <button>, my JS has an EventListener("click", function) which works as we have been using alerts and console.logs while fault finding. It seems to be failing at the fetch:
const data = {
event: "myEvent",
index: "myIndex",
details: {
myDetails
}
};
fetch("https://myServer:8088/services/collection/event", {
method: "POST",
headers: {
"Authorization": "Splunk myToken",
},
body: JSON.stringify(data)
})
But we receive the following error:
Uncaught (in promise) TypeError: Failed to fetch at HTMLButtonElement.submit (eval at _runscript (dashboard)), <anonymous>)
Every online search says to check the URL (which is correct) or the token (which is correct). With the Curl not ingesting and the above error, would anyone have any other suggestions as to what the cause might be?
p.s. While we are still maturing with Splunk, this dashboard and the JS is being run from a Search Head.
Regards,
Ben
I think JavaScript Fetch API is not directly available in splunk dashboard js. But you can try this JS code which is working fone for me.
var settings = {
"url": "https://localhost:8088/services/collector/event",
"method": "POST",
"timeout": 0,
"headers": {
"Authorization": "Splunk hec_token",
"Content-Type": "application/json"
},
"data": JSON.stringify({
"sourcetype": "my_sample_data",
"event": "this is my data!"
}),
};
$.ajax(settings).done(function (response) {
console.log(response);
});
As you are sending events from the browser you should gothrogh below link as well.
I hope this will help you.
Thanks
KV
An upvote would be appreciated if any of my replies help you solve the problem or gain knowledge.
Even if everything else is OK, you're using wrong endpoint. It's "collector", not "collection".
You know when you're just on autopilot when you type things out, you know that what you've typed is wrong but you still type it anyway..? Yeah... corrected that now, but still the same issue 😅
Thank you for pointing that out though, PickleRick, that would've caused another issue down the line.
My shot in the dark would be that you're trying to use fetch() to push events to a server A from a webpage coming from server B. And you're hitting CORS problems.
The original issue was a self-signed cert, which we have now navigated, but you are correct on CORS now.
Just figuring out where we need to make the change and ensure we update with the correct url and then we will see what happens next...
Thank you for the input 👍
Regards,
Ben