# React

`@larabug/react` is the browser client plus an error boundary and three hooks. Everything in [vanilla JavaScript](/docs/javascript/vanilla-javascript) applies here too.

## Start it

```jsx
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.

```jsx
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

```jsx
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.