Nas-Notification/NOTIFICATION_TEMPLATES_DEBUG.md

Notification Templates Error Debugging Guide

Issue Description

Error: Cannot read properties of undefined (reading 'map') Location: pages/notification/templates/index.vue line 399 Cause: The frontend is trying to call .map() on response.data.templates but this property is undefined.

Root Cause Analysis

The error occurs because the API response doesn't have the expected structure. The frontend expects:

{
  success: true,
  data: {
    templates: [...], // Array of templates
    pagination: {...}
  }
}

But the API might be returning:

• An error response
• A response with missing data property
• A response with missing data.templates property
• An empty or malformed response

Potential Causes

1. Database Issues:

   • Database connection failure
   • Missing notification_templates table
   • Table exists but has no data

2. Authentication Issues:

   • User not authenticated
   • Authentication middleware failing
   • Missing user context in API

3. API Implementation Issues:

   • Error in API endpoint logic
   • Prisma query failure
   • Unhandled exceptions

Debugging Steps

Step 1: Test Database Connection and Data

Run the database test script:

npm run test-api

This will:

• Test database connection
• Check if notification_templates table exists
• Show current data count
• Simulate the API logic
• Display the expected response structure

Step 2: Add Sample Data

If the table is empty, seed it with sample data:

npm run seed-templates

This will add 4 sample notification templates for testing.

Step 3: Run Both Tests

Run the combined debugging command:

npm run debug-templates

This runs both the test and seeding scripts.

Step 4: Check Authentication

Ensure you are logged in when testing the frontend. The API requires authentication.

Frontend Fixes Applied

The frontend code has been updated with better error handling:

1. Defensive Programming: Check if response structure exists before accessing
2. Better Error Messages: More specific error messages based on response type
3. Empty State Handling: Properly handle empty arrays
4. Loading State Management: Consistent loading state management

API Response Structure

The API should return:

{
  success: true,
  data: {
    templates: [
      {
        id: "uuid",
        title: "Template Name",
        value: "template_value",
        description: "Description",
        subject: "Email Subject",
        category: "category",
        channels: ["email", "push"],
        status: "Active",
        version: "1.0",
        // ... other fields
      }
    ],
    pagination: {
      page: 1,
      limit: 10,
      totalCount: 5,
      totalPages: 1,
      hasNextPage: false,
      hasPrevPage: false
    }
  }
}

Quick Fix Summary

1. Frontend: Added robust error handling to prevent crashes
2. Testing: Created scripts to test database and API logic
3. Sample Data: Created seeding script for testing
4. Debugging: Added comprehensive logging and error reporting

Next Steps

1. Run npm run debug-templates to diagnose the issue
2. Check the console output for specific errors
3. If database connection fails, check your DATABASE_URL environment variable
4. If authentication fails, ensure you're logged in
5. If the API works in testing but fails in the browser, check browser console for network errors

Files Modified

• pages/notification/templates/index.vue - Added error handling
• scripts/seed-templates.js - Sample data seeding
• scripts/test-api.js - Database and API testing
• package.json - Added debugging scripts

Environment Requirements

• Database server running
• Valid DATABASE_URL in environment
• Prisma client generated (npx prisma generate)
• Database migrations applied

Support

If the issue persists after following these steps, check:

1. Database server status
2. Environment variables
3. Prisma schema sync with database
4. Network connectivity
5. Authentication middleware configuration