ActiveReportsJS: Troubleshooting

This page enumerates the most common problems you can face using ActiveReportsJS and offers solutions.

Report displays differently in the browser and in the exported PDF document

When my application uses Bootstrap and ActiveReportsJS viewer, the report output does not match the same in the Standalone Designer application.

Bootstrap sets the line-height value for all HTML elements to 1.5, and it affects the report output. The best way to fix it is to replace this value with normal. One way to achieve that is using the Bootstrap Theming feature and overwrite the line-height-base variable's value before importing the reboot module in the custom SCSS style declaration:

$line-height-base: normal;
@import "../node_modules/bootstrap/scss/reboot";

Alternatively, you could isolate the ActiveReportsJS Report Viewer component so that it would not be altered by Bootstrap styles at all, but the specific method to achieve that depends on the application's architecture.

Data Requests work fine in the Design tab but fail in the Preview tab of the Standalone Designer application

If you can create and validate a dataset in the Design tab but in the Preview tab the Data processing error occurs, then ensure that the end-point allows CORS requests.

How can I debug data requests in the standalone designer application?

Create a file called config.json in the standalone designer application's folder:

Windows : %AppData%\ActiveReportsJS Designer
MacOS: ~/Library/Application Support/ActiveReportsJS Designer
Linux: ~/.config/ActivereportsJS Designer

And add the following content into that file.

{
  "debug":true
}

Restart the standalone designer application and use Ctrl + Shift + F12 hotkey for Windows and ⌘ + Shift + F12 (or, if your keyboard does not use the standard functions keys, ⌘ + fn+ Shift + F12) for Mac to open the Developers Tools. Use the Network tab to monitor data requests.

Here is the screenshot for debugging the data request of the Doughnut Chart Demo Report