How to handle Report Load and Error Events in Blazor App

This tutorial explains how to handle report loading and error‑related events in the Bold Reports^® Web Report Viewer within a Blazor application. The video demonstrates how developers can track successful report loading and manage errors that occur during report processing or rendering.

Setup

Add the following code to the index.razor file in the Pages folder. This configures the report viewer options and renders the Bold Reports^® Viewer through JavaScript interop.

BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();

// Used to render the Bold Report Viewer component in Blazor page.

public async Task RenderReportViewer()

{

    viewerOptions.ReportName = "sales-order-detail";
    viewerOptions.ServiceURL = "/api/BoldReportsAPI";
    viewerOptions.AuthorizationToken = string.Empty;


    DotNetObjectReference<Index> dotNetReference = DotNetObjectReference.Create(this);
    await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", dotNetReference, "report-viewer", viewerOptions, "OnReportLoaded");

}

Report Loaded

Fires when the report is loaded successfully. This event can be used to perform actions once the report is rendered and ready for user interaction.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnReportLoaded(string args)
{
    return ShowToastAsync("Report loaded successfully.");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component after the report is loaded.
            reportLoaded: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Report Error

Fires when an error occurs during report processing or rendering. This event allows you to capture error details and perform custom actions such as logging or displaying messages.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnReportError(string args)
{
    return ShowToastAsync("A report error occurred.");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component when a report error occurs.
            reportError: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Show Error

Fires when the user clicks a failed report item in the rendered report, before displaying the error details dialog. This event allows you to customize or cancel the default error dialog behavior.

Razor Page

Add the following code in the index.razor file in the Pages folder.

[JSInvokable]
public Task OnShowError(string args)
{
    return ShowToastAsync("Showing the error details dialog…");
}

Interop File

Add the following code in the wwwroot/scripts/boldreports-interop.js file.

window.BoldReports = {
    RenderViewer: function (dotNetReference, elementID, reportViewerOptions, callback) {
        $("#" + elementID).boldReportViewer({
            reportPath: reportViewerOptions.reportName,
            reportServiceUrl: reportViewerOptions.serviceURL,
            // Notifies the Blazor component before the error dialog is shown.
            showError: function (args) {
                if (dotNetReference) {
                    dotNetReference.invokeMethodAsync(callback, args);
                }
            }
        });
    }
}

Implementation Workflow

Report Load Tracking

Use the report Loaded event to determine when a report has been successfully rendered.

Error Handling

Use the report Error and show Error events to capture failures and control how error information is presented to users.

To get more details about Report Load and Error Events in Blazor applications, you can check this video: