BugSnag
The `withBugsnag()` plugin for hot-updater enables automatic sourcemap upload to BugSnag during the update bundle build process.
Prerequisites
- BugSnag Account: Sign up here if you don't have one.
- API Key: Copy the API key of your project from your BugSnag dashboard.
- Complete the BugSnag React Native setup, including the
@bugsnag/react-nativeruntime package, iOS pods, and native API-key configuration and initialization. Verify that your app reports a test error before adding OTA sourcemap uploads. - Install the plugin:
npm install @hot-updater/bugsnag-plugin @bugsnag/cli --save-devStep 1: Wrap your build adapter
Use withBugsnag() to wrap any compatible build adapter such as bare.
import { existsSync } from "node:fs";
import { bare } from "@hot-updater/bare";
import { withBugsnag } from "@hot-updater/bugsnag-plugin";
import { defineConfig } from "hot-updater";
if (existsSync(".env.hotupdater")) {
process.loadEnvFile(".env.hotupdater");
}
export default defineConfig({
build: withBugsnag(
bare({
enableHermes: false, // or true, depending if you want to use it
// Required for sourcemap upload
sourcemap: true,
}),
{
// Your BugSnag project API key
apiKey: process.env.BUGSNAG_API_KEY!,
},
),
// .. your other config
});With a managed provider,
hot-updater init keeps this wrapped build when it updates the storage,
database, and plugins in hot-updater.config.ts.
Automatic Upload
withBugsnag() uploads one bundle and its sourcemap during hot-updater deploy,
using the Hermes bundle and map when available. Additional bundles or chunk
maps require separate uploads through BugSnag's tooling. Each upload uses a
codeBundleId, which defaults to the artifact ID recorded in the generated
manifest.
Step 2: Set the codeBundleId in your app
BugSnag matches errors from OTA-updated apps to the uploaded sourcemaps through
the codeBundleId. Add the file identifier from the current manifest to your
existing Bugsnag.start options, retaining the rest of your configuration:
import Bugsnag from "@bugsnag/react-native";
import { hotUpdater } from "./src/hotUpdater";
Bugsnag.start({
// Keep your existing BugSnag options.
codeBundleId: hotUpdater.getManifest().bundleId,
});This keeps sourcemap matching tied to the running code, including when the same files are promoted to another channel.
Step 3: Deploy
Deploy the update to build the bundle and upload its sourcemaps to BugSnag.
npx hot-updater deploy -iVerify symbolication
Install a release build, deploy a small JavaScript change with sourcemaps enabled, and trigger a controlled test error from the updated code. In your monitoring dashboard, confirm the stack points to the original source file and line in that update. A successful upload alone does not prove the app and uploaded map use the same identity.