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

Question

我们在 React 项目中使用 Sentry，将以下内容添加到 mainindex.js和App.js文件中：

索引.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://asdkfa930209jcdzkljaasdfasdf@o123456.ingest.sentry.io/3293942',
    integrations: [
        new Integrations.BrowserTracing()
    ],
    tracesSampleRate: 1.0
});

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

应用程序.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 使得跟踪生产中发生的那些重要错误变得更加困难。

我们可以使用 ourprocess.env.NODE_ENV来确定 dev 与 prod，并在某个地方使用它index.js来App.js防止向 localhost 发送问题吗？或者也许哨兵有办法显式忽略来自 ip 的问题，例如localhost:3000？

Answer 1

enabled不在生产环境中时，在 Sentry 配置中将其设置为 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月答案

尝试在哨兵中寻找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>
   ;
}