Dashboards & Visualizations

Why am I Receiving "A custom JavaScript error caused an issue loading your dashboard"?

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hello Splunkers,

I'm sharing a temporary solution for "A custom JavaScript error caused an issue loading your dashboard"  popup message when your dashboard has any console errors.

 

Screenshot 2022-11-02 at 5.02.50 PM.png

Screenshot 2022-11-02 at 5.03.15 PM.png

 

Basically, this error message indicates that there is some javascript error during the execution of the script and you can easily check by doing inspect as well. 

Before applying this solution I suggest identifying the javascript error and resolve in case there is scope.  Bcoz it may impact the logic. 

If you are trying to resolve this issue and taking time then this temporary solution is good for you 🙂 

This is a Javascript-based solution, which overrides the popup container and makes it empty whenever it tries to populate with the error message.

 You can put this JS Code in your dashboard's Custom JS file or create the common file and use it in multiple dashboards.

 

 

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    console.log($('[data-test="layer-container"]'));
    
    $('[data-test="layer-container"]').on('DOMSubtreeModified', function(){
        console.log('changed two');
        $('[data-test="layer-container"]').empty();
    });

    $('[data-test="layer-container"]').empty();
});

 

 

 

 

Screenshot 2022-11-02 at 5.17.47 PM.png

 

I have tried this with Splunk Enterprise Version: 9.0.2 Build: 17e00c557dc1. In case you find any difficulties please let us know.

 

I hope this will help you.


Happy Splunking

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

Labels (1)
Tags (1)
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@spkriyaz @Zer0sss 

Can you please try this? Now no other code will be impacted.

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
    $('[data-test="layer-container"]').on('DOMSubtreeModified', function () {
        console.log('changed two');
        if ($('[aria-label="Toast messages container"]')) {
            console.log("Toast messages container cleared");
            $('[aria-label="Toast messages container"]').empty();
        }
    });
});

 

Please check & confirm with your code.

 

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@spkriyaz @Zer0sss 

Can you please try this? Now no other code will be impacted.

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
    $('[data-test="layer-container"]').on('DOMSubtreeModified', function () {
        console.log('changed two');
        if ($('[aria-label="Toast messages container"]')) {
            console.log("Toast messages container cleared");
            $('[aria-label="Toast messages container"]').empty();
        }
    });
});

 

Please check & confirm with your code.

 

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

spkriyaz
Path Finder

Hi @kamlesh_vaghela ,

This solution worked. Thanks! 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Glad to help you @spkriyaz

0 Karma

spkriyaz
Path Finder

Hi @kamlesh_vaghela ,

I used your javascript it restricted the error popping out from the dashboard but it impacts the filter that are in the dashboard. The filter dropdown doesn't work and after few clicks the filter vanishes. I have copied the console details below.

spkriyaz_0-1687453575604.png

spkriyaz_1-1687453724897.png

spkriyaz_2-1687453774853.png

 

0 Karma

Zer0sss
Loves-to-Learn Lots

Hello @kamlesh_vaghela , I'm tried your solution, but this script also disables drop down list from input of dashboard. Sometimes make this input disappear from dashboard.

Do you have any idea about it. Or Have you resolve "A custom JavaScript error caused an issue loading your dashboard."?

I'm looking forward to hearing from you. 

Thank you very much.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Zer0sss 

Can you please share your sample XML and JS code?

KV

0 Karma

Zer0sss
Loves-to-Learn Lots

@kamlesh_vaghela

I am using your JavaScript code and embedding it into this XML.

When I insert your JavaScript code, all the dropdowns and mutilselect of the inputs do not display. Almost all dashboards are affected by this issue.

Here is my XML

<form version="1.1" script="pci_view_filters.js,pci_communication_rule_activity.js">
  <label>Firewall Rule Activity</label>
  <fieldset autoRun="true" submitButton="true">
    <input id="rule_id" token="rule" type="text">
      <label>Rule</label>
      <prefix>rule="</prefix>
      <suffix>"</suffix>
      <default></default>
    </input>
    <input id="dvc_id" token="dvc" type="text">
      <label>Device</label>
      <prefix>dvc="</prefix>
      <suffix>"</suffix>
      <default></default>
    </input>
    <input id="category_id" token="category_form" type="multiselect">
      <label>Category</label>
      <choice value="">All</choice>
      <search>
        <earliest>-1s</earliest>
        <latest>now</latest>
        <query>| `categories`</query>
      </search>
      <fieldForLabel>category</fieldForLabel>
      <fieldForValue>category</fieldForValue>
      <default>pci</default>
      <delimiter> OR </delimiter>
      <valuePrefix>`get_category(</valuePrefix>
      <valueSuffix>)`</valueSuffix>
      <prefix>(</prefix>
      <suffix>)</suffix>
    </input>
    <input id="pci_domain_id" token="pci_domain_form" type="multiselect">
      <label>PCI Domain</label>
      <choice value="">All</choice>
      <search>
        <earliest>-1s</earliest>
        <latest>now</latest>
        <query>| `pci_domains`</query>
      </search>
      <fieldForLabel>pci_domain</fieldForLabel>
      <fieldForValue>pci_domain</fieldForValue>
      <default></default>
      <delimiter> OR </delimiter>
      <valuePrefix>`get_pci_domain(</valuePrefix>
      <valueSuffix>)`</valueSuffix>
      <prefix>(</prefix>
      <suffix>)</suffix>
    </input>
    <input id="zero_activity_rules_id" token="zero_activity_rules" type="checkbox">
      <label></label>
      <choice value="0">Rules Without Activity</choice>
      <prefix>Total=</prefix>
      <suffix></suffix>
      <default></default>
    </input>
  </fieldset>
  <row>
    <panel>
      <table id="table1">
        <title>Activity By Month</title>
        <search>
          <query>| `communication_rule_tracker` 
                        | search $rule$ $dvc$ $category$ $pci_domain$
                        | appendpipe [dedup rule,dvc,vendor_product 
                        | expectedactivity append=F fields="dvc,rule,vendor_product" earliest=-15778463s latest=+0s interval=2160000 
                        | convert timeformat="%m" ctime(_time) as month 
                        | convert timeformat="%Y" ctime(_time) as year] 
                        | eval date=month."-01-".year 
                        | convert timeformat="%m-%d-%Y" mktime(date) as _time 
                        | `daysago(213)`  
                        | convert timeformat="%B" ctime(_time) as month 
                        | fillnull value=0 count 
                        | eval date=month." (".year.")" 
                        | eval drvp=rule."|".dvc." (".vendor_product.")" 
                        | chart sum(count) as count over drvp by date 
                        | makemv delim="|" drvp 
                        | sorttimecols timeformat="%B (%Y)" direction=asc 
                        | makemv delim="|" drvp 
                        | rename drvp as rule 
                        | addtotals 
                        | sort - Total 
                        | search $zero_activity_rules$
                        | fields - Total</query>
        </search>
        <option name="count">10</option>
        <option name="wrap">true</option>
        <option name="drilldown">row</option>
        <drilldown>
          <link>search?q=| from inputlookup:communication_rule_tracker | eval drvp=rule.",".dvc." (".vendor_product.")" | makemv delim="|" drvp | search drvp="$row.rule$" | fields - drvp &amp;auto_pause=$auto_pause$</link>
        </drilldown>
      </table>
    </panel>
  </row>
</form>
0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @kamlesh_vaghela,

I have this problem on Splunk Cloud, have you any idea on how to use your solution in this environment?

Ciao.

Giuseppe

VatsalJagani
SplunkTrust
SplunkTrust

For your custom App, yes.

For third-party Apps, I don't think so. Unless Splunk Support is willing help in anyway.

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @VatsalJagani ,

I trid to add the js but it wasn't possible to upload it in Splunk Cloud.

Ciao.

Giuseppe

0 Karma

Ahiory125
Explorer

You can solve the error by entering the configuration panel-server configuration -internal libraries -and enable old versions

Get Updates on the Splunk Community!

Observability | How to Think About Instrumentation Overhead (White Paper)

Novice observability practitioners are often overly obsessed with performance. They might approach ...

Cloud Platform | Get Resiliency in the Cloud Event (Register Now!)

IDC Report: Enterprises Gain Higher Efficiency and Resiliency With Migration to Cloud  Today many enterprises ...

The Great Resilience Quest: 10th Leaderboard Update

The tenth leaderboard update (11.23-12.05) for The Great Resilience Quest is out &gt;&gt; As our brave ...