用于错误报告的 React / Sentry - 如何不从 dev / localhost 发送错误答案

【问题标题】：React / Sentry for Error Reporting - How to not send errors from dev / localhost用于错误报告的 React / Sentry - 如何不从 dev / localhost 发送错误
【发布时间】：2021-02-17 14:18:04
【问题描述】：

我们在我们的 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://asdkfa930209jcdzkljaasdfasdf@o123456.ingest.sentry.io/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 来确定开发与生产，并在index.js 或App.js 中的某处使用它来防止将问题发送到本地主机吗？或者哨兵有办法明确忽略来自 ip 的问题，例如 localhost:3000？

【问题讨论】：

标签： javascript reactjs sentry

【解决方案1】：

我可以让它工作的最简单方法是在 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;
  },
});

【讨论】：

【解决方案2】：

编写一个函数来知道你正在使用 location 或使用一些 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>
   ;
}

【讨论】：

我想真的可以这么简单。我会试一试，虽然我不明白为什么它不起作用。谢谢
所以这行不通。有趣的是，我一并删除了Sentry.ErrorBoundary，但我仍然收到发送给 Sentry 的问题。所以Sentry.ErrorBoundary 只处理错误处理，而Sentry.init 是我真正需要处理的......
根据github.com/getsentry/sentry-java/issues/574，看起来将DSN 设置为null 是可行的方法...
不幸的是，使用此实现，在本地运行时遇到错误时看不到错误边界。我发布了一个保留错误边界的解决方案。

【解决方案3】：

在不生产时将 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',
});

旁注：哨兵discourages setting tracesSampleRate to 1.0 in production

【讨论】：

【解决方案4】：

在 Create-React-App 中

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

【讨论】：