Next.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 to upload source map

Next.js uses Webpack internally, so the plugin above will also be used for NextJS, but the config that needs editing is next.config.js instead. Next.js own documentation is a good place to start and shows how to add Webpack plugins to your build process.

You'll also need to enable production sourcemaps, so you'll end up with the following additional config in your next.config.js file:

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

const nextConfig = {
  productionBrowserSourceMaps: true,

  webpack: (config) => {
    config.plugins.push(
      new MiddlewareWebpackPlugin(
        "<ACCOUNT_KEY>", // Account key of the application.

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.

Also see the Next.js docs on "Configuring the Build ID" for details on generating a consistent build ID, such as with a Git hash.

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