Google script error: "Error encountered: An unexpected error occurred" - google-apps-script

Question

I am getting an intermittent error "Error encountered: An unexpected error occurred" while running the Google script below. It happens after the first clickHandler "Next" is used. I cannot determine why it happens and what the pattern is. After I click "OK" it continues to the second part of the code and finishes fine. The script is usable but the error message is annoying. Could someone please help?
function updateRecord() {
var app = UiApp.createApplication().setTitle('Sheet 1').setHeight(1000).setWidth(300);
var panel = app.createVerticalPanel().setWidth(300).setHeight(900);
var lb = app.createListBox(true).setHeight(800).setWidth(300).setId('myId').setName('myLbName');
//add items to ListBox
lb.setVisibleItemCount(3);
var ss = SpreadsheetApp.openById('xxx');
var list = ss.getSheetByName('Sheet 2');
var stnum = list.getRange(2,11,1,1).getValues()
var values = list.getRange(2,1,stnum,1).getValues().sort();
for (var i=0; i<values.length; i++){
lb.addItem(values[i][0].toString());
}
panel.add(lb);
var button = app.createButton('Next').setStyleAttribute('font-weight','bold');
var handler = app.createServerClickHandler('next').addCallbackElement(panel);
button.addClickHandler(handler);
panel.add(button);
app.add(panel);
SpreadsheetApp.getUi().showSidebar(app);
return app;
}
function next(eventInfo) {
var ss = SpreadsheetApp.openById('xxx');
var sheet = ss.getSheetByName('Sheet 3');
//Create menu items
var mnum = sheet.getRange(2,9,1,1).getValues();
var matvalues = sheet.getRange(2,1,mnum,1).getValues().sort();
var pnum = sheet.getRange(2,10,1,1).getValues();
var platvalues = sheet.getRange(2,2,pnum,1).getValues().sort();
//Create panels, scroll panels, button, and grid
var app = UiApp.createApplication().setTitle('Enter Additional Information').setHeight(600).setWidth(500).setStyleAttribute("background-color","light blue").setStyleAttribute('padding','20');
var scrollPanlel = app.createScrollPanel().setSize('300', '1000');
var panel = app.createVerticalPanel();
var buttonPanel = app.createHorizontalPanel();
var grid = app.createGrid(6, 1);
var button = app.createButton('Submit').setStyleAttribute('font-weight','bold');//.setStyleAttribute('color','red');
var submitHandler = app.createServerClickHandler('update');
submitHandler.addCallbackElement(grid);
button.addClickHandler(submitHandler);
buttonPanel.add(button);
//Add list boxes to the grid
grid.setWidget(1, 0, app.createLabel('Value 1:').setStyleAttribute('font-weight','bold').setStyleAttribute('color','purple'));
var matrix = app.createListBox(true).setHeight(100).setWidth(200).setId('myId1').setName('myLbName1');
grid.setWidget(2, 0, matrix);
for (var i in matvalues){
matrix.addItem(matvalues[i][0].toString());
}
grid.setWidget(3, 0, app.createLabel('Value 2:').setStyleAttribute('font-weight','bold').setStyleAttribute('color','purple'));
var platform = app.createListBox(true).setHeight(100).setWidth(200).setId('myId4').setName('myLbName4');
grid.setWidget(4, 0, platform);
for (var i in platvalues){
platform.addItem(platvalues[i][0].toString());
}
//Add all elements to the dialog
app.add(scrollPanlel);
scrollPanlel.add(panel);
panel.add(grid);
panel.add(buttonPanel);
//Show the dialog window
SpreadsheetApp.getUi().showSidebar(app);
return app;
}

Answer 1

This line:
var stnum = list.getRange(2,11,1,1).getValues()
Should be:
var stnum = list.getRange(2,11,1,1).getValues()[0][0];
The getRange() method returns a two dimensional array. But that line only gets the value of one cell. It's only getting one row, and one column. So, the indexes of the one value in the two dimensional array are both zero.
I'm not saying that is your main problem, but I'd fix that.
You can convert to HTML Service by using the following code: It's not a complete refactoring of your code, but it would give you a start.
gs Code
function showSidebar() {
var html = HtmlService.createTemplateFromFile('Page')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('My custom sidebar')
.setWidth(300);
SpreadsheetApp.getUi()
.showSidebar(html);
}
Get items for the List Box
function getListBoxItems() {
var ss = SpreadsheetApp.openById('Your ID');
var list = ss.getSheetByName('Sheet 2');
var allSheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
var stnum = list.getRange(2,11,1,1).getValues()[0][0];
var values = list.getRange(2,1,stnum,1).getValues().sort();
var htmlSelectOptions = "";
var thisListItem = "";
for (var i=0; i<values.length; i++){
thisListItem = values[i].toString();
htmlSelectOptions += '<option value="' + thisListItem + '">' + thisListItem + '</option>';
}
return htmlSelectOptions;
};
HTML File: Named Page
<div>
<br>Text Here:
<br>
<select id="myId" name="myLbName">
<?!= getListBoxItems(); ?>
</select>
<br>
<br>
<input type="button" value="Next" id="idCopyBtn" onclick="google.script.run.next()">
</div>