getsentry / getsentry/sentry-javascript

Export @sentry/vue errorHandler

Aperta
#11,471 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Errors good first issue Improvement Vue
Lingua principale
TypeScript
Stelle
8.7k
Fork
1.8k
Merge medio
1g 17h
PR unite (30g)
515

Descrizione

### 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
})
```

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.