Module 31: Debugging & Troubleshooting

Debugging is where theory meets reality.
In SAPUI5 projects, most production issues are caused by data, performance, or integration problems, not syntax errors.

This module covers end-to-end troubleshooting, from browser to backend.

---

1. Browser Developer Tools (Primary Tool)

---

Why Browser Dev Tools Matter

SAPUI5 runs in the browser, so Chrome DevTools / Edge DevTools are your first line of debugging.

---

Key DevTools Tabs

Tab	Purpose
Console	JS errors, logs
Network	OData calls, payloads
Sources	JS debugging
Performance	Rendering & CPU
Application	Storage, cache

Rule #1

If you can’t debug in DevTools, you can’t debug UI5.

---

Console Debugging

console.log("Debug value:", oData);
debugger;

Tip

debugger; pauses execution instantly.

---

2. UI5 Diagnostics & Built-in Tools

---

UI5 Support Assistant

The UI5 Support Assistant helps detect:

Performance issues

Deprecated APIs

Accessibility problems

Activate via:

Ctrl + Alt + Shift + P

Best Practice

Run Support Assistant before moving to QA.

---

UI5 Diagnostic Mode

Append to URL:

?sap-ui-debug=true

Effects:

Loads non-minified sources

Easier debugging

Note

Use only in DEV, not PROD.

---

3. Network Tracing (Very Important)

---

Why Network Tracing?

Most UI5 issues involve:

OData calls

Payload size

Authorization errors

---

What to Check in Network Tab

Request URL

HTTP method

Status code

Request/response payload

Response time

---

Common HTTP Status Codes

Code	Meaning
200	Success
400	Bad request
401	Not authenticated
403	Not authorized
500	Backend error

Interview Insight

UI5 bugs often hide in 200 OK responses with error messages inside.

---

4. OData Debugging (Frontend + Backend)

---

Frontend OData Debugging

Inspect payload in Network tab

Verify $filter, $select, $expand

Check CSRF token handling

---

Backend Debugging (ABAP)

Transactions:

• /IWFND/GW_CLIENT – Test OData
• /IWBEP/ERROR_LOG – Gateway errors
• ST22 – Dumps
• ST05 – SQL trace

Full-Stack Skill

A good UI5 developer must understand backend traces.

---

5. Common Production Issues & Fixes

---

Issue 1: App loads but no data shown

Checks:

• OData call status
• Binding path correctness
• Authorization restrictions
• $select missing fields

---

Issue 2: Button visible but action fails

Cause:

• Backend authorization missing

Fix:

• Enforce authorization in backend
• Handle 403 gracefully in UI

---

Issue 3: App is slow in production

Checks:

• Payload size
• Table growing/paging
• Full model refresh
• Heavy formatters

---

Issue 4: Works in DEV, fails in PROD

Causes:

• Missing transport
• Caching issues
• Authorization differences

---

6. Logging & Error Handling Patterns

---

Frontend Logging

try {
  // logic
} catch (e) {
  console.error(e);
}

---

Central Error Handling

this.getView().getModel().attachRequestFailed(function (oEvent) {
  // Global error handler
});

Best Practice

Handle errors once, centrally.

---

7. Troubleshooting Performance Issues

---

Performance Debugging Steps

Check Network payload

Analyze rendering time

Inspect binding usage

Review table configuration

---

Chrome Performance Tab

Use to:

Detect long JS tasks

Identify re-rendering loops

Find memory leaks

---

8. Debugging RAP + UI5 Issues

---

Common RAP Integration Problems

Issue	Cause
Action not visible	Missing annotation
Draft not working	Behavior definition issue
Validation error	RAP validation logic
No commit	Expected (RAP handles commit)

RAP Trap

Never debug commit logic in UI5.

---

9. Debugging Checklist (Real Project)

Checklist

• Browser Console clean?
• Network calls correct?
• Payload optimized?
• Backend traces checked?
• Authorization verified?

---

10. Interview-Grade Explanation

Q: How do you debug SAPUI5 production issues?

Answer:

I start with browser DevTools to analyze console errors and network calls, inspect OData payloads and HTTP statuses, use UI5 diagnostics like Support Assistant, and then debug backend services using Gateway logs, ST22, and SQL traces if required.

---

11. Summary

• Browser DevTools are essential
• UI5 diagnostics reveal hidden issues
• Network tracing exposes OData problems
• Backend debugging completes the picture
• Most issues are data or performance related
• Structured troubleshooting saves time