CloudWatch RUM vs. Ad blockers : How to fix possible miss...

A few weeks ago, I was reviewing the Amazon CloudWatch RUM dashboard for a web application I maintain. Page views were suspiciously low. After some digging, I opened the browser's DevTools on my machine and there it was: uBlock Origin was quietly blocking every request to dataplane.rum.eu-west-1.amazonaws.com. Our real user monitoring was blind to a non-negligible portion of our actual traffic.

CloudWatch RUM is one of those AWS services that doesn't get the attention it deserves. But if you care about understanding how real users experience your application — page load times, JavaScript errors, HTTP failures, Web Vitals — it's genuinely valuable. Here's what the dashboard looks like out of the box:

The problem is that ad blockers treat its data plane endpoint the same way they treat any third-party tracking domain: a request flying off to dataplane.rum.*.amazonaws.com looks exactly like telemetry that users might want to block.

The architecture fix is simple: your CloudFront distribution already serves your frontend. Add one behavior — /rum/* — that proxies to the RUM data plane. On the client side, point the aws-rum-web SDK to https://yourdomain.com/rum/ instead of the default AWS endpoint. I use AWS CDK here, but the same works with CloudFormation, Terraform, or the console.

Step 1: Create the CloudWatch RUM app monitor and its Cognito identity pool. RUM needs a Cognito identity pool with unauthenticated access to authorize browsers to send telemetry.

import * as cognito from 'aws-cdk-lib/aws-cognito';
import * as iam from 'aws-cdk-lib/aws-iam';
import * as rum from 'aws-cdk-lib/aws-rum';

// Create an identity pool for RUM (unauthenticated access)
const rumIdentityPool = new cognito.CfnIdentityPool(this, 'RumIdentityPool', {
  allowUnauthenticatedIdentities: true,
});

// Create the IAM role for unauthenticated users
const guestRole = new iam.Role(this, 'RumGuestRole', {
  assumedBy: new iam.WebIdentityPrincipal(
    'cognito-identity.amazonaws.com',
    {
      StringEquals: {
        'cognito-identity.amazonaws.com:aud': rumIdentityPool.ref,
      },
      'ForAnyValue:StringLike': {
        'cognito-identity.amazonaws.com:amr': 'unauthenticated',
      },
    },
  ),
});

// Attach the identity pool to the role
new cognito.CfnIdentityPoolRoleAttachment(this, 'RumRoleAttachment', {
  identityPoolId: rumIdentityPool.ref,
  roles: { unauthenticated: guestRole.roleArn },
});

// Create the RUM app monitor
const rumAppMonitor = new rum.CfnAppMonitor(this, 'RumAppMonitor', {
  domain: 'myapp.example.com',
  name: 'myapp-rum',
  appMonitorConfiguration: {
    allowCookies: true,
    // Allow X-Ray tracing
    enableXRay: true,
    // Track 100% of sessions
    sessionSampleRate: 1.0,
    telemetries: ['performance', 'errors', 'http'],
    identityPoolId: rumIdentityPool.ref,
  },
});

// Grant the guest role permission to send RUM events
guestRole.addToPolicy(
  new iam.PolicyStatement({
    actions: ['rum:PutRumEvents'],
    resources: [
      `arn:aws:rum:${this.region}:${this.account}:appmonitor/${rumAppMonitor.ref}`,
    ],
  }),
);

Step 2: Add the /rum/* behavior to your CloudFront distribution. This is the key part. I create an additional behavior that forwards requests matching /rum/* to the RUM data plane origin.

import * as cf from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';

// Build the additional behaviors map
const additionalBehaviors: Record<string, cf.BehaviorOptions> = {};

// Proxy RUM traffic through CloudFront
additionalBehaviors['/rum/*'] = {
  origin: new origins.HttpOrigin(
    `dataplane.rum.${this.region}.amazonaws.com`
  ),
  viewerProtocolPolicy: cf.ViewerProtocolPolicy.HTTPS_ONLY,
  cachePolicy: cf.CachePolicy.CACHING_DISABLED,
  allowedMethods: cf.AllowedMethods.ALLOW_ALL,
  originRequestPolicy: cf.OriginRequestPolicy.ALL_VIEWER_EXCEPT_HOST_HEADER,
};

// Create the distribution (your existing one — just add the behavior)
const distribution = new cf.Distribution(this, 'Distribution', {
  defaultBehavior: {
    origin: origins.S3BucketOrigin.withOriginAccessControl(websiteBucket),
    viewerProtocolPolicy: cf.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
  },
  additionalBehaviors,
  domainNames: ['myapp.example.com'],
  certificate: myCertificate,
});

I choose ALL_VIEWER_EXCEPT_HOST_HEADER because the RUM data plane expects the Host header to match its own domain (dataplane.rum.eu-west-1.amazonaws.com), not yours. If you forward the original Host, the request will fail with a 403.

Step 3: Point the RUM web client to your proxied endpoint. Install the aws-rum-web package and configure the endpoint to use your domain instead of the default AWS URL.

# Install the RUM web client
npm install aws-rum-web

import { AwsRum } from 'aws-rum-web';

const rumClient = new AwsRum(
  'your-app-monitor-id',       // from the CfnAppMonitor
  '1.0.0',                     // your app version
  'eu-west-1',                 // region
  {
    sessionSampleRate: 1,
    identityPoolId: 'eu-west-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    // This is the magic line — point to your own domain
    endpoint: 'https://myapp.example.com/rum/',
    telemetries: ['performance', 'errors', 'http'],
    allowCookies: true,
    enableXRay: true,
  },
);

Et voilà! The browser now sends RUM telemetry to https://myapp.example.com/rum/, which CloudFront proxies to the actual RUM data plane. Ad blockers see a first-party request and leave it alone.

Things to know

Ad blocker filter lists — Popular lists like EasyPrivacy and uBlock filters include patterns matching dataplane.rum.*.amazonaws.com and the RUM CDN script URL (client.rum.*.amazonaws.com). By proxying through your own domain, you bypass both. If you use the NPM installation method (recommended), the script itself is bundled in your app — only the data plane calls need proxying.
Pricing — $1 per 100,000 RUM events. A typical visit generates ~20 events. For 500K monthly visits: ~$100/month. CloudFront proxy overhead is negligible.
Session sample rate — In production, consider setting sessionSampleRate to something lower than 1 (e.g., 0.1 for 10% sampling) to control costs while still getting statistically meaningful data.
X-Ray integration — With enableXRay: true, RUM traces connect to your backend X-Ray traces, giving you end-to-end visibility from the browser click to the database query.

CloudWatch RUM is one of those "set it and forget it" services that quietly delivers real value — but only if it actually receives data. If you're already using it, proxy it through your own domain or you're likely missing a significant chunk of your user base. And if you're not using it yet, I'd strongly suggest you have a look — understanding how real users experience your app is worth the small setup effort.

— Jerome

推荐订阅源

DEV Community