Cloud Monitor:Reporting RUM events with the Sentry-compatible SDK

Native JavaScript project (browser)

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://key@<YOUR-ENDPOINT>/0",
  
  // ─── Basic Configuration ───
  release: "my-web-app@1.2.0",
  environment: "production",

  // ─── Performance Tracing ───
  tracesSampleRate: 1.0, // For production, adjust as needed, for example to 0.2

  integrations:[
    // Auto-instrumentation for pageload, navigation, resource, Web Vitals, etc.
    Sentry.browserTracingIntegration(),
  ],
});

Android project (Kotlin)

import android.app.Application
import io.sentry.android.core.SentryAndroid
import io.sentry.android.core.SentryAndroidOptions

class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        SentryAndroid.init(this) { options ->
            options.dsn = "https://key@<YOUR-ENDPOINT>/0"
            
            // ─── Basic Configuration ───
            options.release = "my-android-app@1.2.0"
            options.environment = "production"

            // ─── Performance Tracing ───
            options.tracesSampleRate = 1.0
        }
    }
}

Additional Note for Android: For network requests (resource events), if you are using OkHttp or Retrofit, you must add SentryOkHttpInterceptor() when building your OkHttpClient. Otherwise, the SDK cannot auto-instrument API request latency.

iOS project (Swift)

import UIKit
import Sentry

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        
        SentrySDK.start { options in
            options.dsn = "https://key@<YOUR-ENDPOINT>/0"
            
            // ─── Basic Configuration ───
            options.environment = "production"
            options.releaseName = "my-ios-app@1.2.0"
            
            // ─── Performance Tracing ───
            options.tracesSampleRate = 1.0
        }

        return true
    }
}

Key parameters

Auto-instrumented RUM data

With the preceding configuration enabled, the following data is automatically collected with no extra code:

Unnecessary parameters

Usage

Report custom events using Sentry.startSpan. The op parameter must be rum.custom.

import * as Sentry from "@sentry/vue"; // or @sentry/react, @sentry/browser, etc.

// Basic usage
Sentry.startSpan(
  {
    op: "rum.custom",
    name: "payment flow",
    attributes: {
      "custom.group": "payment",
      "custom.value": "99.9",
    },
  },
  () => {
    // Business logic...
  }
);

// With custom business attributes
Sentry.startSpan(
  {
    op: "rum.custom",
    name: "product search",
    attributes: {
      "custom.group": "search",
      "custom.value": "42",
      // The following attributes are automatically stored in `properties` and can be queried in the console.
      "keyword": "bluetooth headset",
      "result_count": 42,
      "search_type": "full_text",
    },
  },
  () => {
    // Search logic...
  }
);

Asynchronous scenarios

If your business logic is asynchronous, return a Promise from the callback function. The SDK automatically waits for the promise to resolve before calculating the duration.

await Sentry.startSpan(
  {
    op: "rum.custom",
    name: "upload file",
    attributes: {
      "custom.group": "upload",
      "file_type": "image",
      "file_size": 1024000,
    },
  },
  async () => {
    await uploadFile(file);
  }
);

Parameters

Usage

Report custom logs using Sentry.captureMessage:

import * as Sentry from "@sentry/vue";

// Basic usage (default level is "info")
Sentry.captureMessage("User completed the onboarding process");

// Specify a log level
Sentry.captureMessage("Payment retries exceeded the maximum limit", "warning");

Parameters

Usage

Report exceptions using Sentry.captureException:

import * as Sentry from "@sentry/vue";

// Basic usage — capture an Error object
try {
  riskyOperation();
} catch (err) {
  Sentry.captureException(err);
}

// Manually construct and report an Error
Sentry.captureException(new Error("Payment API returned an abnormal status code"));

// Capture a Promise rejection
fetchOrder(orderId).catch((err) => {
  Sentry.captureException(err);
});

Data storage

Events reported with captureException generate the following RUM data:

Important notes

• Always pass an Error object: captureException(new Error("msg")) is better than captureException("msg") because the former includes a full stack trace.

• Difference from captureMessage: captureException creates an exception event, which includes a stack trace and is eligible for error grouping. In contrast, captureMessage creates a lightweight custom log.

• Do not use captureMessage to report errors: For error scenarios, use captureException to access full error analysis capabilities in the console.

Usage

import * as Sentry from "@sentry/vue";

// Set user information after login
Sentry.setUser({
  id: "user-12345",
  username: "Zhang San",
  data: {
    vip_level: "gold",
    department: "engineering",
  },
});

// Clear user information after logout
Sentry.setUser(null);

Fields

Important notes

• Call setUser as early as possible: Set user information immediately after a user logs in to ensure all subsequent events are associated with that user.

• The id field is the most important: User-based searches in the console rely on this field. Use the user ID from your business system.

• The data field is ideal for business attributes: Attributes like membership level, user role, or organization are stored as a JSON object in the userTags field.

• Clear user information on logout: Call Sentry.setUser(null) to prevent events from being incorrectly associated with a logged-out user.