Install Vercel Web Analytics

[vercel]

Vercel Web Analytics Integration

Successfully configured Vercel Web Analytics for the mempool Angular application.

Changes Made:

1. Created New File:

• frontend/src/app/services/analytics.service.ts - New Angular service to initialize Vercel Analytics
  • Implements proper environment-aware configuration
  • Uses inject() function from @vercel/analytics package
  • Automatically switches between 'production' and 'development' modes based on environment configuration

2. Modified Files:

• frontend/src/app/app.module.ts - Added AnalyticsService to the providers array
• frontend/src/app/components/app/app.component.ts - Injected AnalyticsService into the root component to ensure it initializes on app startup
• frontend/package.json - Added @vercel/analytics ^2.0.1 to dependencies (was already present, order normalized)
• frontend/package-lock.json - Updated lock file to reflect dependency tree

Implementation Details:

The implementation follows best practices for Angular applications:

1. Service-Based Architecture: Created a dedicated AnalyticsService that encapsulates the Vercel Analytics initialization logic
2. Environment-Aware Configuration: The service automatically detects whether the app is running in production or development mode and configures analytics accordingly
3. Singleton Pattern: The service uses providedIn: 'root' to ensure a single instance across the application
4. Early Initialization: The service is injected into the root AppComponent to ensure analytics are initialized as early as possible in the application lifecycle

Technical Approach:

Since Vercel Analytics doesn't have specific Angular instructions in their documentation, I used their vanilla JavaScript/TypeScript approach with the inject() function. This is the recommended pattern for frameworks without dedicated integrations.

The configuration passes a mode parameter to control whether analytics run in development or production mode:

• Production mode: Full analytics tracking enabled
• Development mode: Analytics can be tested without affecting production data

Verification:

• ✅ TypeScript compilation passes without errors
• ✅ Linter runs successfully with no new errors introduced
• ✅ Package is properly installed (@vercel/analytics@2.0.1)
• ✅ Service is properly registered in Angular's dependency injection system

Next Steps:

To enable Web Analytics on Vercel:

1. Navigate to your Vercel dashboard
2. Select the project
3. Go to the Analytics section
4. Click "Enable" to activate Web Analytics
5. Deploy the application to see analytics data

The analytics will automatically start tracking page views and web vitals once the application is deployed and the feature is enabled in the Vercel dashboard.

---

View Project · Web Analytics

Created by Legion's (dargon789) with Vercel Agent

Summary by Sourcery

Integrate Vercel Web Analytics into the Angular frontend for environment-aware tracking initialized at app startup.

New Features:

• Add an AnalyticsService that initializes Vercel Web Analytics with environment-aware configuration on construction.

Enhancements:

• Register AnalyticsService in the app module and inject it into the root AppComponent to ensure early analytics initialization.

Build:

• Add @vercel/analytics dependency and update package-lock to reflect the new analytics package.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mempool	Canceled		May 11, 2026 6:23am

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
🔚	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[sourcery-ai]

Reviewer's Guide

Adds a new Angular AnalyticsService that initializes Vercel Web Analytics with environment-aware configuration and wires it into the application startup, while updating frontend dependencies to include @vercel/analytics.

Sequence diagram for Vercel Analytics initialization on app startup

sequenceDiagram
    actor User
    participant Browser
    participant AngularApp
    participant AppComponent
    participant AnalyticsService
    participant VercelAnalytics

    User->>Browser: Load mempool web app URL
    Browser->>AngularApp: Bootstrap Angular application
    AngularApp->>AppComponent: Create root component instance
    AppComponent->>AnalyticsService: Inject AnalyticsService via constructor
    activate AnalyticsService
    AnalyticsService->>VercelAnalytics: inject(mode)
    deactivate AnalyticsService
    VercelAnalytics-->>AnalyticsService: Analytics initialized
    AngularApp-->>User: Render application UI

Loading

Class diagram for AnalyticsService integration in Angular app

classDiagram
    class AnalyticsService {
        +AnalyticsService()
    }

    class AppComponent {
        -ThemeService themeService
        -Location location
        -ViewportScroller viewportScroller
        -AnalyticsService analyticsService
        -NgbTooltipConfig tooltipConfig
        -string locale
        +AppComponent(ThemeService themeService, Location location, ViewportScroller viewportScroller, AnalyticsService analyticsService, NgbTooltipConfig tooltipConfig, string locale)
    }

    class Environment {
        +boolean production
    }

    class VercelAnalytics {
        +inject(string mode)
    }

    AppComponent --> AnalyticsService : injects
    AnalyticsService --> Environment : reads
    AnalyticsService --> VercelAnalytics : calls inject

Loading

File-Level Changes

Change	Details	Files
Introduce AnalyticsService to initialize Vercel Web Analytics with environment-aware mode selection.	Create a singleton Angular service that calls @vercel/analytics inject() in its constructor. Derive analytics mode from the Angular environment.production flag to switch between production and development modes. Import the Angular environment configuration into the service for runtime mode detection.	frontend/src/app/services/analytics.service.ts
Wire AnalyticsService into Angular DI and ensure early initialization via root component.	Register AnalyticsService in the app module providers array to participate in Angular DI. Inject AnalyticsService into AppComponent constructor so it is instantiated on app startup. Maintain existing constructor dependencies while adding analytics initialization.	frontend/src/app/app.module.ts frontend/src/app/components/app/app.component.ts
Update frontend dependencies to include @vercel/analytics and normalize ordering in package manifests.	Add @vercel/analytics@^2.0.1 to application dependencies in package.json. Reorder existing dependencies/devDependencies slightly (e.g., @types/qrcode, eslint) without functional change. Regenerate package-lock.json to capture the new dependency tree.	frontend/package.json frontend/package-lock.json

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#25	Add a new CircleCI pipeline configuration (cargo.yml) to automate Rust formatting checks, test execution, and caching using a cimg/rust Docker image.	❌	The PR only adds Vercel Web Analytics integration to the Angular frontend and does not introduce any CircleCI configuration files or Rust-related CI setup.
#25	Implement build steps in the CircleCI cargo.yml config to run 'cargo fmt -- --check' and 'cargo test' as part of a dedicated build-and-test job.	❌	No changes related to cargo, Rust tooling, or CI build steps are present; the modifications focus solely on an Angular AnalyticsService and dependency updates.
#25	Configure caching in CircleCI for Cargo artifacts (e.g., using Cargo.lock checksum and caching ~/.cargo and target directories) and define a CI workflow to run the build-and-test job.	❌	The PR does not touch any CI configuration or caching setup; there is no .circleci/cargo.yml file or workflow configuration added or modified.
#32	Introduce a new CircleCI configuration file (e.g., .circleci/cargo.yml) that defines a Rust CI workflow using the cimg/rust:1.90.0 Docker image, including a build-and-test job that runs cargo fmt -- --check and cargo test in the sequence described by the provided flow diagram.	❌	The PR only adds Vercel Web Analytics integration to the Angular frontend (new AnalyticsService, updates to app.module.ts, app.component.ts, and frontend package dependencies). It does not add or modify any CircleCI configuration files or define a Rust CI workflow.
#32	Configure caching of Cargo dependencies and build artifacts in CircleCI, restoring and saving caches keyed by Cargo.lock within the new Rust CI pipeline.	❌	No changes related to CircleCI or Cargo caching are present in the PR. The modifications are limited to frontend TypeScript/Angular code and package.json/package-lock.json for adding @vercel/analytics.
#35	Add a SECURITY.md file defining the project's security policy, including a supported versions matrix and vulnerability reporting guidance.	❌	The PR only integrates Vercel Web Analytics into the Angular frontend (adds AnalyticsService, updates app.module, app.component, and dependencies). It does not create or modify SECURITY.md or any security policy documentation.
#35	Document and/or embed an entity relationship diagram for the supported version matrix and a flow diagram for the vulnerability reporting process in SECURITY.md.	❌	No changes related to diagrams or SECURITY.md are present in the diff; all changes concern analytics initialization and dependency updates.
#38	Harden the backend service proxy routes by adding explicit path whitelisting for accelerator-related endpoints and returning 400 errors for non-whitelisted paths.	❌	The PR only integrates Vercel Web Analytics into the Angular frontend and does not modify any backend route handling or path validation logic.
#38	Enhance GitHub issue templates and CI/CD workflows (including new workflow files and SECURITY.md) as described in the review guide.	❌	The PR does not touch .github issue templates, CI/CD workflow files, or add a SECURITY.md; it is limited to frontend analytics service integration and dependency changes.
#42	Fix the frontend demo redirect URL calculation in shared utilities so that the correct path segment is used and params.next is replaced by the indexed path element in the redirect logic.	❌	The PR only adds Vercel Web Analytics via a new AnalyticsService and updates Angular module and dependencies. It does not modify any redirect logic or shared utilities such as frontend/src/app/shared/common.utils.ts.
#42	Add CI/CD workflows (GitHub Actions and CircleCI) to build and deploy the project, including Docker/GKE, Octopus Deploy, Jekyll/static site deployments, and Rust build-and-test jobs.	❌	The diff contains no changes under .github/workflows/ or .circleci/. It only adds an analytics service and a new dependency, so no CI/CD workflows are introduced or modified.
#42	Add a Security Policy document (SECURITY.md) describing supported versions and the vulnerability reporting process.	❌	No SECURITY.md file is added or modified in this PR; the changes are limited to frontend analytics integration and package configuration.
#72	Implement the new transaction acceleration data flow between frontend and backend, including frontend use of getAccelerationDataForTxid$, updated retry/filter logic, and backend /services/accelerator/accelerations/:txid endpoint with corresponding repository methods.	❌	The PR only adds Vercel Web Analytics integration (AnalyticsService, dependency additions, and wiring into AppComponent). It does not modify any transaction components, ServicesApiService, or backend acceleration routes/repositories.
#72	Refactor frontend/sync-assets.js into a modular, promise-based implementation with environment-based configuration and unified download logic.	❌	No changes are made to sync-assets.js or related asset synchronization logic; the PR is limited to analytics-related files and package configuration.
#72	Introduce the described backend indexing optimizations (ChainTips limits, BlocksRepository.$getBlock skipMemoryCache flag, Express body parser limit changes) and minor UI/CI updates such as the About component partner link and workflow adjustments.	❌	The PR does not touch backend code, CI/CD workflows, or the About component; all modifications are confined to adding and initializing Vercel Analytics in the frontend.
#76	Implement a txid-specific acceleration data retrieval flow, including a new backend endpoint (/accelerator/accelerations/:txid), corresponding repository method ($getAccelerationInfoForTxid), frontend service method (getAccelerationDataForTxid$), and integration into tracker/transaction components with retry and filtering logic.	❌	The PR only adds Vercel Web Analytics integration (AnalyticsService, wiring in app.module and app.component, and the @vercel/analytics dependency). It does not modify backend acceleration routes, repositories, or the frontend services/components related to acceleration data.
#76	Document and/or maintain the sequence and class diagrams for the new txid-specific acceleration data retrieval flow (backend AccelerationRepository, ServicesApiService, TrackerComponent, and TransactionComponent) in project documentation or related markdown.	❌	The PR does not add or update any documentation or markdown files containing diagrams. All changes are confined to analytics-related service code, module wiring, and dependency configuration.
#180	Create an Angular AnalyticsService that initializes Vercel Web Analytics using @vercel/analytics.inject() with environment-aware mode selection (production vs development).	✅
#180	Wire AnalyticsService into the Angular application so it is provided as a singleton and instantiated at app startup via the root AppComponent.	✅
#180	Add the @vercel/analytics dependency to the frontend and update lockfile/package configuration accordingly.	✅

Possibly linked issues

• Install Vercel Web Analytics #167: The PR adds AnalyticsService, app wiring, and @vercel/analytics dependency exactly as specified in the issue description.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• AnalyticsService is marked with providedIn: 'root' but is also added to the providers array in AppModule; you can remove it from providers to avoid redundant registration.
• Injecting AnalyticsService into AppComponent solely for side effects is a bit indirect; consider using an APP_INITIALIZER or an explicit init() call in AppComponent.ngOnInit to make the initialization behavior clearer.
• If this app is ever rendered outside the browser (e.g., Angular Universal), you may want to guard the inject() call in AnalyticsService with an isPlatformBrowser check to avoid issues in non-DOM environments.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- AnalyticsService is marked with `providedIn: 'root'` but is also added to the `providers` array in `AppModule`; you can remove it from `providers` to avoid redundant registration.
- Injecting `AnalyticsService` into `AppComponent` solely for side effects is a bit indirect; consider using an `APP_INITIALIZER` or an explicit `init()` call in `AppComponent.ngOnInit` to make the initialization behavior clearer.
- If this app is ever rendered outside the browser (e.g., Angular Universal), you may want to guard the `inject()` call in `AnalyticsService` with an `isPlatformBrowser` check to avoid issues in non-DOM environments.

Fix all in Cursor

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Dargon789]

#167