Oopsie Browser SDK

SDK JavaScript oficial da Oopsie para aplicações browser.

Este pacote é a base para:

• uso direto via <script>
• uso moderno via ESM / bundlers
• wrappers oficiais de framework como React e Vue

Wrappers oficiais:

• @oopsie-app/react
• @oopsie-app/vue

Versão atual do ecossistema:

• @oopsie-app/browser v1.2.0
• @oopsie-app/react v1.2.0
• @oopsie-app/vue v1.2.0

Instalação

npm install @oopsie-app/browser

Inicialização

Via ESM

import { init, setOopsieUser, setOopsieContext } from "@oopsie-app/browser";

init({
  projectKey: "pk_xxx",
  endpoint: "https://www.oopsie.com.br/api/ingest/rum",
  env: "production",
  release: window.APP_VERSION || "v1.0.0",
});

setOopsieUser({
  id: "123",
  email: "[email protected]",
});

setOopsieContext({
  tenant: "acme",
  area: "checkout",
});

Via script / CDN

<script src="https://www.oopsie.com.br/sdk/oopsie.js"></script>
<script>
  Oopsie.init({
    projectKey: 'pk_xxx',
    endpoint: 'https://www.oopsie.com.br/api/ingest/rum',
    env: 'production',
    release: window.APP_VERSION || 'v1.0.0'
  });
</script>

A propriedade release deve representar a versão da aplicação monitorada pelo cliente. Use o mesmo valor no backend e no frontend em cada deploy.

API pública

• init()
• captureException()
• captureMessage()
• captureEvent()
• setOopsieUser()
• clearOopsieUser()
• setOopsieContext()
• mergeOopsieContext()
• clearOopsieContext()
• flush()

Pacotes oficiais

@oopsie-app/browser

Núcleo oficial JavaScript/browser da Oopsie.

@oopsie-app/react

Wrapper para React com:

• OopsieProvider
• OopsieErrorBoundary
• useOopsie()

@oopsie-app/vue

Wrapper para Vue com:

• createOopsieVue()
• useOopsie()

Sourcemaps

Para que a Oopsie resolva stacks minificadas do frontend em arquivo/linha originais, envie o sourcemap correspondente à mesma release publicada pelo cliente.

Exemplo de upload via API:

curl -X POST "https://www.oopsie.com.br/api/sourcemaps" \
  -H "X-Oopsie-Release-Token: SEU_RELEASE_TOKEN" \
  -F "project_key=pk_xxx" \
  -F "release=v1.0.0" \
  -F "environment=production" \
  -F "minified_url=https://app.cliente.com/assets/app.abc123.js" \
  -F "file=@dist/assets/app.abc123.js.map"

Regras práticas:

• a release do upload deve ser a mesma enviada no Oopsie.init()
• minified_url deve apontar para o bundle que aparece no stack minificado
• cada novo deploy frontend deve publicar novos bundles e seus respectivos .map