How to use Report Load and Error Events in React Application
This tutorial explains how to handle report loading and error‑related events in the Bold Reports® Web Report Viewer within a React application. The video demonstrates how developers can capture successful report loading and manage errors that occur during report processing or rendering.
To get more details about Report Load and Error Events in React applications, you can check this video:
Report Loaded
Fires when the report is loaded successfully. This event can be used to perform actions after the report is rendered and ready for user interaction.
<div id="report-viewer"></div>
<script>
$("#report-viewer").boldReportViewer({
reportLoaded: function (args) {
// Write a code block to perform any action
// when the report is loaded successfully.
}
});
</script>Report Error
Fires when an error occurs while processing or rendering the report. This event allows you to capture error details and perform custom actions such as logging or showing messages.
<div id="report-viewer"></div>
<script>
$("#report-viewer").boldReportViewer({
reportError: function (args) {
// Write a code block to perform any action
// when a report error occurs.
}
});
</script>Show Error
Fires when the user clicks a failed report item in the rendered report, before displaying the error details dialog. This event lets you customize or override the default error dialog behavior.
<div id="report-viewer"></div>
<script>
$("#report-viewer").boldReportViewer({
showError: function (args) {
// Write a code block to perform any action
// before showing the error details dialog.
// args.cancel = true; // Cancels the default error dialog
}
});
</script>Implementation Workflow
Report Load Handling
Use the reportLoaded event to track when the report is fully loaded and ready for user interaction.
Error Handling
Use the reportError and showError events to capture failures and control how error information is presented to users.