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.

const MiddlewareWebpackPlugin = require("@middleware.io/sourcemap-uploader/dist/webpack-plugin").default

module.exports = {
  // Ensure that Webpack has been configured to output sourcemaps.
  devtool: 'source-map',
  // ...
  plugins: [
    // Enable our plugin to upload the sourcemaps once the build has completed.
    // This assumes NODE_ENV is how you distinguish production builds. If that
    // is not the case for you, you will have to tweak this logic.

Webpack plugin options

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

Field	Type	Description
`apiKey`	`string`	A unique key used to authenticate and authorize the upload of source maps to your server or API.
`appVersion`	`string`	The version of your application (e.g., `1.2.0`, `v3.1-beta`) tied to the uploaded source maps.
`path`	`string`	The absolute or relative file path where the source map file is located locally during upload.
`basePath`	`string`	The root path in your codebase or build output. It defines where the original source files live, helping map source maps correctly at runtime.
`deleteAfterUpload`	`boolean`	This deletes the sourcemap files from local ensures that sourcemap are not exposed to internet.

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 -

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}`,
  ...
});