> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/examples/browser-sdk-migration.md).

# Browser SDK Migration Guide

### Overview <a href="#overview" id="overview"></a>

This guide covers the key differences and migration details when moving from **JavaScript SDK v10.15.x** (via NPM or GitHub) to **Browser SDK v0.1.x** (via NPM or GitHub).

### Requirements <a href="#requirements" id="requirements"></a>

The Browser SDK supports the same browsers as the JavaScript SDK (ES5 syntax and Promises), but additionally requires **Fetch API** support.

To target older browsers like IE10, you must polyfill the Fetch API alongside Promises.

### Installation and Import <a href="#installation-and-import" id="installation-and-import"></a>

| JavaScript SDK 10.15.x                                            | Browser SDK 0.1.x                                                                                                                                                                                                                         |
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Install NPM package:                                              | Install NPM package:                                                                                                                                                                                                                      |
| `npm install @splitsoftware/splitio`                              | `npm install @splitsoftware/splitio-browserjs`                                                                                                                                                                                            |
| Import with ES6 module syntax:                                    | Import with ES6 module syntax:                                                                                                                                                                                                            |
| `import { SplitFactory } from '@splitsoftware/splitio'`           | `import { SplitFactory } from '@splitsoftware/splitio-browserjs'`                                                                                                                                                                         |
| Import with CommonJS:                                             | Import with CommonJS:                                                                                                                                                                                                                     |
| `const { SplitFactory } = require('@splitsoftware/splitio')`      | `const { SplitFactory } = require('@splitsoftware/splitio-browserjs')`                                                                                                                                                                    |
| Install with CDN script tag:                                      | Install with CDN script tag (two variants):                                                                                                                                                                                               |
| `<script src="//cdn.split.io/sdk/split-10.15.4.min.js"></script>` | <p>Slim/Regular: <code>\<script src="//cdn.split.io/sdk/split-browser-0.1.0.min.js">\</script></code><br>Full (includes pluggable modules): <code>\<script src="//cdn.split.io/sdk/split-browser-0.1.0.full.min.js">\</script></code></p> |

Instantiate with CDN:

```js
// JavaScript SDK
var factory = splitio({...});

// Browser SDK
var factory = splitio({...}) 
// or
var factory = splitio.SplitFactory({...});
```

### Configuration and API <a href="#configuration-and-api" id="configuration-and-api"></a>

Most configuration params are the same in [JavaScript SDK](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/client-side-sdks/client-side-standard-sdks/javascript-sdk.md#configuration) and [Browser SDK](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/client-side-sdks/client-side-standard-sdks/browser-sdk.md#configuration). SDK client and manager APIs (i.e., method signatures) are also the same. The differences:

#### Traffic type <a href="#traffic-type" id="traffic-type"></a>

<table><thead><tr><th>JavaScript SDK 10.15.x</th><th>Browser SDK 0.1.x</th></tr></thead><tbody><tr><td><p>Clients can be bound to a traffic type to track events without the need to pass the traffic type.<br></p><pre><code>var factory = SplitFactory({
core: {
authorizationKey: 'YOUR_API_KEY',
key: 'USER_ID',
trafficType: 'YOUR_CUSTOMER_TRAFFIC_TYPE'
}
});
// Must not pass traffic type to track call if provided on the factory settings
var mainClient = factory.client();
mainClient.track('EVENT_TYPE', eventValue);
// or when creating a new client with a traffic type.
var newClient = factory.client('NEW_KEY', 'NEW_TRAFFIC_TYPE');
newClient.track('EVENT_TYPE', eventValue);
</code></pre></td><td>Clients cannot be bound to a traffic type, so for tracking events we always need to pass the traffic type. This simplifies the <code>track</code> method signature, by removing ambiguity of when it should receive the traffic type or not.</td></tr><tr><td>The <code>core.trafficType</code> config param, and the second param of <code>factory.client()</code> are ignored.</td><td></td></tr></tbody></table>

#### Bucketing key <a href="#bucketing-key" id="bucketing-key"></a>

Bucketing key support was removed from Browser SDK. So passing an object as a key is not allowed:

```javascript
var factory = SplitFactory({
 core: {
   authorizationKey: 'YOUR_API_KEY',

   // NOT SUPPORTED: key must be a string
   key: { matchingKey: 'YOUR_MATCHING_KEY', bucketingKey: 'YOUR_BUCKETING_KEY' }
 }
});

// NOT SUPPORTED: key must be a string
var newClient = factory.client({ matchingKey: 'NEW_MATCHING_KEY', bucketingKey: 'NEW_BUCKETING_KEY' });
```

#### Pluggable modules <a href="#pluggable-modules" id="pluggable-modules"></a>

Some configuration params are based on pluggable modules now, in favor of size reduction.

When using ES module imports, the pluggable modules that are not imported are not included in the final output build.

The impact of each module on the final bundle size is roughly estimated in the Export Analysis section of [Bundlephobia entry](https://bundlephobia.com/result?p=@splitsoftware/splitio-browserjs@0.1.0).

Importing pluggable modules with ES module imports:

```javascript
import { SplitFactory, // Pluggable modules:
 ErrorLogger, WarnLogger, InfoLogger, DebugLogger, InLocalStorage, GoogleAnalyticsToSplit, SplitToGoogleAnalytics } from '@splitsoftware/splitio-browserjs';
```

When using CDN script tags, you can opt for using the regular/slim version without pluggable modules or the full one with them.

Accessing pluggable modules with the full CDN bundle (they are not available on the slim version):

```javascript
const {
 SplitFactory,
 // Pluggable modules:
 ErrorLogger, WarnLogger, InfoLogger, DebugLogger,
 InLocalStorage, GoogleAnalyticsToSplit, SplitToGoogleAnalytics }
= window.splitio;
```

#### Logging <a href="#logging" id="logging"></a>

In the Browser SDK, you must “plug” a logger instance in the `debug` config param to have human-readable message codes.

You can set a boolean or string log level value as `debug` config param, as in the regular JavaScript SDK, but in that case, most log messages will display a code number instead.

Those message codes are listed in the public repository: [`Error`](https://github.com/splitio/javascript-commons/blob/development/src/logger/messages/error.ts), [`Warning`](https://github.com/splitio/javascript-commons/blob/development/src/logger/messages/warn.ts), [`Info`](https://github.com/splitio/javascript-commons/blob/development/src/logger/messages/info.ts), [`Debug`](https://github.com/splitio/javascript-commons/blob/development/src/logger/messages/debug.ts). More details [here](/feature-management-experimentation/new-to-fme/sdks-and-customer-deployed-components/client-side-sdks/client-side-standard-sdks/browser-sdk.md#logging).

<table><thead><tr><th>JavaScript SDK 10.15.x</th><th>Browser SDK 0.1.x</th></tr></thead><tbody><tr><td><pre><code>import { SplitFactory } from '@splitsoftware/splitio'
var factory = SplitFactory({
…,
debug: 'DEBUG' // other options are: true, false,
            // 'INFO', 'WARN' and 'ERROR'
});
</code></pre></td><td><pre><code>import { SplitFactory, DebugLogger } from '@splitsoftware/splitio-browserjs'
var factory = SplitFactory({
…,
debug: DebugLogger() // other options are: true, false, 'DEBUG',
                  // 'INFO', 'WARN', 'ERROR', InfoLogger(),                  // WarnLogger(), and ErrorLogger()
});
</code></pre></td></tr></tbody></table>

#### Configuring LocalStorage <a href="#configuring-localstorage" id="configuring-localstorage"></a>

<table><thead><tr><th>JavaScript SDK 10.15.x</th><th>Browser SDK 0.1.x</th></tr></thead><tbody><tr><td><pre><code>import { SplitFactory } from '@splitsoftware/splitio'
var sdk = SplitFactory({
core: {
authorizationKey: 'YOUR_API_KEY',
key: 'USER_ID',
},
storage: {
type: 'LOCALSTORAGE',
prefix: 'MYPREFIX'
}
});
</code></pre></td><td><pre><code>import {
SplitFactory,
InLocalStorage
} from '@splitsoftware/splitio-browserjs'
var sdk = SplitFactory({
core: {
authorizationKey: 'YOUR_API_KEY',
key: 'USER_ID',
},
storage: InLocalStorage({
prefix: 'MYPREFIX'
})
});
</code></pre></td></tr></tbody></table>

### Additional Notes <a href="#additional-notes" id="additional-notes"></a>

CDN bundle size:

* JavaScript SDK (<https://cdn.split.io/sdk/split-10.15.4.min.js> ): 126656 B (123.7 kB)
* Browser SDK
  * Slim/regular (<https://cdn.split.io/sdk/split-browser-0.1.0.min.js> ): 69338 B (67.7 kB)
  * Full (<https://cdn.split.io/sdk/split-browser-0.1.0.full.min.js> ): 93163 B (91.0 kB)

NPM package size:

* [JavaScript SDK](https://bundlephobia.com/result?p=@splitsoftware/splitio@10.15.4): 109.7 kB minified
* [Browser SDK](https://bundlephobia.com/result?p=@splitsoftware/splitio-browserjs@0.1.0): 87.2 kB minified