Add tracking to landing page#309
Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughSummary by CodeRabbit
Walkthrough
Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser
participant NextApp as Next.js App
participant RB2B as RB2BLoader
participant Doc as Document
participant CDN as CloudFront CDN
User->>Browser: Navigate / change route
Browser->>NextApp: Render layout
NextApp->>RB2B: Mount / update with pathname
note over RB2B: On mount or pathname change
RB2B->>Doc: Query and remove element #rb2b-script (if present)
RB2B->>Doc: Create <script id="rb2b-script" async src=...>
Doc->>CDN: Request gzipped JS (URL uses NEXT_PUBLIC_RB2B_ID)
CDN-->>Doc: Serve script
Doc-->>Browser: Execute loaded script asynchronously
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
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 Review profile: ASSERTIVE Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (3)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @nk-ag, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request primarily focuses on enhancing the landing page with new tracking capabilities by integrating a third-party tracking solution. This involves adding a new React component responsible for dynamically loading the necessary tracking script. Additionally, a minor documentation fix was included to correct a Docker image reference in the state manager setup guide.
Highlights
- New Tracking Component Integration: A new
RB2BLoadercomponent has been introduced and integrated into theRootLayoutof the landing page. This component is responsible for dynamically loading a third-party tracking script, ensuring that tracking capabilities are active across the site. - Dynamic Script Loading with Environment Variables: The
RB2BLoadercomponent dynamically loads a tracking script from a CloudFront distribution, utilizing environment variables (NEXT_PUBLIC_RB2B_ID) to construct the script's URL. This setup allows for flexible configuration of the tracking service. - Documentation Correction: A minor but important correction was made in the
state-manager-setup.mddocumentation, updating the Docker image name fromstate-manager:latesttoexosphere-state-manager:latestto reflect the correct image name.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request adds tracking to the landing page by introducing a new component RB2BLoader that injects a third-party script. It also includes a fix for a Docker image name in the documentation.
My review focuses on the new RB2BLoader component. I've identified a high-severity security issue due to the lack of Subresource Integrity (SRI) for the third-party script. I've also suggested improvements for robustness, such as handling missing environment variables and adding a proper effect cleanup, which I've marked as medium severity. Applying these suggestions will make the tracking implementation more secure and resilient.
| const script = document.createElement('script'); | ||
| script.id = 'rb2b-script'; | ||
| script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${process.env.NEXT_PUBLIC_RB2B_ID}/${process.env.NEXT_PUBLIC_RB2B_ID}.js.gz`; | ||
| script.async = true; |
There was a problem hiding this comment.
For security, when loading third-party scripts, it's crucial to use Subresource Integrity (SRI). This ensures that the file your users fetch has not been tampered with. You should add an integrity hash and crossOrigin attribute to the script tag. You will need to generate the hash for the specific version of the script you are loading.
script.integrity = "sha256-your-hash-here"; // Replace with the actual script hash
script.crossOrigin = "anonymous";
script.async = true;
| useEffect(() => { | ||
| const existing = document.getElementById('rb2b-script'); | ||
| if (existing) existing.remove(); | ||
|
|
||
| const script = document.createElement('script'); | ||
| script.id = 'rb2b-script'; | ||
| script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${process.env.NEXT_PUBLIC_RB2B_ID}/${process.env.NEXT_PUBLIC_RB2B_ID}.js.gz`; | ||
| script.async = true; | ||
| document.body.appendChild(script); | ||
| }, [pathname]); |
There was a problem hiding this comment.
This useEffect hook can be made more robust.
- Missing Environment Variable Check: The component doesn't check if
process.env.NEXT_PUBLIC_RB2B_IDis set. If it's missing, the scriptsrcwill be invalid, leading to failed requests. It's better to handle this case explicitly by not attempting to load the script. - Missing Cleanup Function: The effect adds a script to
document.bodybut doesn't clean it up when the component unmounts. While this component may not unmount in its current usage, it's a good practice to return a cleanup function fromuseEffectto handle side effects properly.
Also, consider if re-adding the script on every path change is necessary. If the tracking library supports it, it's more performant to load the script once and call a page-view tracking function on navigation.
useEffect(() => {
const rb2bId = process.env.NEXT_PUBLIC_RB2B_ID;
if (!rb2bId) {
if (process.env.NODE_ENV === 'development') {
console.warn('RB2B tracking ID (NEXT_PUBLIC_RB2B_ID) is not configured.');
}
return;
}
const existing = document.getElementById('rb2b-script');
if (existing) {
existing.remove();
}
const script = document.createElement('script');
script.id = 'rb2b-script';
script.src = `https://ddwl4m2hdecbv.cloudfront.net/b/${rb2bId}/${rb2bId}.js.gz`;
script.async = true;
document.body.appendChild(script);
return () => {
const scriptElement = document.getElementById('rb2b-script');
if (scriptElement) {
scriptElement.remove();
}
};
}, [pathname]);
2 participants
No description provided.