Javascript

For OpsAI to suggest better RCA for frontend errors it is necessary to have unminified code. For that you need to upload sourcemap, so when viewing stacktrace OpsAI can show you where exactly the error is your code.

🛠️ Using CLI upload sourcemap

1. Install Middleware sourcemap uploader

First install the Middleware sourcemap uploader in your project. The uploader will allow you to specify which files to upload as sourcemaps for a given release.

npm install -g @middleware.io/sourcemap-uploader

2. Enable Source Maps in your build

If you haven't already, you'll need to enable source maps in your build process.

For example, if you're using Webpack, you can enable source maps by setting the devtool option to source-map in your Webpack configuration.

module.exports = {
  devtool: "source-map",
};

In Next.js, you can enable source maps by setting the productionBrowserSourceMaps to true in your next.config.js.

module.exports = {
  productionBrowserSourceMaps: true,
};

3. Uploading source maps after building

Next, after your build step you'll want to point the sourcemap uploader to the directory containing your source maps and call the upload-sourcemaps command with your account key (this is a different key from your middleware API key). You can find your key in the installation page in your dashboard.

sourcemap-uploader upload
    --apiKey=<rum_account_key>
    --path="/path/to/sourcemaps"
    --appVersion="1.0.0"

Sourcemap-uploader Arguments

apiKey

The API key for your project. You can find this in the installation page in your dashboard.

path

The path that middleware will use to send .map files. The default value is current directory.

appVersion

The version of your current deployment. Please provide the same app.version value in defaultAttributes as the value you provide for version in Middleware.track. This ensures that we're always using the same set of sourcemaps for your current bundle. If omitted, sourcemaps are uploaded as latest.

⚙️ VCS Metadata Configuration (Recommended)

If your app is containerized or does not have a .git directory, You can set VCS configuration from installation page of your project in real user monitoring page to send VCS info to OpsAI (this helps generate solution PRs):

If your app has a .git directory, you can set repository URL, commit SHA, and other metadata for OpsAI using environment variables. This is how you can set environment variables -

MW_VCS_COMMIT_SHA=$(git rev-parse HEAD)
MW_VCS_REPOSITORY_URL=$(git config --get remote.origin.url)

Then, use this environment variables in Middleware.track function as follows -

Middleware.track({
  ...
  vcsCommitSHA: `${MW_VCS_COMMIT_SHA}`,
  vcsRepositoryURL: `${MW_VCS_REPOSITORY_URL}`,
  ...
});