Dashboards & Visualizations

Source maps for html dahsboards (create-react-app)

aprummer
Explorer

we are using create-react-app to develop our HTML-Dashboards. I guess my source maps are not working, because all assets a have the following code pre-pended:

// Translations for en_US
i18n_register({"catalog": {}, "plural": function(n) { return n == 1 ? 0 : 1; }});
  • Has someone the same problem?
  • Can you load the assets without this prefix?
  • Any quick way to configure create-react-app/webpack to have matching source maps again?
0 Karma
1 Solution

aprummer
Explorer

I didn't find any way to stop splunk from injecting those lines.

I fixed my problem with injecting 6 empty lines (on my instance it where six lines, which got injected) to the generated source-map.

see https://gist.github.com/prumand/73ae1a01d22029d7969ce8a5dcaa453d

View solution in original post

0 Karma

aprummer
Explorer

I didn't find any way to stop splunk from injecting those lines.

I fixed my problem with injecting 6 empty lines (on my instance it where six lines, which got injected) to the generated source-map.

see https://gist.github.com/prumand/73ae1a01d22029d7969ce8a5dcaa453d

0 Karma

pgoldweic
Communicator

I'm also interested in developing dashboards using create-react-app (for Splunk enterprise). Would you mind sharing some basic information for how you're doing this? (e.g. how do you go about importing the Splunkjs libraries and configuring them within your files, etc.). Also, if you were able to resolve your issue, would you mind posting that too? Thanks in advance.

0 Karma

aprummer
Explorer

Unfortunately I didn't find a way yet.

We have a rather interactive app, so we just used rxjs for polling and fire oneshot queries without using the sdk. I'm happy to share that with you. There are no pms here?

0 Karma

pgoldweic
Communicator

I see. I'm not familiar with rxjs so it probably wouldn't help much if you shared at this time. But thanks! BTW, just in case you didn't see it, here's the only other post I found that mentions the use of Splunk sdks with react: https://answers.splunk.com/answers/526322/how-to-use-reactjs-component-in-splunk-dashboard.html.

0 Karma

niketn
Legend

@aprummer have you checked out Splunk Developer Cloud which was announced as Splunk Next Beta last year during .Conf? It is based on react-ui : https://www.splunk.com/blog/2018/10/16/splunk-dashboards-ui-in-the-new-splunk-developer-cloud-sdc-be...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

aprummer
Explorer

Thanks for the link, but I think that doesn't help me.

I use the bundler to create the js file, so the source maps wouldn't work anyway.

0 Karma
Get Updates on the Splunk Community!

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk

Tuesday, May 14, 2024  |  11AM PT / 2PM ET Register to Attend Join us for this Tech Talk and learn how to ...

.conf24 | Personalize your .conf experience with Learning Paths!

Personalize your .conf24 Experience Learning paths allow you to level up your skill sets and dive deeper ...

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...