1. Ticket Details

2. Issue Description

User facing issue in the HWC application. After filling in all the details under the Nurse section, when user tries to submit, an error screen appears.

3. Root Cause Analysis (RCA)

• Primary Root Cause Identified:
  
  Incorrect filter chaining in VAN list processing - The second filter operation in filterVanList() operates on the original unfiltered array instead of the result from the first filter, causing it to overwrite correctly filtered results with incorrect data. service.component.ts:104-114 of HWC-UI
  
  

• Why it happened:
  
  

  1. Incorrect variable reference: The second filter uses vanServicepointDetails (original array) instead of this.vansList (filtered result) service.component.ts:111-114
  2. Lack of intermediate variable: No intermediate variable was used to store the first filter's result before applying the second filter
  3. Duplicate code pattern: The same bug exists in both ServiceComponent and ServicePointComponent, suggesting copy-paste without proper review service-point.component.ts:146-156

   

• Why wasn't it caught earlier?
  
  The bug has low visibility because it requires specific data patterns to manifest, explaining why it wasn't caught in testing(still not reproducible in lower environments) or early production use.

4. Corrective Actions (Fixes for this instance)

Replace the second filter to operate on the filtered result:

this.vansList = vanServicepointDetails.filter((van: any) => {  
  if (van.vanSession === 3) {  
    return van;  
  }  
});

// Fix: Use this.vansList instead of vanServicepointDetails  
this.vansList = this.vansList.filter(  
  (thing: any, i: any, arr: any) =>  
    arr.findIndex((t: any) => t.vanID === thing.vanID) === i,  
);

Apply the same fix to both ServiceComponent.filterVanList() and ServicePointComponent.filterVanList(). service.component.ts:104-116 service-point.component.ts:146-157

5. Preventive Actions (To prevent recurrence)

1. Code Review Checklist

• Verify filter chains operate on intermediate results, not original arrays
• Check for duplicate filtering logic across components (e.g., ServiceComponent and ServicePointComponent)
• Ensure variable references match intended data flow

2. Code Quality Standards

• Use intermediate variables for multi-step transformations:

    const activeVans = vanServicepointDetails.filter(van => van.vanSession === 3);  
    const uniqueVans = activeVans.filter((van, i, arr) =>   
    arr.findIndex(t => t.vanID === van.vanID) === i);  
    this.vansList = uniqueVans;

• Add TypeScript strict null checks to catch undefined access
• Implement error handling for empty vansList scenarios

4. Shared Utility Functions

• Extract filtering logic into a shared service to prevent code duplication.

6. Verification of Effectiveness

• Test with API response containing multiple VANs with same vanID
• Verify correct VAN selection when vanSession: 3 is not first entry
• Confirm proper error messaging when no active sessions exist

7. Lessons Learned

1. Filter Chain Pitfalls

• Always operate on intermediate results, not original arrays in multi-step transformations
• JavaScript filter methods don't modify the original array - reassignment matters

2. Code Duplication Risks

• Duplicate logic across components (ServiceComponent and ServicePointComponent) doubles maintenance burden and bug surface area

3. Silent Failures

• Bugs that fail silently (setting undefined without errors) are harder to detect
• Add explicit validation and error handling for critical data flows

8. CAPA Review & Closure