React.js

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 Webpack upload sourcemap

You can upload sourcemap using Webpack plugin, available in @middleware.io/sourcemap-uploader/dist/webpack-plugin package.

To use the plugin, edit your webpack.config.js to include a new entry in the plugins array at the top level of the file, e.g.

1const MiddlewareWebpackPlugin = require("@middleware.io/sourcemap-uploader/dist/webpack-plugin").default
2
3module.exports = {
4  // Ensure that Webpack has been configured to output sourcemaps.
5  devtool: 'source-map',
6  // ...
7  plugins: [
8    // Enable our plugin to upload the sourcemaps once the build has completed.
9    // This assumes NODE_ENV is how you distinguish production builds. If that
10    // is not the case for you, you will have to tweak this logic.
11    process.env.NODE_ENV === 'production'
12      ? [
13          new MiddlewareWebpackPlugin(
14            "<ACCOUNT_KEY>"     // Account key of the application.
15            "1.0.0"             // Application version
16            ".",                // Path where sourcemap resides
17            "/",                // Path at which you can upload sourcemap.
18            "https://app.middleware.io/api/v1/rum/getSasUrl",
19            true,               // Delete sourcemap once uploaded.
20          ),
21        ]
22      : [],
23  ],
24}

Webpack plugin options

Webpack plugin offers serveral options to configure searching sourcemaps and build artifacts on disk & configuring upload paths based on project structure.

This makes it clear that path is where you're uploading from, while basePath determines how the source maps will resolve original source file locations during error unminification.

Webpack plugin uploads sourcemaps to the workspace associated with your API key, and automatically matches up sourcemaps with the build artifacts in a error tracking screen when you debug it.

⚙️ 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 -

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

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

1Middleware.track({
2  ...
3  vcsCommitSHA: `${MW_VCS_COMMIT_SHA}`,
4  vcsRepositoryURL: `${MW_VCS_REPOSITORY_URL}`,
5  ...
6});