Oracle APEX JS Logger was born from the need to have JavaScript logging with two important functionalities: controlling the amount of logs displayed in console, depending on the case and the debugging being done. And the other important functionality is having logging at the production level, where errors are not reported directly and that makes debugging difficult.
- GitHub: Full source code and documentation
The Problem: console.log
When working with JavaScript, we usually use console.log for debugging. However, it can generate so much content in the console that it becomes difficult to manage, and practically impossible to use in production.
- A user reports an issue, but you can't reproduce it
- You see the error in DevTools, but users in production don't have it open
- No audit trail for user actions
- No performance metrics for slow operations
- Sensitive data might accidentally get logged
JS-Logger, Main Features
- Color configuration for console
- logger.logServer, to log to the database using PL/SQL Logger
- Automatic data masking for sensitive fields
- Performance timing to find bottlenecks
- Modules to know where the console.log was launched from
- Configuration according to environment DEV, UAT, PROD
How to Get Started
Step 1: Load the Files
Load the files into your APEX application:
#WORKSPACE_FILES#js/logger-config.js
#WORKSPACE_FILES#js/logger.js
Step 2: Usage
namespace.logger.log('Application started', 'AppMain');
namespace.logger.log('User action', 'UI', {
action: 'button_click',
pageId: apex.env.APP_PAGE_ID
});
namespace.logger.logServer('Payment processed', 'Payments', {
orderId: 'ORD-123',
amount: 99.99
});
Advanced Examples
1. Three Log Levels with Colors
The logger provides three log levels that automatically output in different colors:
Information (Blue)
namespace.logger.log('User logged in', 'Auth', { userId: 123 });
Warning (Orange)
namespace.logger.warning('API slow', 'Network', { responseTime: 3500 });
Error (Red)
namespace.logger.error('Validation failed', 'Form', { field: 'email' });
2. Module-Scoped Loggers
Create a logger for your module with persistent context. This is useful when building other JS libraries and you want to integrate it:
var logger = namespace.logger.createModuleLogger('PaymentModule');
logger.setExtra({ version: '2.0', feature: 'checkout' });
logger.log('Processing payment', { amount: 99.99 });
logger.error('Payment failed', { reason: 'insufficient_funds' });
logger.clearExtra();
3. Console vs Server Logging
Three logging modes for different needs:
Console-only (development)
namespace.logger.log('Debug info', 'MyModule', { data: 'value' });
Console + Database (production)
namespace.logger.logServer('Important event', 'Business', {
orderId: 'ORD-123',
action: 'order_shipped'
});
Console + Database with options (manual control per log)
namespace.logger.log('User completed checkout', 'Ecommerce', {
orderId: 'ORD-123',
total: 99.99
}, {
sendToServer: true
});
4. Automatic Data Masking
Security is built-in. Sensitive fields are automatically masked:
namespace.logger.log('Login attempt', 'Auth', {
username: 'john.doe',
password: 'secret123',
token: 'abc123'
});
Measure how long operations take:
namespace.logger.timeStart('page-load');
var elapsed = namespace.logger.timeStop('page-load', 'Performance');
Configuration and Customization
Turning Off and Customizing Output
To turn off logging completely we use LEVEL set to OFF.
Then depending on what we need we can use:
- INFORMATION: shows everything
- WARNING: shows warnings and errors
- ERROR: only errors
- OFF: turns off all console logs
To return to the initial configuration use resetLevel() or set level: 'INFORMATION'.
namespace.loggerConfig.configure({
level: 'OFF',
});
namespace.loggerConfig.resetLevel();
var devConfig = namespace.loggerConfig.getEnvConfig('development');
namespace.loggerConfig.configure(devConfig);
var prodConfig = namespace.loggerConfig.getEnvConfig('production');
namespace.loggerConfig.configure(prodConfig);
Other Configuration Values
var DEFAULT_CONFIG = {
level: 'INFORMATION',
enableServer: true,
serverProcessName: 'JS_LOGGER',
retryCount: 1,
retryAttemptInitial: 0,
retryDelayBase: 1000,
defaultModuleName: 'JS_LOGGER',
defaultUserName: 'UNKNOWN',
enableDataMasking: true,
sensitiveFields: ['password', 'token', 'ssn'],
maxDataSize: 10000,
maxErrorStringLength: 100,
timingDecimalPlaces: 2
};
Learn More
- Examples: 5 focused examples covering all features
- Demo: Complete payment module implementation
- GitHub: Full source code and documentation
- Video
Video with short explanatión.
