getsentry / getsentry/sentry-javascript

Export @sentry/vue errorHandler

Open
#11,471 4 comments 0 reactions 0 assignees View on GitHub
Errors good first issue Improvement Vue
Dominant language
TypeScript
Stars
8.7k
Forks
1.8k
Avg merge
1d 17h
Merged PRs (30d)
515

Description

### Problem Statement

I'm trying to write an ErrorBoundary component to scope components to the right vue app in our nested-vue-app microfrontends setup in order to capture them with specific tags to make our multiplexed transport route them correctly (as described on )

I have a component looking like this where I'd like to add some tags to the scope, then have it processed with Sentry's error handler, without having it propagate higher up to other ErrorBoundaries

```ts
import { type SlotsType, defineComponent, onErrorCaptured } from 'vue'
import { withScope, captureException } from '@sentry/vue'

/**
* This is a transparent component that captures errors propagating from
* descendant components and captures it with sentry with extra information
* about the microfrontend to ensure it's routed to the correct sentry project.
*
* It renders the default slot with props passed through transparently.
*/
export default defineComponent({
name: 'ErrorBoundary',
slots: Object as SlotsType<{ default: Record }>,
setup (props, { slots, attrs }) {
onErrorCaptured((err, vm, info) => {
withScope(scope => {
scope.setTag('appName', `${__APP_NAME__}`)
scope.setExtra('vueInfo', info)
// TODO: Here I'd like to "forward" the error to sentry's own error handler to get it further formatted right and captured with the right hints etc. and logged with sentry's logErrors logger
captureException(err)
})
return false
})

return () => slots.default(props)
}
})

```

### Solution Brainstorm

Either, it'd be nice to export https://github.com/getsentry/sentry-javascript/blob/develop/packages/vue/src/errorhandler.ts#L12-L56 so you can create a "custom" instance of that error handler

Alternatively, is there maybe a way to set these tags at the current scope when it gets to the error handler, keep propagating it, and skip setting those tags if they're already set at higher error boundary functions?

The documentation recommends against it, but could something like this work perhaps?
```ts
onErrorCaptured((_err, vm, info) => {
const pCtx = getCurrentScope().getPropagationContext() as PropagationContext & { mfTagged?: boolean }
if (pCtx.mfTagged) return true
setTag('appName', `${__APP_NAME__}`)
getCurrentScope().setPropagationContext({
...pCtx,
mfTagged: true
} as unknown as PropagationContext)
return true
})
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.