How to use the @sentry/node.addBreadcrumb function in @sentry/node

render() {
        Sentry.addBreadcrumb({
            category: fileLabel,
            message: `Preparing document (${
                isServer() ? 'server' : 'browser'
            })`,
            level: Sentry.Severity.Debug,
        });

        return (
            
                
                    {/* PWA primary color */}

export default function App(props) {
    debugForceIP();
    const { Component, pageProps } = props;
    const classes = useStyles();

    useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles = document.querySelector('#jss-server-side');
        if (jssStyles) {
            jssStyles.parentElement.removeChild(jssStyles);
        }
    }, []);

    const { user } = pageProps;
    Sentry.addBreadcrumb({
        // See https://docs.sentry.io/enriching-error-data/breadcrumbs
        category: fileLabel,
        message: `Preparing app (${isServer() ? 'server' : 'browser'})`,
        level: Sentry.Severity.Debug,
    });

    return (
        <>
            
                <title>Lightmatter!</title>
                {!user ? (

addBreadcrumb(message, data, category = 'Initialization', level = 'info') {
    if (!this.sentryInitialized) {
      return;
    }
    Sentry.addBreadcrumb({
      message,
      data,
      category,
      level
    });
  }
}