React

@larabug/react is the browser client plus an error boundary and three hooks. Everything in vanilla JavaScript applies here too.

Start it

React

import { init } from '@larabug/react'

init({
  dsn: import.meta.env.VITE_LARABUG_DSN,
  environment: import.meta.env.MODE,
})

Catch what React swallows

An error thrown while rendering does not reach window.onerror: React catches it and unmounts the tree. The boundary is how it gets reported.

React

import { ErrorBoundary } from '@larabug/react'

export default function App() {
  return (
    <ErrorBoundary fallback={<SomethingWentWrong />}>
      <Routes />
    </ErrorBoundary>
  )
}

Put one high enough to catch anything, and put another around a widget that is allowed to fail without taking the page with it.

The hooks

React

import { useLaraBugUser, useLaraBugContext, useLaraBugTag } from '@larabug/react'

function Dashboard({ user, team }) {
  useLaraBugUser({ id: user.id, plan: user.plan })
  useLaraBugContext({ team_id: team.id })
  useLaraBugTag('surface', 'dashboard')

  return <Panels />
}

They attach to everything reported from that point, so an error three components down still arrives knowing whose team it happened in.

Previous Vanilla JavaScript Next Vue 3