My Coldfusion application is blank, I don't see any errors in console

[Vishnu22410012h6s8]

Please find below  is home.cfm, I don't have experience in Vue framework. This application was working earlier however for the past few days I only see balnk screen but there no errors in console. I use Edge browser and Chrome browser. In both the browsers the I see only balnk screen. Please help in this regard. Thanks.

<div id="app" style="display:none">
<!--- start vuetify --->
<v-app> <!-- to use Vuetify components and styles, the page needs to be wrapped in v-app -->

<cfloop array="#components#" index="component">
<!--- each component file contains the vuetify markup --->
<CFINCLUDE template="ui_components/#component#.cfm">
</cfloop>

<v-main v-if="isLoaded">
<v-container >


<div class="text-h5 my-4">My System</div>

<v-card>
<v-card-text class="subtitle-1 font-weight-medium">
<v-row>
<v-col cols="7" class="pr-4">
<div class="title mb-4">Welcome</div>
<div style="line-height: 30px;">
<p>Hello {{firstname}}, welcome to the My site.</p>
<div class="home" v-html="homeHTML"></div>
</div>
</v-col>
</v-row>

</v-card-text>

</v-card>
</v-container>
</v-main>

</v-app>

<!--- end vuetify content --->
</div>

<script>
var vm;
document.addEventListener('DOMContentLoaded', function() {
vm = new Vue({
el: "#app",
vuetify: new Vuetify(<CFINCLUDE template="theme.cfm">),
data: function(){
return {
<cfloop array="#components#" index="component">
<!--- create data properties for the global components --->
<CFINCLUDE template="js_components/#component#.cfm">
</cfloop>

activeTab: 0,
hasUnsavedChanges: false,

isLoaded: false,
<CFOUTPUT>
firstname: "#Session.det_pref_nm#",
surname: "#Session.det_surname#",
homeHTML: "",
</CFOUTPUT>
}
},
created: function(){
this.loadAPIData();

},

methods: {
loadAPIData: function(){
var self = this;

axios.get(window.servername + "/api/home/getMyContent_json.cfm?uid="+Math.random(),{withCredentials:true})
.then(function(response){
let HTML = response.data;
HTML = HTML.replace(/<font[^>]+>/g,"").replace("</font>","");
HTML = HTML.replace('cellspacing="1"',"");
self.homeHTML = HTML;
self.isLoaded = true;

})
.catch(function(responses){
console.log("Load Error", responses);
});

},

},

}); // end vue

<!--- Access vue data variables in Chrome Console using vm.$data --->

document.getElementById("app").style.display = "block"; // don't show the content until it has finished rendering

}); // end DOM Content Loaded event

</script>

[Charlie Arehart]

Take vue (and all your page content) out the equation, and make sure first whether ANYTHING you do on this page appears. Put this at the top of the page:

<cfoutput>#now()#</cfoutput> 
<cfabort>

Save the file and refresh it. Do you now see the date/time (as shown by that now() function)?

If you do not, then the problem is not what you're doing in this page. It could be any number of other things, in that case. First, do the same in your application.cfm or application.cfc. Do you see it then?

If still not, let us know and we can discuss still other things to consider.

And of course, remove these changes immediately. You don't want them aborting requests once we may resolve whatever is another problem. 

[Vishnu22410012h6s8]

Hi @Charlie Arehart , thanks for your reply. I see the date/time in the home.cfm

[Charlie Arehart]

Ok. First, if you remove that code, do you still get a blank? You might not, for reasons I won't bother to elaborate now.

If it's still blank, the next question would be to have you view what your "blank" page shows as its underlying html. Do you know how to have your browser show you that? (If not, what browser are you using?)  Does that underlying html source show "nothing", or do you see there mostly what you had in the cfm page?

And are you familiar with your browser's dev tools feature, in case we'd skip to using that to try to diagnose things?

Finally, what's your level of cfml and/or html coding skill? Do you do  it daily, or rarely? Sometimes we get site owners who are just trying to tweak their page that was built by someone else. Knowing your experience can influence how we explain helping you solve things. 

[Vishnu22410012h6s8]

Yes, I'm still getting a blank screen after I remove the code. I saw the Sources tab in the browser console. I use both Edge and Chrome browser. I see there are some differences in the folder structures(under Sources tab of the browser's dev tools) of my PRODUCTION and DEVELOPMENT servers. But I don't understand why there is a difference in folder structure. In Console, no errors. I'm intermediate level in Coldfusion/html. This application was developed another developer.

[Charlie Arehart]

Ok, but I wasn't asking about that Sources tab, but just the underlying source for the rendered page. Edge and Chrome (as well as Firefox and others) offer the option for you to right-click on the page to view page source. (or the dev tools each offer their way to see the same).  Again, how does the html (as output from cf) look?

And as long as you're looking at the sources and console tabs of devtoiols, what about the network tab? This can be very important: are any requests getting a 404 (or code other than 200) for the server that's not seeming to work? 

There has to be some difference, in either the html or the resources the html is pulling down, I'd think. 

[dhanshreej63753772]

Hello @Vishnu22410012h6s8 ,

Are you able to find any solution.

Even I am facing same issue after I migrated to CF2021 recently. Currently we are running on CF2021 update 5, don't want to upgrade to latest version until we stabilize our application on currently installed version.

Can I check with you which CF version you are using?

Please let me know if you have any findings.

Thanks,
Dhanshree Joshi

[Charlie Arehart]

dhanshreej, while you await any answer from Vishnu, can you offer an answer to the same questions I'd asked him? There's not some feature change in cf2021 that "causes blank pages". Whatever is amiss for you two will have a cause and explanation. And it will have a resolution--but we can't propose it without first knowing the cause.

And as I proposed above, you can use various debugging techniques to provide us the info needed to gather more diagnostics. 

[dhanshreej63753772]

Hello @Charlie Arehart ,

Unfortunately, in my case issue is only reproducible on production (client facing) environment. So, i cannot debug/dump values on pages.

But we encountered this issue after we migrate only. Since last 20 years of application, no user reported this.

Hence, we are suspecting the CF migration as cause.

Also, not all users facing this issue. We tried clearing cache/different browsers/devices, but no luck.

Thanks,

Dhanshree J

[Charlie Arehart]

But you CAN do things in production. For example:

• you could create a new test page (in the same prod app, even doing all the same code otherwise)--which no one but you would know about. Does it show blank or what's expected?
• you could create a new test page (in the same prod app, or another) that does entirely different operations, perhaps even JUST this debugging output. Does it show blank or what's expected?
• you could add CFML conditional code that would offer that diagnostic output only under certain conditions (based on your ip address, in cgi.remote_addr, or based on an incoming URL variable--that no one would know about but you)

I get it: you're inclined to think "CF is broken". Whenever folks move to a new version and their code fails to work as expected, it's natural to presume it's about that new CF version. Sometimes the cause is NOT specific to the new version but instead may be due to how it's configured (if differently than the old version). Or there may be some issue that's unique to you (and not the same problem as other folks with seemingly the same problem).

But then you add that "not all users facing this issue". Please clarify: do you mean different people calling the EXACT SAME URL get different results, with some getting blank pages and others not? Or do you mean that people calling even other URLs are getting the blank pages (sometimes or always, for the same url)? It's a very important distinction that you should clarify.

Here's one more other things to consider: are there any log lines in any of the CF log files at the time you make the request and get a blank page? Look in the key log files: coldfusion-out.log, coldfusion-error.log, application.log, exception.log, server.log? Even if their date modified does not seem "current", look at the files as I've seen Windows especially not accurately report when a file had indeed been updated. And in particular, if you see an "outofmemory" error referring to "metaspace", see a blog post I have on a possible explanation of that (and a simple configuration change to consider.)

I realize you may just want someone to "fix things" by telling you what you "need to change". Again, there is no specific feature that intentionally causes/allows for blank pages which you can change. There HAS to some reason for your issue, and we need you to diagnose it in order to point to a solution. If you would prefer a guiding hand in doing this, it's somethng I could offer in a remote consulting session. I offer more on my rates, approach, satisfaction guarantee,  and online calendar at carehart.org/consulting. I'd ensure we'd not negatively impact production, of course.

As you can see above, I offer MANY ideas for you and others here to solve things on your own.  But sometimes people feel stuck and would prefer paying to get their problem solved (especially if it's unique to them, and hard to diagnose), rather than waiting perhaps days for some possible answer to be offered.

[Dave Watts]

If it happens for some users but not others, it's probably not a CF issue. Are you using any server-side caching? Edge servers? Have you cleared the compiled CF files? (I don't think that last question is the issue tbh.)

Dave Watts, Eidolon LLC 

[BKBK]

When I see code similar to the following, I already expect problems:

<script>
...
<cfloop array="#components#" index="component">
<!--- create data properties for the global components --->
<CFINCLUDE template="js_components/#component#.cfm">
</cfloop>
...
<CFOUTPUT>
firstname: "#Session.det_pref_nm#",
surname: "#Session.det_surname#",
homeHTML: "",
</CFOUTPUT>
...
</script>

The reason I expect problems is that server-side code (CFML) is included within client-side code (Javascript). That is in general bad-practice. You should separate CFML code from Javascript.