How to Debug in Momen

Debugging is a critical aspect of application development. Learning how to observe issues, pinpoint errors, and resolve problems in cases of errors and exceptions is a fundamental skill for developers. Among these, observation is the most crucial step, serving as the foundation for subsequent actions. Therefore, this document primarily focuses on how to observe and extract necessary information in Momen.

Momen categorizes errors into three types: Editing Errors, Deployment and Publishing Errors, and Runtime Errors. This document provides guidance on how to debug each type of error.

Editing Errors

Symptoms

• The error icon in the top-right corner of the editor displays a number.

Solution

• Click the icon to navigate to the error and modify the issue based on the error message.

• Below are two examples:

Example 1: Type Error

• Type mismatch in component, action, or bound data.

  • Expected type: (Null | Nothing | Int)

  • Actual type: String

• Analysis & Solution: Entering "$1" in a price field triggers a type error since the field requires an integer value. Remove the "$" symbol to resolve the issue.

  

Example 2: Missing Required Field

• The system detects that a required field is not provided.

• Modify the field according to the error message.

---

Deployment and Publishing Errors

Symptoms

1. Error during preview update.

2. Backend deployment failure.

Solution

1. Check the error message (if available).

2. Fix the issue based on the provided error details. If unclear, ask AI for assistance.

3. Report the issue to our team.

Example: Backend Update Failure

• Solution: Click "Report Issue," and the support team will handle it.

UI Display Issues in Production

Symptoms

• Components that appear aligned in the editor may be misaligned in the preview.

• Components that fit within the editor may exceed the screen width on mobile devices.

Solution

1. Check UI Design Configurations

Example 1: Two components appear left-aligned in the editor, but one uses relative positioning while the other uses absolute positioning. This causes misalignment on different screen widths.

Example 2: A text component inside a view component overflows. To fix this, change the view’s overflow setting from "visible" to "hidden" or "scroll."

1. Report Possible Bugs

   If no configuration errors are found, report the issue to our team.

---

Request Errors

Quick Error Handling

When a request error occurs, the frontend page or request log usually displays an error message.

• Use the Request Error Reference to diagnose and resolve common errors

• Alternatively, AI can help analyze errors based on logs and request data. Below is the prompt for reference (add your own information in step 5)

• You are an expert developer proficient in PostgreSQL databases and GraphQL APIs. Your task is to:
  1. Analyze the Request Information:
  Check whether the GraphQL request syntax is correct, including queries, mutations, and subscriptions.
  Understand the request’s intent—what data or operations the user aims to perform.
  Examine any error messages returned by the database.
  2. Identify Error Type and Cause:
  Determine the specific type of error (e.g., syntax error, type mismatch, database constraint violation).
  Analyze potential causes, such as: 
  Syntax or type errors in the GraphQL request.
  Database constraint violations (e.g., uniqueness constraint, foreign key constraint).
  Database connection or permission issues.
  3. Provide a Detailed Error Description and Solution:
  Clearly describe each identified error, specifying the affected field, parameter, or table.
  Offer at least one precise and actionable solution. The solution should be concrete and guide the user in modifying their request or database configuration.
  Provide additional recommendations or best practices to prevent similar errors in the future.
  Avoid suggestions specific to the GraphQL API layer.
  If you cannot determine the cause, simply state that you do not know.
  4. Output Formatting Requirements:
  First, confirm whether an error exists.
  If errors are present, list them in a numbered or bulleted format.
  For each error, follow this structure: 
  Error Description: [Clear and concise error explanation]
  Solution: [Actionable steps to resolve the issue]
  If no apparent errors exist but the response data seems problematic, highlight potential issues and troubleshooting steps.
  5. Example Error for Analysis:
  ```
  StatementCallback; ERROR: duplicate key value violates unique constraint "unique_blog_m8fifp2i"\n Detail: Key (title)=(1) already exists.
  ```

Identifying Faulty Requests

Find Errors in Browser Using Developer Tools or in Momen's Log

• Browser: Press F12 or right-click > "Inspect" > Open debugging mode > Click Network > Find graphql-v2 requests.

• Momen Logs: Click "Logs" in the editor for more detailed logs.

Analyze Request & Response Data

In a request, we need to focus on:

• Request Body: Contains critical information about the query structure and parameters. Find detailed information in "playload".

An example:

{
    "query": "query blogArticleList_82df5ec2($where: blog_article_bool_exp!,     $orderBy: [blog_article_order_by!]!) {blog_article ( where: $where order_by: $orderBy  limit: 2) { id \n title}\n\n}",
    "variables": {
        "where": {
            "title": {
                "_like": "%AI%"
            }
        },
        "orderBy": [
            {
                "created_at": "asc_nulls_last"
            }
        ]
    }
}

The query section contains the query statement, which defines the structure of the requested data. From this example, we can see that the query is targeting the blog_article table and is limited to retrieving two records (limit: 2).The variables section contains the parameters for this query, corresponding to the filter conditions, sorting, and deduplication settings configured in the editor. In this example, the "where" condition filters records where the title contains "AI", and the "orderBy" condition sorts the results in ascending order by "created_at".

• Response Body: Displays results and errors. Look for errors in the response when debugging.

An example: Permission Error Response:

{
   "data": null,
   "errors": [
      {
         "errorCode": 403,
         "extensions": { "classification": "TABLE_ACCESS" },
         "message": "User 1 has no permission for SELECT on order"
      }
   ]
}

Error Investigation & Fixes

• By examining the request body, check whether the query statements and parameters match the configurations in the editor.

• By analyzing the response body, check for any errors and verify if the results meet expectations.

• Once enough information is gathered, make an educated guess about the possible cause of the issue and attempt to fix it.

• If the cause of the error cannot be determined, provide the collected information to AI and refer to the prompt in Step 1 for assistance.

Case Studies

1. Payment/Refund Error:

   1. If a refund action fails, check the logs. If it's a permission issue, verify the project’s permission settings.

1. API Execution Error:

   1. Check request logs to find required fields that are missing values.

1. Actionflow Execution Failure:

   1. If an error occurs due to a missing field (e.g., foodwcost instead of foodcost), correct the field name.

      
2. Database Constraint Violations:

   1. Ensure unique values are not duplicated when inserting data.

      
3. Conditional Component Display Issue:

   1. If a component’s visibility depends on a data source (e.g., status should be "false" but is actually "true"), check the request to ensure data accuracy.

      

Debugging Best Practices

1. Clearly Define the Issue and Reproduce It

   • Document error behavior, including triggers and error messages.

   • Attempt to reproduce the issue under the same conditions.

2. Check Configurations by Module

Check the configuration logic of each functional module one by one. For example:

• Form: Ensure that field types, required rules, and data validation conditions are reasonable.

• Actionflow: Verify the step sequence, conditional branches, and permission assignments.

• Data Relationships: Check whether related fields between tables match.

Dependency Troubleshooting: If third-party services are used, check the connectivity and parameter configurations of external integration services.

1. Incremental Fixes & Testing

   • Modify one variable at a time to isolate the root cause.

---

Technical Support & Resources

1. Official Documentation: Check our doc for more details.

2. Community Support: Post questions on forum.momen.app or send email to us ([e-mail]).

   1. Provide detailed descriptions, including:

      • Expected action

      • Steps attempted

      • Error details (screenshots/logs preferred)

   2. Example of a good question: "I'm expecting X, but getting Y. I tried A and B. The issue appears on page C, component D. Here’s the error message: [screenshot]."

   3. Example of a bad question: "Why is my preview broken?"