Copy as Markdown[Open in ChatGPT](https://chatgpt.com/?q=Read%20https%3A%2F%2Fdocs-docusaurus.kinsta.page%2Fuser-guides%2Frum%2Fsdk-features%2Fmicro-frontend-error-tracking.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)[Open in Claude](https://claude.ai/new?q=Read%20https%3A%2F%2Fdocs-docusaurus.kinsta.page%2Fuser-guides%2Frum%2Fsdk-features%2Fmicro-frontend-error-tracking.md%20and%20help%20me%20with%20my%20question%20about%20this%20Coralogix%20documentation%20page.)

# Micro frontend Error Tracking

## Overview[​](#overview "Direct link to Overview")

If your app employs micro frontends, it's crucial to identify which micro frontend an error originates from. With Coralogix, you can achieve this tracking, capturing, and reporting errors within a micro frontend architecture. The error detection mechanism is based on the stack trace. When an error occurs, the RUM browser SDK automatically links it to the relevant micro frontend and labels the error event with the associated app and version, making it easier to identify the source of the issue.

* **Centralized error logging**: Although each micro frontend is independent, you are able to aggregate error logs from all parts of the system into a central service.
* **Stack trace propagation**: If an error originates in a micro frontend but affects others, you can capture detailed stack traces and context for the entire call stack.

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

Before enabling micro frontend error tracking, install the Coralogix build plugin for your bundler. These plugins generate the metadata assets required to associate runtime errors with the originating micro frontend.

Supported build plugins:

* Webpack
* Esbuild
* Vite

### Metadata output directory[​](#metadata-output-directory "Direct link to Metadata output directory")

By default, Coralogix build plugins generate the `cx-metadata.json` file in the root of the build output. In micro frontend architectures, assets are often emitted to nested or non-root directories.

Use the `outputDir` option to control where this metadata file is written. This ensures the RUM browser SDK can correctly associate runtime errors with the originating micro frontend when assets are served from custom paths.

The `outputDir` value should match the directory from which the micro frontend’s build artifacts are served.

You only need to configure outputDir if your micro frontend assets are served from a non-root directory.

### Webpack plugin[​](#webpack-plugin "Direct link to Webpack plugin")

Install the Webpack plugin as follows: `npm i -D @coralogix/webpack-plugin`

**Example**

```
// webpack.config.js

const { CoralogixWebpackPlugin } = require("@coralogix/webpack-plugin");



module.exports = {

  // ... other config above ...



  plugins: [

    new CoralogixWebpackPlugin({

      app:'test-app',

      version:'1.0.0'

    }),

  ],

};
```

### Esbuild plugin[​](#esbuild-plugin "Direct link to Esbuild plugin")

Install the Esbuild plugin as follows: `npm i -D @coralogix/esbuild-plugin`

**Example**

```
// esbuild.config.js

const esbuild = require('esbuild');

const { coralogixEsbuildPlugin } = require("@coralogix/esbuild-plugin");



await esbuild.build({

  entryPoints: ['app.js'],

  bundle: true,

  outfile: 'out.js',

  plugins: [

    coralogixEsbuildPlugin({

        app:'test-app',

        version:'1.0.0'

      })

  ],

})
```

### Vite plugin[​](#vite-plugin "Direct link to Vite plugin")

```
// vite.config.js

import { defineConfig } from 'vite';

import { coralogixVitePlugin } from '@coralogix/vite-plugin';



export default defineConfig({

  plugins: [

    coralogixVitePlugin({

      app: 'test-app',

      version: '1.0.0',

      outputDir: 'dist/build/mfe', // directory where cx-metadata.json is generated

    })

  ]

});
```

## Enabling support for micro frontend[​](#enabling-support-for-micro-frontend "Direct link to Enabling support for micro frontend")

Activate support for error tracking in the micro frontend.

```
CoralogixRum.init({

  // ...

  supportMfe: true,

});
```