React, Vue, and Angular Setup

Use these packages for browser-focused apps or client-only surfaces. If you are using a full-stack framework such as Next.js, Nuxt, Remix, or SvelteKit, prefer the dedicated full-stack package instead (recommended) so server and browser capture stay aligned.

React

TSX

import { ErrorBoundary, initReactBrowser } from "@errova/sdk-react"

initReactBrowser({
  dsn: import.meta.env.VITE_ERROVA_DSN ?? "",
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
})

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <ErrorBoundary
      fallback={({ error, reset }) => (
        <div>
          <p>Something went wrong: {error.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    >
      {children}
    </ErrorBoundary>
  )
}

Vue

TypeScript

import { createApp } from "vue"
import { createErrovaVuePlugin, initVueBrowser } from "@errova/sdk-vue"

import App from "./App.vue"

initVueBrowser({
  dsn: import.meta.env.VITE_ERROVA_DSN ?? "",
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION,
})

createApp(App).use(createErrovaVuePlugin()).mount("#app")

Angular

TypeScript

import { bootstrapApplication } from "@angular/platform-browser"

import { provideErrovaBrowser } from "@errova/sdk-angular"

import { AppComponent } from "./app/app.component"

bootstrapApplication(AppComponent, {
  providers: [
    ...provideErrovaBrowser({
      dsn: "https://ingest.example.dev/ingest/browserPublicKey/events",
      environment: "production",
    }),
  ],
})

When to Use These Packages

Use @errova/sdk-react for browser-only React apps or embedded React surfaces.
Use @errova/sdk-vue for browser-only Vue apps. Add router context with attachErrovaVueRouter() when route metadata matters.
Use @errova/sdk-angular for Angular browser apps, or provideErrovaSsr() when you need separate browser and server DSNs in Angular SSR.
These packages are experimental tier today, so validate the exact render, hydration, and boundary behaviors that matter to your app before rollout.