使用@sentry/nuxt模块如何隐藏DSN避免暴露至客户端？

使用@sentry/nuxt 9.3.0时，需在项目根目录创建sentry.client.config.ts文件初始化Sentry，示例代码如下：

Sentry.init({
  dsn: 'sentry key'
})

而当前Nuxt配置中，DSN存储在仅服务端可用的runtimeConfig字段里：

export default defineNuxtConfig({
  runtimeConfig: {
    dsnKey: 'secret-key', // 仅服务端可访问
    public: {}, // 暴露给客户端的配置
  }
})

问题在于：sentry.client.config.ts是客户端文件，无法直接读取服务端专属的dsnKey，同时又不想使用sentry.server.config.ts（会记录所有服务端错误），以下是几种可行的解决办法：

解决办法 #

1. 通过服务端API接口返回DSN #

在Nuxt项目中创建一个服务端路由（比如server/api/get-sentry-dsn.ts），用于返回存储的DSN：

export default defineEventHandler(() => {
  const config = useRuntimeConfig()
  return { dsn: config.dsnKey }
})

之后在sentry.client.config.ts中，先调用该接口获取DSN再初始化Sentry：

import * as Sentry from '@sentry/nuxt'

async function initSentry() {
  const res = await fetch('/api/get-sentry-dsn')
  const { dsn } = await res.json()
  
  Sentry.init({
    dsn
  })
}

initSentry()

注意：需给这个API接口添加基础权限控制，比如验证请求来源，避免DSN被恶意获取。

2. 服务端渲染时注入DSN到客户端 #

利用Nuxt的app:rendered钩子，在服务端渲染页面时将DSN注入到页面payload中，客户端直接读取：
在nuxt.config.ts中添加钩子配置：

export default defineNuxtConfig({
  runtimeConfig: {
    dsnKey: 'secret-key',
    public: {},
  },
  hooks: {
    'app:rendered'(nuxtApp) {
      const config = useRuntimeConfig()
      nuxtApp.payload.sentryDsn = config.dsnKey
    }
  }
})

然后在sentry.client.config.ts中读取payload里的DSN：

import * as Sentry from '@sentry/nuxt'

const sentryDsn = useNuxtApp().payload.sentryDsn

Sentry.init({
  dsn: sentryDsn
})

这种方式无需额外发起请求，在页面渲染阶段就完成了DSN的传递，效率更高。

3. 用客户端环境变量传递DSN（需权衡安全性） #

如果你的DSN不需要严格保密，可以将其放在以NUXT_PUBLIC_开头的环境变量中，让客户端可以直接读取：
首先在项目的.env文件中添加：

NUXT_PUBLIC_SENTRY_DSN=your-sentry-dsn

然后在nuxt.config.ts的public配置中引用该变量：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      sentryDsn: process.env.NUXT_PUBLIC_SENTRY_DSN
    }
  }
})

最后在sentry.client.config.ts中读取：

import * as Sentry from '@sentry/nuxt'

const config = useRuntimeConfig()

Sentry.init({
  dsn: config.public.sentryDsn
})

注意：这种方式下DSN会通过window.__NUXT__暴露在客户端控制台，若DSN涉及敏感权限，不建议使用。

内容的提问来源于stack exchange，提问作者Alexander Kim