Report Viewer appears on page, but no report is visible

[Paul]

Hi,

I have followed the steps here :

https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/add-report-viewer-to-a-blazor-application/

to add a Bold Report Viewer to our blazor app, to view reports from SSRS.

Even though it appears that the code I have added is the same as that documented on your site, I cannot get any report to show. The viewer UI shows, but the report area first shows a "waiting" icon for a few seconds and then the report area is just blank except for a yellow triangle with an exclamation mark in it, bottom right; clicking this warning icon shows a "ReportViewer" error window with no error in it!

There are no errors in C# and no errors in the browser dev tools - just no report!

I have modified one of your sample projects to connect to my SSRS and it works fine, so the ServiceUrl and ReportPath are definately correct and so is the SSRS security.

I can see in the SSRS logs that the API call is being made and the details of the report are being fetched from SSRS, so I speculate that something is going wrong after fetching the report and before rendering it, perhaps a javascript problem?

(I can't send you my project as it is huge, this is just one small part of it.)

The project implements :

.NET 6.0

Syncfusion.Blazor 19.3.0.47

BoldReports.Net.Core 4.2.54

It also uses a later version of jquery - https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

(could this be a conflict with the version documented for BoldReports?)

What might be cause of no errors showing anywhere, but also no report?

Thanks

Paul

[Arumugasami Murugesan]

Hi Paul,

Thanks for contacting Bold Report support.

We have checked the reported issue with the provided information. If you are using the Bold Reporting components along with Syncfusion Blazor components, you need to use the compatibility styles and follow the script order as per the below documentation. Could you please check and confirm whether you have used the same bold reports script and nuget version in your application?

https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/

  

If you are still facing the issue, could you please share the issue report, controller file, html file, and boldreports-interop.js with us? It will be helpful for our further validation.

Regards,

Arumugasami M

[Paul]

Hi,

I followed the instructions regarding CSS and .js and the report still does not show.

I suspect the problem is related to javascript - in your sample project the PostReportAction() method in the controller is executed four times before the report is displayed, while in my project it is executed only once at the start.

Note that the razor page is in a different assembly and project to where the controller is, but the controller is being executed so I assume that is fine.

Please find attached some files which may help to diagnose the problem.

I also note that this page has some elements that are confusing : https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/

1. references to scripts using http - all should be https
2. Syncfusion Blazor normally requires 

link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />

- is this now replaced by

<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />

?


3. Syncfusion Blazor normally requires

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

- is this now replaced by

<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" ></script>

?

-- this version of jQuery is old, any problem using a later version instead?

e.g.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

4. services.AddSyncFusionBlazor(true) should beservices.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; })

Attachment: Archive_87170bc.zip

[Arumugasami Murugesan]

Hi Paul,

Thanks for the update,

Please find the details in the below table,

Query	Response
I followed the instructions regarding CSS and .js and the report still does not show.	Could you please confirm whether you are facing the below error on your end? If this is not an issue, could you please share the issue snap and issue reproducible report with us? It will be helpful for our further validation. We have modified the controller file as shown in the below snap and attached it. reportOption.ReportModel.ReportServerUrl = http://pc30/ReportServer/;
I suspect the problem is related to javascript - in your sample project the PostReportAction() method in the controller is executed four times before the report is displayed, while in my project it is executed only once at the start. Note that the razor page is in a different assembly and project to where the controller is, but the controller is being executed so I assume that is fine	We have tested the reported issue. The PostReportAction() method in the controller file is executed four times before the report is displayed. Could you please share the additional details of this issue with issue snap with us? It will be helpful for our further validation.
Please find attached some files which may help to diagnose the problem. I also note that this page has some elements that are confusing : https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/ references to scripts using http - all should be https	We have logged the documentation task for this. We will publish this documentation as soon as possible.
Syncfusion Blazor normally requires  link rel='nofollow' rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" /> - is this now replaced by <link rel="stylesheet" rel='nofollow' rel='nofollow' href=https://cdn.syncfusion.com/ej2/styles/compatibility/material.css />	Yes, the script that you have replaced is the correct one. <link rel="stylesheet" rel='nofollow' rel='nofollow' href=https://cdn.syncfusion.com/ej2/styles/compatibility/material.css />
Syncfusion Blazor normally requires <script src=https://code.jquery.com/jquery-1.10.2.min.js type="text/javascript"></script> - is this now replaced by <script src=https://cdn.boldreports.com/external/jquery-1.10.2.min.js ></script> ? -- this version of jQuery is old, any problem using a later version instead? e.g. <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>	We suggest you to use the latest Jquery script as shown in the below code snippet. <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>   Please refer to the below documentation for your reference. https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/add-report-viewer-to-a-blazor-application/
services.AddSyncFusionBlazor(true) should beservices.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; })	We have logged the documentation task for this. We will publish this documentation as soon as possible.

Regards,

Arumugasami M

Attachment: Modified_file_1cafdac4.zip

[Paul]

Hi,

Adding the slash to the end of ReportServerUrl doesn't help.

This is what I see :

I only mention PostReportAction () because that is a difference between your sample app and my app that I can debug - in my app it is not being called with the json containing the API results, from which I infer that either some javascript is not working or the controller is not returning properly.

Strangely, today I have started getting an error in my app's error log when trying to view a report :

"API exception

A Middleware exception occurred, but response has already started!"

I have not been receiving this error during the previous days of testing!

What did you do to generate the blank report viewer in your screenshot?

 

[Arumugasami Murugesan]

Hi Paul,

Thanks for the update,

Please find the details in the below table,

Query	Response
Adding the slash to the end of ReportServerUrl doesn't help. This is what I see :  I only mention PostReportAction () because that is a difference between your sample app and my app that I can debug - in my app it is not being called with the json containing the API results, from which I infer that either some javascript is not working or the controller is not returning properly.	Could you please confirm whether you are facing the same blank screen issue in the report viewer when you run the report in the local environment with the below code in the OnInitReportOptions method? public void OnInitReportOptions(ReportViewerOptions reportOption)  {    string basePath = _hostingEnvironment.WebRootPath;    // Here, we have loaded the sales-order-detail.rdl report from application the folder wwwroot\Resources. sales-order-detail.rdl should be there in wwwroot\Resources application folder.     System.IO.FileStream inputStream = new System.IO.FileStream(basePath + @"\resources\" + reportOption.ReportModel.ReportPath + ".rdl", System.IO.FileMode.Open, System.IO.FileAccess.Read);    MemoryStream reportStream = new MemoryStream();    inputStream.CopyTo(reportStream);    reportStream.Position = 0;    inputStream.Close();    reportOption.ReportModel.Stream = reportStream;  }
Strangely, today I have started getting an error in my app's error log when trying to view a report : "API exception A Middleware exception occurred, but response has already started!" I have not been receiving this error during the previous days of testing!	Could you please share the error log file by following the below help documentation with us? It will be helpful for our further validation https://help.boldreports.com/embedded-reporting/aspnet-core-reporting/report-viewer/error-logging/
What did you do to generate the blank report viewer in your screenshot?	We have prepared the test sample to check the issue. Could you please add your report server credentials details in the attached sample and test in your end and confirm whether the issue occurred in your end or not. We have attached the sample. Sample Details: Add your server credentials in Homecontroller.cs file.   NetworkCredential reportServerCredential = new System.Net.NetworkCredential("User name", "password");             string reportPath = "<<Report path>>";             string reportServerURL = "<<Report server URL>>";

Regards,

Arumugasami M

Attachment: SSRSTestApp_New_2f288a1b.zip

[Paul]

Hi,

Implementing reportOption.ReportModel.Stream still results in a blank report area on the page. While the code does "work" and successfully opens the .rdl, still no transfer of the json result seems to occur.

From this I continue to believe that something in the javascript is not working in my app...

(Note that I have also been checking things using your sample app from : https://www.syncfusion.com/forums/173298/bold-reportviewer-viewing-an-ssrs-report-on-an-ssrs-server-in-blazor

Using reportOption.ReportModel.Stream in that sample app works fine).

The API exception error I was receiving is not related and can be ignored; something weird was happening elsewhere in the app and after I restarted the browser and Visual Studio I no longer receive the error.

The LogError method in the controller has never logged any error.

Thank you for sending me your test app SSRSTestApp_New_2f288a1b. I confirm that it works and outputs "Connected Successfully".

Is there something extra I have to do to access an SSRS server over https?  My app only works on https - could this be a problem?

I note that using the first sample app I mention above I cannot connect to SSRS over https - connecting to https://localhost:443/reportserver results in this :

The SSRS is working over https - I can connect to it in the browser (it is using an IIS Express development certificate though) :

Thanks

Paul

[Arumugasami Murugesan]

Hi Paul,

Thanks for the update,

Could you please share the first JSON response that you have received in the network tab? Could you please share the startup.cs or program.cs file with us? Also, please enable error logging within your application by referring to the below documentation and share the log file with us. It is helpful for our further validation.

https://help.boldreports.com/embedded-reporting/aspnet-core-reporting/report-viewer/error-logging/

Regards,

Arumugasami M

[Paul]

Hi,

The report viewer does not report any errors, despite implementing LogError(); except if I get the ReportServerUrl wrong and then it logs that.

I have attached startup.cs.

This is the first and only request to PostReportAction (I note that your sample app does not send the exportsetup json element, so I don't know why that is in there; I also note that ReportServerUrl is empty (??), but it is also empty in your sample app and that works ok)):

accessInternalValue	false
controlId	"report-viewer"
customBrandSettings	{…}
customBrandName	"Bold Reports"
customDomain	"https://help.boldreports.com"
customLinks	[…]
0	{…}
name	"ESLicenseMessage"
url	"/licensing/license-token/"
hideHelpLink	false
enableSearchText	false
enableVirtualEvaluation	false
exportSetup	{…}
CommonOptions	{…}
ImageQuality	2
UsePrintSizes	false
CsvOptions	{…}
FieldDelimiter	","
Qualifier	"\""
UseFormattedValues	false
customItems	[]
ExcelOptions	{…}
DisableCellFormat	0
ExcelSaveType	3
ExcelSheetProtection	0
LayoutOption	0
PasswordToModify	null
PasswordToOpen	null
ReadOnlyRecommended	false
exportOptions	255
HTMLOptions	{…}
HidePageSeparator	false
PDFOptions	{…}
EnableComplexScript	false
PdfConformanceLevel	0
Security	{…}
UserPassword	""
PPTOptions	{…}
EncryptionPassword	null
FormatType	0
SecurityOptions	{…}
Edit	null
EnableProtection	false
Protect	null
WordOptions	{…}
EncryptionPassword	null
FormatType	2
LayoutOption	0
ParagraphSpacing	{…}
ProtectionPassword	null
ProtectionType	0
isReloadReport	false
locale	"en-US"
processingMode	"remote"
reportAction	"ReportLoad"
reportPath	"/Customers"
reportServerUrl	""

This is the first and only PostReportAction response (I note that your sample app has another three posts) :

Version	"2.0.0.0"
StatusCode	200
Message	"Status 200 OK"
Result	Object { inProgress: "completed", isReportLoad: true, paramInfo: "NoParams", … }
inProgress	"completed"
isReportLoad	true
paramInfo	"NoParams"
reportViewerToken	"f01248bd-a069-4ff1-8197-57c735566c3a"
reportViewerID	"f01248bd-a069-4ff1-8197-57c735566c3a"
dataSources	[ {…} ]
0	Object { ControlId: "report-viewer_Source_101", Name: "DataSource1", Prompt: "Specify a user name and password" }
dataSets	null
reportParameters	null
isRDLC	false
errorInfo	null
serviceType	"NETCore"
licensingMessage	null

In Chrome I notice this warning :

1. "
2. Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute
3. Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

1. Resolve this issue by updating the attributes of the cookie:

   • Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.
   • Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.
2. AFFECTED RESOURCES
1. 3 cookies

1. Name	Domain & Path
   _uid	.boldreports.com/
   _ga	.boldreports.com/
   _ga_QBBJGZHXXJ	.boldreports.com/

"

Could this be a problem?

BTW, my project is derived from the popular Blazor template project BlazorBoilerplate : https://github.com/enkodellc/blazorboilerplate

I suggest it would be a good thing for SyncFusion to be able to show to the Blazor community that Bold Reports can be successfully integrated with the project.

Attachment: Startup_9521ebf8.zip

[Arumugasami Murugesan]

Hi Paul,

Sorry for the delay,

We have created a support ticket for this issue by using the below link. We will update the further details in the created ticket. If you face any other issues, we suggest you open a new ticket using your account.

https://support.boldreports.com/create

Regards,

Arumugasami M

[Paul]

An FYI for anyone reading this post, to conclude the issue.

The BlazorBoilerPlate project implements an API middle-ware that interrupts the API flow to log the requests, using

a class named APIResponseRequestLoggingMiddleware.  The Invoke() method examines the URL path and, with some exceptions for API calls that return their own json data, wraps the response -"/api/BoldReportsAPI" (or whatever your controller is) needs to be added to the list of exceptions.

Thank you to the Syncfusion team for identifying this.

Paul

[Arumugasami Murugesan]

We are glad to hear that the reported issue has been resolved on your end. If you face any other issues, we suggest you open a new ticket using your account. 

https://support.boldreports.com/create