Errors with ky / globalThis.fetch when trying to upgrade @sentry/nextjs > 7.29.0: typeerror, cannot read properties of undefined (reading 'bind')

[shouze]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.36.0

Framework Version

nextjs 13.1.6

Link to Sentry event

No response

SDK Setup

const { withSentryConfig } = require("@sentry/nextjs");

const nextConfig = () => {
  const IBE_ENV = readEnvironmentVariable("IBE_ENV", "production");
  if (!["development", "test", "staging", "production"].includes(IBE_ENV)) {
    throw new Error(
      `The environment variable "IBE_ENV" should have one the value: "development", "test", "staging", "production". Current value: "${IBE_ENV}"`,
    );
  }

  return {
    compress: false,
    modularizeImports: {
      "date-fns": {
        transform: "date-fns/{{member}}",
        preventFullImport: true,
      },
    },
    reactStrictMode: true,
    experimental: {
      swcPlugins: [
        ["next-superjson-plugin", {}],
        ["@lingui/swc-plugin", {}],
        [
          "@swc/plugin-styled-components",
          {
            displayName: true,
            ssr: true,
          },
        ],
      ],
    },
    compiler: {
      styledComponents: {
        displayName: true,
        ssr: true,
      },
    },
    env: {
      APP_ENV,
    }
    i18n: {
      locales: locales,
      defaultLocale: "fr",
    },
    pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js", "api.ts"],
    productionBrowserSourceMaps: APP_ENV !== "production",
    eslint: {
      ignoreDuringBuilds: true,
    },
    typescript: {
      ignoreBuildErrors: true,
    },
    sentry: {
      hideSourceMaps: APP_ENV === "production",
      widenClientFileUpload: true,
    },
  };
};


const sentryWebpackPluginOptions = {
  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

Steps to Reproduce

yarn run test

Produces such errors when (using ky 0.33.2):

TypeError: Cannot read properties of undefined (reading 'bind')
          at new bind (/home/sebastien/src/guest-journey.backup/internet-booking-engine/node_modules/ky/distribution/core/Ky.js:124:54)

Was working up to version 7.29.0 of @sentry/nextjs. Any upgrade generate such errors.
Using nodejs 16.x at the moment.

Expected Result

No errors, like with SDK <= 7.29.0

Actual Result

 TypeError: Cannot read properties of undefined (reading 'bind')
          at new bind (/src/my-app/node_modules/ky/distribution/core/Ky.js:124:54)

[lforst]

Hi, thanks for writing in. I dug around in the Ky.js code and can't really make a connection to the Sentry SDK causing this error. As far as I am aware we also didn't change anything between 7.29.0 and 7.36.0 that might trigger this error.

Can you try deleting your node_modules and reinstalling with the newest versions of the packages?

Also, could you create a reproduction example we can use to debug this and also raise an issue with the Ky team? They might know better what's going on here.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[shouze]

@lforst : still have this error with sentry 7.50.0. Can you please reopen?

Can you try deleting your node_modules and reinstalling with the newest versions of the packages?

Yes done, but changed nothing.

Also, could you create a reproduction example we can use to debug this and also raise an issue with the Ky team? They might know better what's going on here.

Will try, but not that easy.
Good news it that I can reproduce whith Sentry 7.30.0, so a reduced scope of changes.

👉 What is sure is that is related to this line in Ky and that worked up to sentry 7.29.0.

			fetch: options.fetch ?? globalThis.fetch.bind(globalThis),

💡 By reading the CHANGELOG, this is one of the following PR that broke things:

• feat(core): Add addIntegration method to client (#6651)
• feat(core): Add replay_event type for events (#6481)
• feat(gatsby): Support Gatsby v5 (#6635)
• feat(integrations): Add HTTPClient integration (#6500)
• feat(node): Add LocalVariables integration to capture local variables to stack frames (#6478)
• feat(node): Check for invalid url in node transport (#6623)
• feat(replay): Remove replayType from tags and into replay_event (#6658)
• feat(transport): Return result through Transport send (#6626)
• fix(nextjs): Don't wrap res.json and res.send (#6674)
• fix(nextjs): Don't write to res.end to fix next export (#6682)
• fix(nextjs): Exclude SDK from Edge runtime bundles (#6683)
• fix(replay): Allow Replay to be used in Electron renderers with nodeIntegration enabled (#6644)
• fix(utils): Ignore stack frames over 1kb (#6627)
• ref(angular) Add error-like objects handling (#6446)
• ref(nextjs): Remove instrumentSever (#6592)

[lforst]

@shouze Are you using the HttpClient integration?

[shouze]

@shouze Are you using the HttpClient integration?

No I don't think, not explicitly in any cases. Here's my sentry.client.config.js:

// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

const SENTRY_ENVIRONMENT = process.env.IBE_ENV;

Sentry.init({
  enabled: SENTRY_ENVIRONMENT !== "development",
  dsn:
    SENTRY_DSN ||
    "https://20a04590d41a49fe80155d599f96c0a9@o894757.ingest.sentry.io/5840525",
  // Adjust this value in production, or use tracesSampler for greater control
  integrations: [new Sentry.Replay()],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
  environment: SENTRY_ENVIRONMENT || "unknown",
  ignoreErrors: [
    "TypeError: Failed to fetch",
    "TypeError: Load failed",
    "TypeError: NetworkError when attempting to fetch resource.",
    "ResizeObserver loop limit exceeded",
    "ResizeObserver loop completed with undelivered notifications.",
  ],
});

And the server one:

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

const SENTRY_ENVIRONMENT = process.env.IBE_ENV;

Sentry.init({
  enabled: SENTRY_ENVIRONMENT !== "development",
  dsn:
    SENTRY_DSN ||
    "https://20a04590d41a49fe80155d599f96c0a9@o894757.ingest.sentry.io/5840525",
  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1.0,
  // ...
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
  environment: SENTRY_ENVIRONMENT || "unknown",
});

[lforst]

I don't think we changed anything in particular that should cause this error.

Maybe it's a timing issue: Before 7.30.0 Sentry ran after ky construction and now it runs before?

In any case, I would recommend raising an issue in the ky repository itself, maybe they know what's going on. I currently don't know what causes this and how to fix this. We need a reproduction example.

[shouze]

I don't think we changed anything in particular that should cause this error.

Maybe it's a timing issue: Before 7.30.0 Sentry ran after ky construction and now it runs before?

Yes, this is also something I spotted when reading changes. Can be related indeed.

In any case, I would recommend raising an issue in the ky repository itself, maybe they know what's going on. I currently don't know what causes this and how to fix this. We need a reproduction example.

I try to reproduce on a minimal nextjs project quickly. In the mean time you're right, I'll open an issue on ky repository later today.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[thojanssens]

@shouze I suffer from two errors in my SPA: "TypeError: Failed to fetch" and "TypeError: NetworkError when attempting to fetch resource."

I noticed that you added those in the ignore list. Could you explain what are those errors? It seems to happen rarely on my app for requests to the server, and I'm crashing the whole UI.