The source code of most frontend web applications delivered to the browser are typically in a minified form which impacts how stacktraces appear on RUM error events. If this is the case for the web application that you are instrumenting with kloudfuse RUM you will need to configure and set up upload of sourcemaps.

There are two parts to this:

1. Configure sourcemap storage for the Kloudfuse installation

2. Configure your web applications build step to automatically upload sourcemaps

Step 1: Configure sourcemap storage for the Kloudfuse installation

Configure your kloudfuse platform as shown in the example below and uncomment the relevant section while replacing the appropriate configuration to match your environment depending on your cloud storage provider. The configuration has similar requirements to how the sessionReplayStorage section is configured (see the Enable RUM on Customer’s Kloudfuse installation page):

global:
  rum:
    sourcemapStorage:
      # type: s3
      # useSecret: true
      # secretName: "kfuse-rum-s3"
      # s3:
      #   region: us-west-2
      #   bucket: rum-sourcemaps
      
      # type: azure
      # useSecret: true
      # secretName: "kfuse-rum-azure"
      # azure:
      #   container: rum-sourcemaps

      # type: gcs
      # useSecret: true
      # secretName: "kfuse-rum-gcs"
      # gcs:
      #   bucket: rum-sourcemaps

Step 2: Configure upload of sourcemaps to your Kloudfuse installation

When building your app for production, you’ll need to generate sourcemaps. This can typically be configured as part of the builder you’re using.

• Webpack

• Vite

• Esbuild

Kloudfuse provides a command line tool to upload your sourcemaps. It’s available as an NPM package and can be installed as follows:

$ npm install -D kf-cli

After building your sourcemaps, you can use kf-cli from your npm project like so:

$ npx KF_API_KEY=<KF_API_KEY> kf-cli sourcemaps upload \
  --release-version <RELEASE_VERSION> \
  --service <SERVICE> \
  --minified-path-prefix <MINIFIED_PATH_PREFIX> \
  --baseUrl <KF_CLUSTER_URL> \
  <BUILD_DIRECTORY>

• KF_API_KEY: an authorization key to identify users with access to the source map upload endpoint. This should be passed as an environment variable

• --release-version: a string representing the unique frontend application build (e.g. 1.0.0)

• --service: a friendly name unique to the the frontend application being instrumented

• --minified-path-prefix: This is the pathname of your deployed build directory. For example, if your application is served at http://myapp.com/app, this value would /app. If your web application is served at the root hostname http://myapp.com, this value would be /.

• --baseUrl: is the hostname of your Kloudfuse cluster

• BUILD_DIRECTORY: the last argument is your build directory. I.E. build, out, dist

Example

$ npx KF_API_KEY=80a2eb62-9b59-4519-9807-d2f4714cbc3c  kf-cli sourcemaps upload \
  --release-version 1.0.1 \
  --service my-web-app \
  --minified-path-prefix /app \
  --baseUrl https://kf.myapp.com \
  ./build