161 lines
4.0 KiB
Markdown
161 lines
4.0 KiB
Markdown
# 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:
|
|
```javascript
|
|
{
|
|
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:
|
|
```bash
|
|
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:
|
|
```bash
|
|
npm run seed-templates
|
|
```
|
|
|
|
This will add 4 sample notification templates for testing.
|
|
|
|
### Step 3: Run Both Tests
|
|
|
|
Run the combined debugging command:
|
|
```bash
|
|
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:
|
|
```javascript
|
|
{
|
|
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 |