getsentry / getsentry/sentry-javascript

Export @sentry/vue errorHandler

未关闭
#11,471 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Errors good first issue Improvement Vue
主要语言
TypeScript
星标
8.7k
派生
1.8k
平均合并
1 天 17 小时
30 天内合并 PR
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 摘要。