Skip to content

Commit 4d63fee

Browse files
mrdavidorokmrdavidorok
committed
divided the contents in https://docs.flutterflow.io/troubleshooting into 5 parts and added to articles in troubleshooting section.
1 parent bf47a97 commit 4d63fee

File tree

5 files changed

+148
-0
lines changed

5 files changed

+148
-0
lines changed

‎docs/troubleshooting/deployment/resolve_errors_in_downloaded_code.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,40 @@ When you download your project from FlutterFlow and run it locally in your IDE,
3131

3232
If the current version on your machine is different than what is currently supported by FlutterFlow, you can downgrade or upgrade to the supported version. You can learn more about [**upgrading Flutter**](/testing/local-run/#4-running-app-on-device). ​By following these steps, you can fix the errors that you face after downloading the code and run locally.
3333

34+
## Resolving In-App Errors Before Downloading
35+
36+
Sometimes, errors in your app — such as misconfigured widgets or faulty custom code — can cause download or build failures. FlutterFlow displays helpful error popups to help you catch and fix these issues before downloading your code.
37+
38+
- **Error popup**
39+
40+
If you see a popup, open the red-colored section (click *Read More*), and at the bottom, you will see the exact widget or error causing the build or download failure.
41+
42+
Let's see a couple of examples of what you might encounter while building your app:
43+
44+
**Example 1**
45+
46+
Suppose you have a Text widget and added an action that is incomplete. When you try to download the project in such a situation, you might see the following:
47+
48+
![Detecting issue -1](imgs/detecting-issue-1.avif)
49+
50+
To track down the error-causing widget in the widget tree, start reading the widget list (from top to bottom in a popup) and locate the widget using its child number. For example, when a widget is displayed as *Child 1*, it will be the first child of its previous widget (see the widget in a popup). And when it is shown as *Child 2,3*, and so on, it will be the sibling widget of *Child 1*.
51+
52+
If you have a practice of naming the widget, it will be straightforward to track it down (as we'll display the exact widget name). Here is how it looks:
53+
54+
![Detecting issue -2](imgs/detecting-issue-2.avif)
55+
56+
:::info
57+
To find out what caused the widget to fail, you can check errors in the [project issues](../intro/ff-ui/toolbar.md#project-issues).
58+
:::
59+
60+
**Example 2**
61+
62+
Let's say you have added a custom widget that works fine. But while modifying it, you made some typo in the code, and now it shows this:
63+
64+
![Error while building the app](imgs/error-while-building-app.png)
65+
66+
The second "**Error:"** line clearly mentions that there is some issue with a method name in a custom code.
67+
3468
If you continue to experience issues, contact the FlutterFlow support team via live chat or email at [email protected].
3569

3670

‎docs/troubleshooting/deployment/run_mode_build_failure.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,23 @@ This guide provides a structured approach to troubleshooting and resolving "Run
9393

9494
If the error is elusive, running the debugger locally on your downloaded code can help identify the issue.
9595

96+
**Use Device Logs in the FlutterFlow Desktop App**
97+
98+
If you're using the FlutterFlow Desktop App and running the app with a local run, you can access detailed logs that may point directly to the problem. These logs are especially helpful for catching runtime issues that might not appear in the FlutterFlow UI.
99+
100+
You can learn how to access these logs in this guide:
101+
[Access Device Logs in Local Run](../testing-deployment-publishing/running-your-app/local-run.md#access-device-logs-in-local-run)
102+
103+
For example, if a user enters a character instead of a numeric value for a quantity field, and that type mismatch causes an error, it will be captured in the logs — allowing you to identify and fix it quickly.
104+
105+
![Desktop app's device logs](imgs/desktop-app-device-logs.avif)
106+
107+
:::tip
108+
Not sure what the error means? Just copy and paste the full error message into ChatGPT and ask for help understanding it.
109+
:::
110+
111+
In fact, for the error shown above, **[we asked ChatGPT](https://chat.openai.com/share/77f3ceb5-6b2f-4f94-b85c-e01a1fce002a)** to explain and resolve the issue — and the solution turned out to be quick and simple.
112+
96113
- **Leverage browser tools**:
97114

98115
The browser's console and developer tools can offer insights, especially when dealing with errors that don't manifest in traditional debug outputs.

‎docs/troubleshooting/test-mode/firestore_permission_error-run_mode.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,16 @@ This error is typically triggered when:
5050

5151
Descriptive widget names can help you quickly identify which query or widget is triggering the permission issue. In the example above, the error message references a widget named Container. Renaming it to something like UserQueryContainer can make debugging easier.
5252

53+
**Runtime errors (Run mode-only notification)**
54+
55+
Runtime errors in app development are errors that occur during the execution of the app. Unlike the errors that we display while you build the app, runtime errors occur while the app is running.
56+
57+
For instance, if Firestore security rules aren't properly configured, the app might run into permission issues at runtime, leading to failures in data retrieval or display. This kind of error might not be evident during app building but becomes apparent only when the app interacts with the Firestore database during actual operation.
58+
59+
We display such errors as *Run mode-only notification* in a snack bar. Here's what it might look like:
60+
61+
![Runtime errors](imgs/runtime-errors.avif)
62+
5363
Take the steps below to fix this error:
5464

5565
- **Review Firestore Rules**

‎docs/troubleshooting/test-mode/gray_screen_run_mode.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,48 @@ Seeing a gray screen in Run Mode usually points to a configuration issue in your
9797

9898
If the issue persists, download your FlutterFlow code and run the project locally to diagnose further.
9999

100+
10. **Use Debug Info Panel in Test Mode**
101+
102+
If the issue is not visible in the console or config, the Debug Info panel can help you identify runtime logic or variable-related problems.
103+
104+
The Debug Info panel provides a real-time view of all the variables in your app along with their current values. It’s especially helpful to pinpoint unexpected values or missing data that might cause a blank or gray screen.
105+
106+
To use it:
107+
108+
1. Run your app in **Test mode**.
109+
2. Open the **Debug Info** panel on the left.
110+
3. Interact with your app and monitor the variables in real time.
111+
112+
![null](imgs/null.png)
113+
114+
For instance, if a dropdown variable is unexpectedly `null`, the Debug Info panel can help you trace and correct it. Once fixed, re-test the app to confirm resolution.
115+
116+
<div style={{
117+
position: 'relative',
118+
paddingBottom: 'calc(50.67989417989418% + 41px)',
119+
height: 0,
120+
width: '100%'}}>
121+
<iframe
122+
src="https://demo.arcade.software/TgIsoAjlnDiHaafypnpV?embed&show_copy_link=true"
123+
title=""
124+
style={{
125+
position: 'absolute',
126+
top: 0,
127+
left: 0,
128+
width: '100%',
129+
height: '100%',
130+
colorScheme: 'light'
131+
}}
132+
frameborder="0"
133+
loading="lazy"
134+
webkitAllowFullScreen
135+
mozAllowFullScreen
136+
allowFullScreen
137+
allow="clipboard-write">
138+
</iframe>
139+
</div>
140+
<p></p>
141+
100142
:::info[Additional Resources]
101143
- **[Run Flutter App Locally](/testing/local-run)**
102144
- **[FlutterFlow Firebase Integration Guide](/integrations/firebase/connect-to-firebase/#step-1-set-up-your-project)**

‎docs/troubleshooting/test-mode/slow_test_mode_load.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,51 @@ Projects with many pages, assets, or custom code may take longer to compile. Fol
4242
- Limit the number of pages in a single testing session.
4343
:::
4444

45+
## Open Debug Logs to Check for Errors
46+
47+
If none of the above steps resolve the issue, checking your browser’s debug console may reveal loading errors or script issues.
48+
49+
To open the debug logs, run your app in Run/Test mode and use the shortcut:
50+
51+
**For Google Chrome**
52+
53+
- **Windows**: `F12` or `Ctrl + Shift + J`
54+
- **Mac**: `F12` or `⌘ + Option + J`
55+
56+
**For Safari:**
57+
58+
1. Go to **Preferences** > **Advanced**
59+
2. Enable **Show Develop menu**
60+
3. Use `⌘ + Option + C` to open the console
61+
62+
Any loading or runtime errors will appear in red in the console.
63+
64+
<div style={{
65+
position: 'relative',
66+
paddingBottom: 'calc(56.67989417989418% + 41px)',
67+
height: 0,
68+
width: '100%'}}>
69+
<iframe
70+
src="https://demo.arcade.software/c0I844oLVtAR0e7YSbhC?embed&show_copy_link=true"
71+
title=""
72+
style={{
73+
position: 'absolute',
74+
top: 0,
75+
left: 0,
76+
width: '100%',
77+
height: '100%',
78+
colorScheme: 'light'
79+
}}
80+
frameborder="0"
81+
loading="lazy"
82+
webkitAllowFullScreen
83+
mozAllowFullScreen
84+
allowFullScreen
85+
allow="clipboard-write">
86+
</iframe>
87+
</div>
88+
<p></p>
89+
4590
:::info[Additional Resources]
4691
If the issue persists after following the steps above, check the
4792
**[official support](https://intercom.help/flutterflow/en/articles/7052737-test-mode-is-not-loading-or-is-very-slow-it-takes-a-long-time-to-load-the-app)** article.

0 commit comments

Comments
 (0)