React / Sentry 进行错误报告 - 如何不从 dev / localhost 发送错误

Question

我们在 React 项目中使用 Sentry，将以下内容添加到我们的主

index.js

和

App.js

文件中：

index.js

// Import Stuff
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
... import other important react stuff...

// https://sentry.io/onboarding/cbb-analytics/get-started/ (not my real dsn)
Sentry.init({
    dsn: 'https://[email protected]/3293942',
    integrations: [
        new Integrations.BrowserTracing()
    ],
    tracesSampleRate: 1.0
});

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root'));

App.js

import * as Sentry from '@sentry/react';
... other imports for app.js ...

// And Create The App
function App() {
    // check logged in...
    // check global state...
    // fetch some global data...

    return (
        <GlobalContext.Provider value={globalStateObj}>
            <AppNavbar />
            <LoginModal />
            <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback}>
                <Switch>
                    <Route exact path='/' render={(props) => <HomePage {...props} />}
                    <Route exact path='/about-us' component={AboutUs} />
                    <Route exact path='/reports' component={Reports} />
                    <Route component={NoMatch} />
                </Switch>
            </Sentry.ErrorBoundary>

            <AppFooter />
        </GlobalContext.Provider>
    );
}

export default App;

我们当然可以更精细地设置错误边界，但就目前情况而言，包装整个

switch

（其中包含我们应用程序中 99% 的代码）就可以为我们完成工作。每当用户在网站上遇到任何问题时，我们都会将其视为 Sentry 中的问题。

但是，如果错误来自 dev / localhost，我们更希望在 Sentry 中没有创建问题...在编写新代码时，我们总是在 dev 中破坏内容/收到错误，并将这些问题作为问题发送给 Sentry让 Sentry 变得混乱，并使跟踪生产中发生的重要错误变得更加困难。

我们可以使用

process.env.NODE_ENV

来确定 dev 与 prod，并在

index.js

或

App.js

中的某个位置使用它来防止向本地主机发送问题吗？或者也许哨兵有办法显式忽略来自 ip 的问题，例如

localhost:3000

？

Answer 1

不在生产环境中时，将 Sentry 配置中的

enabled

设置为 false。

Sentry.init({
    dsn: 'your-dsn',
    integrations: [
        new Integrations.BrowserTracing()
    ],
    tracesSampleRate: 1.0, // Should not use 1.0 in production
    enabled: process.env.NODE_ENV !== 'development',
});

旁注：Sentry 不鼓励在生产中将

tracesSampleRate

设置为 1.0

Answer 2

2023年7月答案

尝试在 Sentry 中的

Inbound Filter

中寻找

Project Settings

。

它有一个过滤掉本地主机的选项。

这也不计入配额。

Answer 3

让它工作的最简单方法是在 Sentry.init 中设置 beforeSend 方法，如果位置是 localhost，则返回 null。

Sentry.init({
  dsn:
    'your dsn here',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0

  beforeSend: (event) => {
    if (window.location.hostname === 'localhost') {
      return null;
    }
    return event;
  },
});

Answer 4

编写一个函数来了解您正在使用位置或某些 dev-env 或 process.env 或 .env 文件进行开发...没关系

function onDev() {
  return window.location.href.startsWith('http://localhost');
}

然后创建一个像这样的包装器

function SentryNoDev({ErrorBoundaryFallback, children}) {
   return onDev()
   ? children
   : <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback}>{children}</Sentry.ErrorBoundary>
   ;
}

Answer 5

在 Create-React-App 中

// index.js
if (process.env.NODE_ENV === 'production') {
  Sentry.init({...});
}

Answer 6

• 我不建议您将 dsn 放入代码中，我建议您将其设置为环境变量，例如 REACT_APP_SENTRY_DSN

• 无论您在哪里提供环境变量，都可以将您的 dsn 放在那里

• 如果您通过 netlify 提供环境变量，例如用于暂存的 REACT_APP_ENV 是用于生产“生产”的“暂存”，那么

let shouldSendToSentry = 
  ['staging','production'].includes(process.env.REACT_APP_ENV)

距这里有2条路

• 将哨兵配置包装在 if 条件中 例如：

if(shouldSendToSentry ){
  sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN
  })
}

• 另一种方式是通过

beforeSend: (event) => {
    if (!shouldSendToSentry) {
      return null;
    }
return event;

在这种情况下，它将忽略来自任何其他环境的所有问题

资源：

• https://www.youtube.com/watch?v=NuFEsUGK93g
• https://www.youtube.com/watch?v=S1Gm_K4Ux0s
• https://www.youtube.com/watch?v=SGgoP6HDR-I
• https://docs.sentry.io/platforms/javascript/guides/react/

Answer 7

https://ngrok.com/ 是一个很好的解决方案，以防本地主机过滤器无法更改。