chore: Add page load trace with resource, paint and navigation spans#34957
chore: Add page load trace with resource, paint and navigation spans#34957
Conversation
WalkthroughThe recent updates significantly enhance the application's telemetry capabilities. A new class, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageLoadInstrumentation
participant OpenTelemetry
participant NewRelicAgent
User->>PageLoadInstrumentation: Initiate page load
PageLoadInstrumentation->>OpenTelemetry: Start root span
PageLoadInstrumentation->>PageLoadInstrumentation: Observe LCP and FCP
PageLoadInstrumentation->>NewRelicAgent: Send performance metrics
NewRelicAgent-->>User: Provide monitoring insights
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
…download-analytics
…download-analytics
…ownload-analytics
|
/build-deploy-preview skip-tasks=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/10088484650. |
|
Deploy-Preview-URL: https://ce-34957.dp.appsmith.com |
dvj1988
changed the title
github-actions
bot
added
the
skip-changelog
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- app/client/src/UITelemetry/PageLoadInstrumentation.ts (1 hunks)
- app/client/src/UITelemetry/auto-otel-web.ts (2 hunks)
- app/client/src/UITelemetry/generateTraces.ts (2 hunks)
- app/client/src/index.tsx (3 hunks)
Additional comments not posted (24)
app/client/src/UITelemetry/generateTraces.ts (3)
10-10: Good job adding the necessary imports!The inclusion of
browserNameandbrowserVersionfromreact-device-detectis a good step to enhance telemetry data.
20-21: Great addition of a unique session identifier!The
OTLP_SESSION_IDconstant generated usingnanoidwill help in tracking sessions uniquely.
36-38: Excellent enhancement to telemetry attributes!Including
browserName,browserVersion, andotlpSessionIdin the telemetry attributes will provide more granular data for diagnostics and analytics.app/client/src/index.tsx (2)
27-29: Nice work on updating the imports!The addition of
PageViewTiming,PageViewEvent, andAgentfrom the New Relic package is essential for the new monitoring setup.
57-65: Great enhancement to the New Relic agent configuration!Including
PageViewTimingandPageViewEventfeatures will significantly improve the application's monitoring capabilities.app/client/src/UITelemetry/auto-otel-web.ts (3)
23-24: Good addition of necessary imports!The inclusion of
registerInstrumentationsandPageLoadInstrumentationis crucial for the new telemetry setup.
31-37: Nice update to the New Relic configuration!Adding
browserAgentEndpointto the configuration object is a good step to enhance telemetry capabilities.
122-130: Excellent integration of instrumentations!The
registerInstrumentationsfunction call effectively integratestracerProviderandmeterProviderwithPageLoadInstrumentation, enhancing telemetry capabilities.app/client/src/UITelemetry/PageLoadInstrumentation.ts (16)
1-9: Good job with the imports!The imports are well-organized and relevant to the functionality implemented in this file. This helps in maintaining modularity and readability.
11-19: Class properties are well-defined!The class properties are clearly defined and initialized. This sets a good foundation for the rest of the class.
21-27: Constructor logic looks solid!The constructor correctly initializes the class properties and sets up the root span. This ensures that the instrumentation starts with the right configuration.
29-42: Lifecycle methods are well-implemented!The
init,enable, anddisablemethods correctly manage the setup and teardown of event listeners and observers. This ensures that the instrumentation can be properly controlled.
44-53: Visibility change listener is well-handled!The visibility change listener correctly updates the page visibility state. This ensures accurate tracking of page visibility metrics.
206-219: Resource timing observer is correctly set up!The resource timing observer is correctly set up to observe resource entries. This ensures that resource timings are accurately tracked.
55-63: LCP report handling is correct!The method correctly processes the LCP metric and pushes the timing to the span. This ensures accurate LCP tracking.
65-78: FCP report handling is correct!The method correctly processes the FCP metric and pushes the timing to the span. This ensures accurate FCP tracking.
105-114: Paint timing handling is efficient!The method correctly processes paint timing entries and pushes them to the span. This ensures accurate paint timing tracking.
116-134: LCP timing handling is efficient!The method correctly processes LCP entries and pushes them to the span. This ensures accurate LCP tracking.
136-204: Navigation timing handling is comprehensive!The method correctly processes navigation timing entries and sets the appropriate attributes on the root span. This ensures comprehensive navigation timing tracking.
229-284: Resource timing handling is efficient!The method correctly processes resource timing entries and pushes them to the span. This ensures accurate resource timing tracking.
80-99: Element name extraction is well-implemented!The method correctly extracts the name of an element up to a certain depth. This ensures accurate element identification.
101-103: String conversion utility is efficient!The method correctly converts kebab-case strings to screaming snake case. This ensures consistent string formatting.
286-288: Resource entry key generation is correct!The method correctly generates a unique key for resource entries. This ensures accurate identification of resource entries.
290-313: Resource timing polling is correctly implemented!The method correctly polls resource timing entries and processes them. This ensures accurate tracking of resource timings even if the observer is not available.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- app/client/src/UITelemetry/PageLoadInstrumentation.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- app/client/src/UITelemetry/PageLoadInstrumentation.ts
|
@dvj1988 Is the pageLoad telemetry disabled for self hosted instances and can be conditionally switched on for it ? |
@rajatagrawal Yes, This is implemented as a plugin to our OTLP implementation. So when we switch on OTLP the page load metrics also will get enabled. |
dvj1988
added
ok-to-test
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- app/client/src/UITelemetry/auto-otel-web.ts (2 hunks)
- app/client/src/UITelemetry/generateTraces.ts (2 hunks)
Files skipped from review as they are similar to previous changes (2)
- app/client/src/UITelemetry/auto-otel-web.ts
- app/client/src/UITelemetry/generateTraces.ts
2 participants
Description
Implemented a page load performance tracking system using telemetry, capturing key metrics such as Largest Contentful Paint (LCP) and First Contentful Paint (FCP).
Enhanced telemetry data to include browser information and unique session IDs for improved diagnostics.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Sanity"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/10144890855
Commit: b8ee33f
Cypress dashboard.
Tags:
@tag.SanitySpec:
Mon, 29 Jul 2024 13:34:11 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Improvements
Bug Fixes