Contact usDemo App

Debugging

Architecture Overview

The application follows a Model-View-Controller (MVC) pattern with:

  • Models: Handle data processing from SAP responses

  • Views: Define UI layout and structure

  • Controllers: Manage business logic and user interactions

  • Extensions: Provide pluggable functionality that can be enabled/disabled

  • Controls: Reusable UI components specific to RF device requirements

The application is designed to work on handheld RF devices in warehouse environments, with special considerations for, touch-friendly controls, barcode scanning integration, offline capability, real-time messaging via WebSockets and responsive design for various device sizes.

General Web Debugging with Browser Developer Tools

The main method of identifying issues is by using the Browser developer tools in Chrome or Edge.

Browser developer tools are essential for debugging web applications. Access them by pressing F12 or right-clicking and selecting “Inspect” in most browsers. The developer tools provide several panels:

  • Elements/Inspector: View and modify HTML/CSS in real-time

  • Console: View JavaScript logs, errors, and execute commands

  • Network: Monitor HTTP requests and responses

  • Sources/Debugger: Set breakpoints and step through JavaScript code

  • Application/Storage: Inspect cookies, local storage, and session storage

Key debugging techniques

  1. Use breakpoints to pause code execution at specific lines

  2. Use console.log() statements to track variable values

  3. Inspect element styles to debug CSS issues

  4. Use the debugger statement in JavaScript to create breakpoints programmatically

Check the console for JavaScript errors

The console is your first stop when debugging JavaScript issues:

  1. Red error messages indicate JavaScript exceptions that stopped code execution

  2. Yellow warnings highlight potential issues that may cause problems

  3. Stack traces show the sequence of function calls leading to an error

Common console error types

  • ReferenceError: Variable or function not defined

  • TypeError: Operation performed on wrong data type

  • SyntaxError: Invalid JavaScript syntax

  • NetworkError: Failed resource loading

Tips for console debugging

  • Clear the console before reproducing issues for cleaner output;

  • Use console filters to show only errors or warnings;

  • Click on file links in stack traces to jump directly to problematic code. Use console.trace() to log the current call stack.

Understanding the SAP communication flow

This application communicates with SAP through a specific request/response pattern:

1. Request Flow (Client → SAP)

User Action → sendToSAP() → Form Data Creation → AJAX POST → SAP Backend

2. Response Flow (SAP → Client)

SAP Backend → JSON Response → handleSAPResponse() → Screen Model Update → UI Render

3. Key Files for SAP Communication

  • App.controller.js: Main controller handling all SAP communication

  • SAPScreenModel.js: Processes and stores SAP response data

  • BaseScreen.js: Base controller with common functionality

Key debugging points in the application

Main entry points for SAP communication

sendToSAP() - App.controller.js

This is where all data is sent to SAP. Set a breakpoint here to inspect form values being sent, check the URL being called and verify authentication headers.

// Key variables to inspect:
formValues    // All form data being sent
url           // SAP endpoint URL
formData      // Formatted data array

handleSAPResponse() - App.controller.js

This processes all SAP responses. Debug here to inspect raw SAP response data, track screen model updates and identify parsing errors.

// Key variables to inspect:
rawData       // Raw JSON from SAP
screenModel   // Current screen state
messageData   // Any error/success messages

Network debugging points

callAJAXWithRetry() - App.controller.js

The actual HTTP request happens here. Monitor eequest headers (especially authentication), request payload, response status codes and timeout settings.

Error handling points

sendToSAPFailure() - App.controller.js

All communication errors end up here. Check HTTP status codes, error messages and network connectivity issues.

Common debugging scenarios

Data not reaching SAP

  1. Set breakpoint at App.controller.js in sendToSAP().

  2. Inspect formValues object for:

    1. Missing required fields

    2. Incorrect field names

    3. Empty values

  3. Check Network tab for:

    1. Request actually being sent

    2. Correct endpoint URL

    3. Authentication headers

Screen not updating after SAP response

  1. Set breakpoint at App.controller.js in handleSAPResponse()

  2. Verify rawData contains expected fields

  3. Step through SAPScreenModel.processRawData()

  4. Check Console for JavaScript errors during parsing

Authentication/session issues

  1. Check Network tab for 401/403 responses

  2. Inspect cookies in Application tab

  3. Check session timeout settings

Timeout errors

  1. Check SettingsModel for timeout value (default: 7000ms)

  2. Monitor Network tab for request duration

  3. Set breakpoint at retry logic in callAJAXWithRetry()

  4. Verify maxRetry setting (default: 10)

Debugging tools and techniques

Console logging strategy

Add strategic console.logs at key points:

// Before sending to SAP
console.log('Sending to SAP:', {
    url: url,
    formValues: formValues,
    formData: formData
});
// After receiving response
console.log('SAP Response:', {
    status: data.STATUS,
    rawData: data,
    parsed: newEwmData
});

Network tab filtering

  • Filter by XHR/Fetch to see only AJAX requests

  • Look for requests to SAP endpoints

  • Check request/response headers and payloads

Using the Chrome debugger

  1. Step Over (F10): Execute current line

  2. Step Into (F11): Enter function calls

  3. Step Out (Shift+F11): Exit current function

  4. Watch Expressions: Monitor specific variables

  5. Call Stack: Trace execution path

Troubleshooting SAP communication issues

No response from SAP

  1. Check Network tab:

    1. Is request being sent?

    2. What’s the response status?

    3. Any CORS errors?

  2. Test connectivity:

    1. Can you access the SAP URL directly?

    2. Are credentials valid?

Data corruption or parsing errors

  1. Inspect raw response:

    1. Set breakpoint at handleSAPResponse

    2. Check if response is valid JSON

    3. Look for unexpected data types

  2. Common parsing issues:

    1. Dates in wrong format

    2. Numeric fields as strings

    3. Missing required fields

Session timeout or authentication loss

  1. Monitor these events:

    1. 401/403 responses in Network tab

    2. “LOGOFF” status in responses

    3. Cookie expiration

  2. Debug session handling:

    1. Check fireLogoff() calls

    2. Verify session renewal logic

    3. Monitor realtime WebSocket connection

Advanced debugging tips

  1. Preserve Network Log:

    1. Enable “Preserve log” in Network tab

    2. Prevents log clearing on navigation

  2. Throttle Network:

    1. Simulate slow connections

    2. Test timeout handling

    3. Verify retry logic

  3. Override Network Responses:

    1. Chrome allows response overrides

    2. Test error scenarios

    3. Validate error handling

  4. Export HAR Files:

    1. Save complete network activity

    2. Share with team for analysis

    3. Replay specific scenarios

Debugging WebSocket communication (realtime channel)

The application uses WebSockets for real-time communication, particularly for the Messaging extension. This enables bi-directional communication with SAP for instant messaging and notifications.

Understanding WebSocket architecture

Components

  1. RealTimeController.js: Manages WebSocket lifecycle

  2. MessagingExtension.js: Handles messaging-specific events

  3. SapPcpWebSocket: SAP’s Push Channel Protocol implementation

WebSocket flow

App Initialization → RealTimeController → WebSocket Connection → SAP Backend
                                              ↓
Extension (Messaging) ← PCP Message ← WebSocket Events

Key WebSocket debugging points

  1. Connection establishment - connectToSocket() in RealTimeController.js

  2. Message handling - handlePcpMessage() in extension Controller

  3. Extension message processing - MessagingExtension.js:46 handlePcpMessage: function(oController, oEvent) { // Debug extension-specific handling: // - Message parsing // - Model updates // - UI notifications }

Using browser DevTools for WebSocket debugging

Chrome/Edge Network tab

  1. Filter by WS: Click “WS” filter to show only WebSocket connections

  2. Inspect Connection:

    1. Click on the WebSocket entry

    2. View “Messages” tab for all traffic

    3. Check “Headers” for connection details

Key things to look for

  • Connection URL: Should include wss:// or ws:// protocol

  • Status Code: 101 (Switching Protocols) indicates success

  • Frames: Individual messages sent/received

  • Close Codes: Reason for disconnection

Messages not being received

  1. Set breakpoint at RealTimeController handleMessage()

  2. Check WebSocket frames in Network tab:

    1. Are messages arriving at browser?

    2. Is message format correct?

  3. Verify plugin registration:

    1. Is MessagingExtension loaded?

    2. Is it subscribed to correct message types?

WebSocket Troubleshooting Checklist

☐ WebSocket URL is correct (HTTPS protocol, host, path, parameters)

☐ Authentication is valid (cookies, tokens)

☐ Network allows WebSocket connections

☐ Firewall/proxy supports WebSocket upgrade

☐ Server WebSocket endpoint is running

☐ Client has stable network connection

☐ Message format matches expected structure

☐ Extension is properly registered and loaded

☐ No JavaScript errors in console

Quick reference: key variables and methods

Variables to monitor

  • formValues: Data being sent to SAP

  • screenModel: Current screen state

  • rawData: Raw SAP response

  • settingsModel: Application configuration

  • realtimeController: WebSocket manager

  • MessagingModel: Messaging state

Key methods

  • sendToSAP(): Initiates SAP communication

  • handleSAPResponse(): Processes SAP responses

  • sendToSAPFailure(): Handles errors

  • callAjaxWithRetry(): Manages retries

  • connectToSocket(): Establishes WebSocket connection

  • handlePcpMessage(): Processes realtime messages

Event bus events

  • "SAPTriggers", "SendDataReady": Triggers data send

  • "startSession": Initiates new session

  • "logoff": Handles session end

Remember

Always check the Console for JavaScript errors first - they often point directly to the issue!

Application file structure

This SAPUI5-based application follows a modular architecture designed for SAP EWM (Extended Warehouse Management) RF (Radio Frequency) devices. Below is the complete directory structure and purpose of each section:

Root Level Files

  • Component.js: Main UI5 component that initialises the application

  • Platform.js: Platform-specific utilities and detection

  • manifest.json: Application descriptor containing configuration, dependencies, and routing

  • index.html: Entry point HTML file that loads the UI5 framework

/controller/

Core application controllers handling business logic and user interactions:

  • App.controller.js: Main application controller managing SAP communication, session handling, and screen navigation

  • BaseScreen.js: Base controller class providing common functionality for all screens

  • Login.controller.js: Handles user authentication and login flow

  • MenuScreen.controller.js: Controls the main menu navigation

  • MessageScreen.controller.js: Manages message display screens

  • RFListScreen.controller.js: Controller for RF list-based screens

  • RealTimeController.js: Manages WebSocket connections for real-time communication

  • StandardRFScreen.controller.js: Standard RF screen controller with common RF functionality

/css/

Application styling:

  • main_style.css: Primary application styles

  • style.css: Additional custom styles

/dialog/

Reusable dialog components:

  • BaseDialog.js: Base class for all dialogs

  • ButtonListDialog.js: Dialog for displaying button lists

  • ScreenMaintenanceDialog.js: Administrative dialog for screen maintenance

  • ShortcutDialog.js: Dialog for keyboard shortcuts

  • TechInfoDialog.js: Technical information display dialog

  • UomDialog.js: Unit of Measure selection dialog

/extensions/

Modular extensions that add functionality to the base application:

/extensions/ExtensionBase.js

Base class for all extensions providing common functionality

/extensions/analytics/

Analytics tracking extension:

  • AnalyticsExtension.js: Main analytics implementation

  • README.md: Analytics documentation

  • i18n.properties: Internationalization strings

/extensions/customer/

Customer-specific customizations:

  • CustomerExtension.js: Customer-specific functionality

  • extension.css: Customer-specific styles

  • i18n.properties: Customer-specific translations

/extensions/gamification/

Gamification features for warehouse workers:

  • GamificationExtension.js: Main gamification logic

  • CountdownControl.js: Countdown timer control

  • GameDialog.fragment.js: Game dialog UI fragment

  • GameDialog.js: Game dialog controller

  • extension.css: Gamification styles

  • README.md: Gamification documentation

  • i18n.properties: Gamification translations

/extensions/images/

Image capture and display functionality:

  • ImageExtension.js: Main image handling extension

  • ImageCaptureButton.js: Custom button for image capture

  • ImageCaptureButtonRenderer.js: Renderer for capture button

  • ImageCaptureControl.js: Image capture control

  • ImageDisplayControl.js: Image display control

  • extension.css: Image-related styles

  • README.md: Image extension documentation

  • i18n.properties: Image extension translations

/extensions/messaging/

Real-time messaging capabilities:

  • MessagingExtension.js: Main messaging implementation

  • MessagingDialog.fragment.js: Messaging UI fragment

  • MessagingDialog.js: Messaging dialog controller

  • extension.css: Messaging styles

  • README.md: Messaging documentation

  • i18n.properties: Messaging translations

/extensions/receivingApp/

Specialized receiving application features:

  • ReceivingExtension.js: Main receiving extension

  • DeliveryOverview.controller.js: Delivery overview controller

  • DeliveryOverview.view.js: Delivery overview view

  • UnifiedSearch.controller.js: Unified search functionality

  • UnifiedSearch.view.js: Unified search view

  • style.css: Receiving app styles

  • README.md: Receiving app documentation

  • i18n.properties: Receiving app translations

/i18n/

Internationalization files supporting multiple languages:

  • i18n.properties: Default language properties

  • i18n_en.properties: English translations

  • i18n_en_GB.properties: British English translations

  • i18n_en_US.properties: American English translations

  • main_i18n.properties: Main application strings (default)

  • main_i18n_en.properties: Main application strings (English)

  • main_i18n_en_GB.properties: Main application strings (British English)

  • main_i18n_en_US.properties: Main application strings (American English)

/model/

Data models and parsers:

  • SAPScreenModel.js: Main model for processing and storing SAP screen data

  • ButtonParser.js: Parses button definitions from SAP responses

  • ElementDefinitionParser.js: Parses UI element definitions

  • ElementPositionParser.js: Handles element positioning logic

/settings/

Configuration files:

  • settings.tmpl.json: Template for settings file containing runtime configuration (base URL, timeouts, feature flags)

/standardScreenControls/

Reusable UI controls for RF screens:

  • BaseControl.js: Base class for all custom controls

  • Carousel.js: Carousel control for multiple items

  • CarouselRenderer.js: Renderer for carousel control

  • CheckBox.js: Custom checkbox implementation

  • ControlFactory.js: Factory for creating controls dynamically

  • DatePicker.js: Date selection control

  • Input.js: Standard input field

  • InputNumeric.js: Numeric-only input field

  • Label.js: Text label control

  • ObjectIdentifier.js: Object identification display

  • ObjectNumber.js: Numeric display control

  • Select.js: Dropdown selection control

  • Text.js: Text display control

  • TimePicker.js: Time selection control

  • UoMDialog.js: Unit of Measure dialog control

/standardScreenControls/controls/

Specialized controls:

  • AppleNumericInput.js: iOS-optimized numeric input

  • AppleNumericInputRenderer.js: Renderer for Apple numeric input

/standardScreenControls/tables/

Table controls for data display:

  • BaseTable.js: Base class for all table types

  • FullDataTable.js: Full-featured data table

  • ObjectItemList.js: List of object items

  • StepLoopTable.js: Step loop table implementation

/view/

UI views and fragments:

  • App.js: Main application view

  • ButtonListDialog.fragment.js: Button list dialog fragment

  • Login.view.xml: Login screen XML view

  • LoginLoadingDialog.fragment.xml: Loading dialog during login

  • LoginSessionQueryDialog.fragment.xml: Session query dialog

  • LoginViewExtension.fragment.xml: Login view extensions

  • Main.view.xml: Main container view

  • MenuScreen.js: Menu screen JavaScript view

  • MessageScreen.js: Message screen JavaScript view

  • RFListScreen.js: RF list screen JavaScript view

  • ScreenMaintenanceDialog.fragment.js: Screen maintenance fragment

  • ShortcutDialog.fragment.js: Shortcut dialog fragment

  • StandardRFScreen.js: Standard RF screen JavaScript view

  • TechInfoDialog.fragment.js: Technical info dialog fragment

  • UomDialog.fragment.js: Unit of measure dialog fragment

PreviousTroubleshootingNextPrerequisites and assumptions

Last updated

Was this helpful?