Dashboards & Visualizations

Receiving "A custom JavaScript error caused an issue loading your dashboard." error

sweetie
Explorer

hi Splunk'ers, I am facing an error popup while loading my Custom made dashboard which states below:

"A custom JavaScript error caused an issue loading your dashboard. See the developer console for more details."

I am using Javascript (.js scripts) for some functionalities in my dashboard. I even tried adding version = "1.1" in the form but it didn't help. Any suggestions will be really helpful.

Console error: 

dashboard_1.1.js:1317 Error: Script error for: theme_utils
http://requirejs.org/docs/errors.html#scripterror
at makeError (eval at module.exports 
at HTMLScriptElement.onScriptError (eval at module.exports..............)

Thanks

Labels (2)
0 Karma

sweetie
Explorer

hi @kamleshap  , JS I have shared it already , xml will be shared shortly. Also we recently added version = "1.1" to the source codes owing to recent JQuery upgrade to 3.5. Could that have caused any issue?

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

Is it possible for you to share your sample custom JS code and Splunk version?

KV

Tags (2)
0 Karma

sweetie
Explorer

hi, Splunk version is 8.2.10.

Script sample-

require([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'],function(
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
    ){
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
 
            this._searchManager = new SearchManager({
                id: 'details-search-manager',
                preview: false
            });
            this._TableView = new TableView({
                managerid: 'details-search-manager'
              
            });
        },
        canRender: function(rowData) {
           
            return true;
        },
        render: function($container, rowData) {
            
            var sourcetypeCell = _(rowData.cells).find(function (cell) {
               return cell.field === 'SID';
            });
           
            this._searchManager.set({ <Splunk Search Query> }
    });
    var tableElement = mvc.Components.getInstance("table1");
    tableElement.getVisualization(function(tableView) {
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
 
});

 

Thanks

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

Can you please try this? I have corrected some code. 

 

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function (args) {

            this._searchManager = new SearchManager({
                id: 'details-search-manager',
                preview: false
            });
            this._TableView = new TableView({
                managerid: 'details-search-manager'

            });
        },
        canRender: function (rowData) {

            return true;
        },
        render: function ($container, rowData) {

            var sourcetypeCell = _(rowData.cells).find(function (cell) {
                return cell.field === 'SID';
            });
            value = processCell.value;

            this._searchManager.set({ search: '|makeresults count=10 | eval a="A", value="' + value + '" ' });
        }
    });

    var tableElement = mvc.Components.getInstance("table1");
    tableElement.getVisualization(function (tableView) {
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });

});

  

I hope this will help you.

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

Tags (2)
0 Karma

sweetie
Explorer

So are there changes to the require headers only in your suggested response? Please confirm.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Yes @sweetie 

Modules should be required properly in Custom Javascript.

 

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

Tags (1)
0 Karma

sweetie
Explorer

The modules sequence didn't help fix the error : A custom JavaScript error caused an issue loading your dashboard. See the developer console for more details.

Seems the issue is beyond that.

'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'

'

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

Can you please share your JS and sample XML with dummy queries? May be with both I can help you with this.

KV

0 Karma

sweetie
Explorer

@kamlesh_vaghela  JS is already shared and I will share sample xml shortly with you. Also, could it be related to below version line owing to recent JQuery upgrade to 3.5?




<form version = "1.1" theme="dark" stylesheet="range_icon_css.css" script="row_expansion_san.js, range_icon_san.js" hideFilters="True">

 

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

As you are using Splunk version 8.x.x there is no need to add any version in the dashboard.

Can you please try this Sample Example?

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    console.log("HIe");
    // var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
    //     canRender: function (cell) {
    //         return cell.field;
    //     },
    //     render: function ($container, rowData) {
    //         console.log(rowData.value);
    //         $container.html(rowData.value)
    //     }
    // });

    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function (args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });

            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });
        },

        canRender: function (rowData) {
            return true;
        },

        render: function ($container, rowData) {
            var processCell = _(rowData.cells).find(function (cell) {
                return cell.field === 'SID';
            });

            value = processCell.value
            // var tokens = mvc.Components.get("default")
            // var id = tokens.get("splunk_id")
            this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="' + value + '",c=1 | accum c ' });

            $container.append(this._TableView.render().el);
        }
    });

    var tableElement = mvc.Components.getInstance("table1");
    tableElement.getVisualization(function (tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        // tableView.table.addCellRenderer(new CustomRangeRenderer());
        // tableView.render();
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

 

 

<dashboard script="a.js" theme="dark" hideFilters="True">
  <label>Label</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| makeresults count=10 | eval count=1 | accum count | eval SID = count</query>
          <earliest>-1w@w1</earliest>
          <latest>@w1</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition></condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

 

Screenshot

Screenshot 2023-05-25 at 6.49.06 PM.png

 

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

0 Karma

sweetie
Explorer

@kamleshap yes 8.2.1 and if i remove the version clause in <form> altogrther, error seems like below:

sweetie_0-1685098101629.png

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

What is the console error?

Did you check my above working example?

KV

0 Karma

sweetie
Explorer

hi @kamlesh_vaghela  console error are somewhat like these. In the working example, can you let me know what exactly has changed as I see the modules required are the same. Is there any logic OR syntactical change?

sweetie_0-1685101048949.png

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sweetie 

This kind of error only happens when some reference object is not properly defined.

What I suggest, is just follow the code I have shared with you and add your changes. Just be careful when you define any object OR mention any id.

KV

 

Get Updates on the Splunk Community!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...