PS-1097 [Fix] Add documentation for custom headers feature#206
PS-1097 [Fix] Add documentation for custom headers feature#206
Conversation
- Introduced a new guide on setting up custom headers in Fliplet applications, including step-by-step instructions and example configurations. - Updated sitemap to include the new Custom Headers documentation page. - Modified default layout to link to the new Custom Headers page.
|
Caution Review failedThe pull request is closed. WalkthroughAdded a new "Custom headers" documentation page explaining planning, configuration, examples, troubleshooting and best practices; updated the docs sidebar to link the page under "Advanced topics"; added the page to the sitemap; and recorded a new Native Framework changelog entry (v6.4.5). Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested reviewers
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
docs/Custom-Headers.md(1 hunks)docs/_layouts/default.html(1 hunks)docs/sitemap.xml(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/Custom-Headers.md
[style] ~14-~14: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... 1. Open your app: Open the app you want to configure with custom headers 2. **Acc...
(REP_WANT_TO_VB)
🪛 markdownlint-cli2 (0.17.2)
docs/Custom-Headers.md
10-10: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
16-16: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
18-18: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
38-38: Ordered list item prefix
Expected: 1; Actual: 4; Style: 1/1/1
(MD029, ol-prefix)
40-40: Ordered list item prefix
Expected: 1; Actual: 5; Style: 1/1/1
(MD029, ol-prefix)
47-47: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
48-48: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
131-131: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
132-132: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
136-136: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
137-137: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
138-138: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
139-139: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
144-144: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
145-145: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
146-146: Ordered list item prefix
Expected: 1; Actual: 4; Style: 1/1/1
(MD029, ol-prefix)
147-147: Ordered list item prefix
Expected: 1; Actual: 5; Style: 1/1/1
(MD029, ol-prefix)
🔇 Additional comments (1)
docs/Custom-Headers.md (1)
54-66: Snippet is never invoked
Unlike the first example, the CSP demo defines the function but doesn’t call it, so copying it verbatim won’t do anything.-async function setCSPHeaders() { +async function setCSPHeaders() { await Fliplet.App.Settings.set({ … }); } + +// Run immediately +setCSPHeaders();Repeat for the remaining examples or add a note telling readers to call the function.
| <url> | ||
| <loc>https://developers.fliplet.com/Custom-Headers.html</loc> | ||
| <lastmod>2025-07-17T10:24:50+00:00</lastmod> | ||
| <priority>0.80</priority> | ||
| </url> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Missing change frequency element
All other <url> blocks omit changefreq, which is fine, but if you intend to start declaring it, be consistent. Either keep the new block minimal (recommended) or add <changefreq> across the board.
🤖 Prompt for AI Agents
In docs/sitemap.xml around lines 205 to 209, the new <url> block includes a
<priority> element but lacks a <changefreq> element, which is inconsistent with
other blocks. To fix this, either remove the <priority> element to keep the
block minimal like the others or add a <changefreq> element to all <url> blocks
for consistency. The recommended approach is to keep the new block minimal by
removing the <priority> element.
| <li><a href="/Custom-Headers.html">Custom headers</a></li> | ||
| <li><a href="/Best-practises.html">Coding practice and advices</a></li> | ||
| <li><a href="/Reduce-app-bundle-size.html">Reduce your app’s bundle size</a></li> |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Link text capitalisation is inconsistent with neighbours
• Most entries under “Advanced topics” use sentence-case (“Event emitter”, “Context targeting”, etc.).
• Use “Custom headers” or rename the file to Custom-headers.html to keep naming aligned; currently one is Title-case, one sentence-case. Pick one style and stick to it.
🤖 Prompt for AI Agents
In docs/_layouts/default.html around lines 302 to 304, the link text "Custom
headers" uses Title-case while neighboring entries use sentence-case, causing
inconsistency. To fix this, change the link text to "Custom headers" in
sentence-case to match others, or alternatively rename the file to use
Title-case consistently. Ensure both the link text and filename follow the same
capitalization style for uniformity.
| ## Common Header Types | ||
|
|
||
| | Header Name | Purpose | Example Value | | ||
| |-------------|---------|---------------| | ||
| | `Content-Security-Policy` | Security policy for resource loading | `default-src 'self'` | | ||
| | `X-Frame-Options` | Prevent clickjacking | `DENY` or `SAMEORIGIN` | | ||
| | `X-Content-Type-Options` | Prevent MIME type sniffing | `nosniff` | | ||
| | `Cache-Control` | Control caching behavior | `no-cache, no-store` | | ||
| | `X-Custom-Header` | Custom application headers | `YourCustomValue` | | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Table header alignment typo
Purpose column should be plural to match the others or keep consistent singular—choose one style across docs.
🤖 Prompt for AI Agents
In docs/Custom-Headers.md around lines 116 to 125, the table header "Purpose" is
inconsistent with the other headers in terms of plurality. Update the "Purpose"
column header to either plural "Purposes" or change all headers to singular for
consistency across the documentation. Ensure the chosen style is applied
uniformly to maintain a consistent format.
| ### Debugging Tips | ||
|
|
||
| - Use browser developer tools to inspect network requests and headers | ||
| - Test headers incrementally to identify issues | ||
| - Check the browser console for any related errors | ||
| - Verify header syntax and values | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Nested list indentation fails markdownlint MD007
Indent the bullets by two spaces to render correctly.
- - Use browser developer tools …
- - Test headers incrementally …
+ - Use browser developer tools …
+ - Test headers incrementally …Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
136-136: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
137-137: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
138-138: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
139-139: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
🤖 Prompt for AI Agents
In docs/Custom-Headers.md around lines 134 to 140, the nested list indentation
does not follow markdownlint MD007 rules, causing rendering issues. Fix this by
indenting each bullet point by two spaces to ensure proper nested list
formatting and correct display in markdown viewers.
| ```javascript | ||
| async function setCustomHeaders() { | ||
| await Fliplet.App.Settings.set({ | ||
| enableCustomHeaders: true, | ||
| customHeaders: [ | ||
| // Replace header name and value with your desired configuration | ||
| { | ||
| name: 'Content-Security-Policy', | ||
| value: "default-src 'self';" | ||
| } | ||
| ] | ||
| }); | ||
| Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' }); | ||
| } | ||
|
|
||
| setCustomHeaders(); | ||
| ``` |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to the installation snippet
End-users will paste this verbatim; an unhandled promise rejection will confuse them if something fails (e.g. network/offline mode).
-async function setCustomHeaders() {
- await Fliplet.App.Settings.set({
+async function setCustomHeaders() {
+ try {
+ await Fliplet.App.Settings.set({
enableCustomHeaders: true,
customHeaders: [
…
]
- });
- Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' });
+ });
+ Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' });
+ } catch (err) {
+ Fliplet.Modal.alert({ message: 'Failed to set custom headers: ' + err.message });
+ throw err;
+ }
}This small guard prevents silent failures and teaches best practice.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```javascript | |
| async function setCustomHeaders() { | |
| await Fliplet.App.Settings.set({ | |
| enableCustomHeaders: true, | |
| customHeaders: [ | |
| // Replace header name and value with your desired configuration | |
| { | |
| name: 'Content-Security-Policy', | |
| value: "default-src 'self';" | |
| } | |
| ] | |
| }); | |
| Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' }); | |
| } | |
| setCustomHeaders(); | |
| ``` |
🤖 Prompt for AI Agents
In docs/Custom-Headers.md between lines 20 and 36, the async function
setCustomHeaders lacks error handling, which can cause unhandled promise
rejections if the operation fails. Wrap the await call in a try-catch block to
catch any errors, and in the catch block, display an alert or log an error
message to inform the user about the failure. This will prevent silent failures
and improve user experience.
| ### Step 1: Plan your headers | ||
|
|
||
| 1. **Identify your needs**: Determine what custom headers you want to add to your app | ||
| 2. **Research requirements**: Understand the specific header format and values needed for your use case | ||
|
|
||
| ### Step 2: Assign custom headers to your Fliplet application | ||
|
|
||
| 1. **Open your app**: Open the app you want to configure with custom headers | ||
|
|
||
| 2. **Access Developer Options**: Click the `</>` icon on the right-hand toolbar to open Developer Options | ||
|
|
||
| 3. **Add the configuration code**: In the JavaScript section, paste the following code snippet, making sure to replace the example headers with your desired configuration: |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Broken ordered-list numbering and duplication picked up by markdownlint
All items should start with 1. so GitHub can auto-number, and the repeated “Open” verb can be removed for variety.
-### Step 2: Assign custom headers to your Fliplet application
-
-1. **Open your app**: Open the app you want to configure with custom headers
-
-2. **Access Developer Options**: Click the `</>` icon on the right-hand toolbar to open Developer Options
-
-3. **Add the configuration code**: In the JavaScript section …
+### Step 2: Assign custom headers
+
+1. **Open your app** in Fliplet Studio.
+1. **Open Developer Options** by clicking the `</>` icon in the right-hand toolbar.
+1. **Add the configuration code** in the JavaScript section …Fixing this removes MD029 warnings and improves readability.
🧰 Tools
🪛 LanguageTool
[style] ~14-~14: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... 1. Open your app: Open the app you want to configure with custom headers 2. **Acc...
(REP_WANT_TO_VB)
🪛 markdownlint-cli2 (0.17.2)
10-10: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
16-16: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
18-18: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
🤖 Prompt for AI Agents
In docs/Custom-Headers.md around lines 7 to 18, the ordered list numbering is
inconsistent and the repeated use of the word "Open" reduces readability. Change
all ordered list items to start with "1." to enable GitHub's auto-numbering and
rephrase the steps to avoid repeating "Open," improving clarity and fixing
markdownlint MD029 warnings.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
docs/Custom-Headers.md (4)
14-18: Unify ordered-list prefixes and avoid tautology in “Step 2”.The list still uses incremental numbers (
1.,2.,3.) instead of GitHub-friendly1.for every item, and the first bullet repeats “Open” unnecessarily. Both issues were raised previously but remain unresolved.-1. **Open your app**: Open the app you want to configure with custom headers - -2. **Access Developer Options**: Click the `</>` icon on the right-hand toolbar to open Developer Options - -3. **Add the configuration code**: In the JavaScript section, paste the following code snippet, making sure to replace the example headers with your desired configuration: +1. **Open your app in Fliplet Studio.** +1. **Open Developer Options** by clicking the `</>` icon in the right-hand toolbar. +1. **Add the configuration code** in the JavaScript section, replacing the example headers with your desired configuration:
20-33: Add basic error-handling to the setup snippet.As flagged earlier, the async call is still unguarded; a network failure will produce an unhandled rejection for users copying this verbatim.
-async function setCustomHeaders() { - await Fliplet.App.Settings.set({ +async function setCustomHeaders() { + try { + await Fliplet.App.Settings.set({ enableCustomHeaders: true, customHeaders: [ // Replace header name and value with your desired configuration { name: 'Content-Security-Policy', value: "default-src 'self';" } ] - }); - Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' }); + }); + Fliplet.Modal.alert({ message: 'The custom header has been added. You can now remove the code.' }); + } catch (err) { + Fliplet.Modal.alert({ message: 'Failed to set custom headers: ' + err.message }); + throw err; + } }
118-118: Table header plurality is inconsistent.Change “Purpose” to “Purposes” (or singularise the other columns) to keep grammatical form consistent with “Header Name”/“Example Value”.
-| Header Name | Purpose | Example Value | +| Header Name | Purposes | Example Value |
136-139: Indent nested bullets to satisfy MD007 and render properly.Indent each tip by two spaces:
-- Use browser developer tools to inspect network requests and headers -- Test headers incrementally to identify issues -- Check the browser console for any related errors -- Verify header syntax and values + - Use browser developer tools to inspect network requests and headers + - Test headers incrementally to identify issues + - Check the browser console for any related errors + - Verify header syntax and values
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
docs/Custom-Headers.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/Custom-Headers.md
[style] ~14-~14: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... 1. Open your app: Open the app you want to configure with custom headers 2. **Acc...
(REP_WANT_TO_VB)
🪛 markdownlint-cli2 (0.17.2)
docs/Custom-Headers.md
10-10: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
16-16: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
18-18: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
38-38: Ordered list item prefix
Expected: 1; Actual: 4; Style: 1/1/1
(MD029, ol-prefix)
40-40: Ordered list item prefix
Expected: 1; Actual: 5; Style: 1/1/1
(MD029, ol-prefix)
47-47: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
48-48: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
131-131: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
132-132: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
136-136: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
137-137: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
138-138: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
139-139: Unordered list indentation
Expected: 2; Actual: 0
(MD007, ul-indent)
144-144: Ordered list item prefix
Expected: 1; Actual: 2; Style: 1/1/1
(MD029, ol-prefix)
145-145: Ordered list item prefix
Expected: 1; Actual: 3; Style: 1/1/1
(MD029, ol-prefix)
146-146: Ordered list item prefix
Expected: 1; Actual: 4; Style: 1/1/1
(MD029, ol-prefix)
147-147: Ordered list item prefix
Expected: 1; Actual: 5; Style: 1/1/1
(MD029, ol-prefix)
| 4. **Save and remove the code**: Once saved, you'll see a success message. You can then delete the code snippet and save the Developer Options again | ||
|
|
||
| 5. **Publish your app**: Your app will need to have its changes published via Studio in order for the custom headers to be set |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consistently use 1. for ordered lists across the document.
Several lists still violate MD029 by continuing numeric order (items start with 4, 5, 2, etc.). Reset every item to 1. so GitHub auto-numbers correctly; this also improves diff readability for future edits.
Example for lines 38-40:
-4. **Save and remove the code**: …
-5. **Publish your app**: …
+1. **Save and remove the code**: …
+1. **Publish your app**: …Also applies to: 46-48, 130-132, 143-147
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
38-38: Ordered list item prefix
Expected: 1; Actual: 4; Style: 1/1/1
(MD029, ol-prefix)
40-40: Ordered list item prefix
Expected: 1; Actual: 5; Style: 1/1/1
(MD029, ol-prefix)
🤖 Prompt for AI Agents
In docs/Custom-Headers.md around lines 38 to 40, the ordered list numbering is
inconsistent, using numbers like 4 and 5 instead of resetting to 1. To fix this,
change all list item numbers in these lines to 1. This allows GitHub to
auto-number the list correctly and improves readability. Apply the same fix to
lines 46-48, 130-132, and 143-147 as well.
…5, highlighting the Fastlane update to 2.228.0 for iOS.
|
As this is for the dev docs I don't think we need to explain how to use this code in Studio. We should describe the JS API and we should include examples. See the coding standards I have proposed as part of the DS doc changes. We should have examples to demonstrate how it works. |
2 participants
Product areas affected
What does this PR do?
JIRA ticket
PS-1097
Summary by CodeRabbit