getsentry / getsentry/sentry-javascript

Export @sentry/vue errorHandler

オープン
#11,471 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る
Errors good first issue Improvement Vue
主要言語
TypeScript
スター
8.7k
フォーク
1.8k
平均マージ
1日 17時間
マージ済み PR(30日)
515

説明

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。