我已经在 sentry 中创建了一个项目，但是在 gatsby 上配置它是正确的方法吗？

Question

我正在使用 sentry 来跟踪崩溃报告，我已经在 React 之上设置了我的项目，但我正在通过 Gatsby 配置它，并且我已经在 gatsby.js 文件中以正确的方式添加了插件，但是在创建问题时在任何一个组件中，它都没有反映出哨兵问题，我无法找到这个问题的原因。请帮帮我

我将错误-boundary.js 文件放入我的组件文件夹中，这是它的代码


    import React from 'react';
    import { ErrorBoundary } from '@sentry/react';
    import { Link } from 'gatsby';
    
    const FallBack = ({ error, resetError }) => (
        <div role="alert">
            <p>Something went wrong:</p>
            <pre>{error.message}</pre>
            <Link to="/" onClick={resetError}>
                <a>Try again</a>
            </Link>
        </div>
    );
    
    const ErrorBoundaryContainer = ({ children }) => {
        return <ErrorBoundary fallback={FallBack}>{children}</ErrorBoundary>;
    };
    
    export default ErrorBoundaryContainer;

然后我将其导入 gatsby-browser.js 文件


        import React from 'react'
        import ErrorBoundaryContainer from './src/components/error-boundary'
    
        export const wrapPageElement = ({ element }) => (
          <ErrorBoundaryContainer>
        {element}
          </ErrorBoundaryContainer>
    )

然后我在我的一个组件中创建一个案例以抛出测试错误，

 

    const [toggle, toggleError] = React.useState(false);
      if (toggle) {
            console.error('console error');
            throw new Error('I crashed!');
        }
    <button type="button" onClick={() => toggleError(true)}>
                        Break the world
                    </button>

Answer 1

这里有几点要评论：

wrapPageElement 是 gatsby-browser.js and gatsby-ssr.js 之间共享的 API，因此如果您使用它，则必须在两个文件中放置相同的代码段
我假设你使用 @sentry/gatsby 作为依赖项，因为 docs suggests
抛出错误的组件应该包含一个useEffect，否则永远不会抛出错误。这是 React 的错误，而不是 Gatsby。
```
     const [toggle, toggleError] = React.useState(false);

     React.useEffect(()=>{
       if (toggle) {
          console.error('console error');
          throw new Error('I crashed!');
       }
     }, [toggle])

  <button type="button" onClick={() => toggleError(!toggle)}>Break the world </button>
```
注意：如果是toggle的话，应该会变成相反的值吧？当然可以随心所欲

具有 toggle 依赖项 ([toggle]) 的 useEffect 挂钩将在每次更改切换值更改时触发。在您的代码段中，因为最初设置为 false (React.useState(false)) 您的错误从未被抛出。这就像说“好吧，当我的 deps 值（toggle 在这种情况下）改变时，解雇我里面的东西”。

我已经在 sentry 中创建了一个项目，但是在 gatsby 上配置它是正确的方法吗？

i have created a project in sentry on react but configuring it on gatsby is it a correct way to do?

sentry

reactjs

gatsby

gatsby-plugin