open-index/open-npm huggingface dataset:
npm package: @oopsie-app/react
Description: Official React wrapper for the Oopsie browser SDK.
Latest version: 1.2.0

# @oopsie-app/react

Wrapper oficial de React para `@oopsie-app/browser`.

## Instalação

```bash
npm install @oopsie-app/browser @oopsie-app/react
```

## Uso

```tsx
import { OopsieProvider, OopsieErrorBoundary } from "@oopsie-app/react";

<OopsieProvider
  config={{
    projectKey: "pk_xxx",
    endpoint: "https://www.oopsie.com.br/api/ingest/rum",
    env: "production",
    release: "v1.0.0",
  }}
>
  <OopsieErrorBoundary fallback={<div>Algo deu errado.</div>}>
    <App />
  </OopsieErrorBoundary>
</OopsieProvider>
```

## Hook

```tsx
import { useOopsie } from "@oopsie-app/react";

function SaveButton() {
  const oopsie = useOopsie();

  return (
    <button
      onClick={() => {
        oopsie.captureEvent("ui.save_click", { area: "settings" });
      }}
    >
      Save
    </button>
  );
}
```

## Router

Para React Router, a recomendação é manter o `OopsieProvider` acima do router e usar `captureEvent()` quando quiser marcar rotas ou ações específicas do produto.
npm package: @oopsie-app/vue
Description: Official Vue wrapper for the Oopsie browser SDK.
Latest version: 1.2.0

# @oopsie-app/vue

Wrapper oficial de Vue para `@oopsie-app/browser`.

## Instalação

```bash
npm install @oopsie-app/browser @oopsie-app/vue
```

## Uso

```ts
import { createApp } from "vue";
import { createOopsieVue } from "@oopsie-app/vue";

const app = createApp(App);

app.use(createOopsieVue({
  config: {
    projectKey: "pk_xxx",
    endpoint: "https://www.oopsie.com.br/api/ingest/rum",
    env: "production",
    release: "v1.0.0",
  },
}));
```

## Composable

```ts
import { useOopsie } from "@oopsie-app/vue";

const oopsie = useOopsie();
oopsie.captureEvent("checkout.step_view", { step: "payment" });
```

## Router

Para Vue Router, a recomendação é instalar o plugin antes do router e usar `captureEvent()` em guards ou páginas estratégicas quando quiser enriquecer a trilha funcional.