Doesn't work with typescript

[rbabayoff]

Hey Kevin,

This is in relation to this:

https://community.airtable.com/t/blocks-cli-2-0-0-is-here/47253/10

If you prefer to reopen the topic so I can post there, let me know.

Your sentry example does work and does report errors but the source maps don't work with typescript. I tried to change tsconfig.json to both sourceMaps and inlineSourceMaps and neither work.

See here for what's going on in sentry.

Here's bundler.js:

const createBundler = require("@airtable/blocks-webpack-bundler").default;
const SentryPlugin = require("@sentry/webpack-plugin");
const SentryConfig = require("./sentryConfig");

function createConfig(baseConfig) {
	baseConfig.module.rules.push({
		test: /\.tsx?$/,
		exclude: [/node_modules/],
		loader: "babel-loader",
		options: {
			babelrc: false,
			configFile: false,
			presets: [
				require.resolve("@babel/preset-env"),
				require.resolve("@babel/preset-react"),
				require.resolve("@babel/preset-typescript"),
			],
			plugins: [
				["@babel/plugin-proposal-decorators", { legacy: true }],
				["@babel/plugin-proposal-class-properties", { loose: false }],
				// In contrast to MobX 4/5, "loose" must be false!    ^
			],
		},
	});

	if (baseConfig.mode === "production") {
		baseConfig.devtool = "source-map";
		baseConfig.plugins = (baseConfig.plugins || []).concat([
			new SentryPlugin({
				release: SentryConfig.RELEASE_VERSION,
				include: "./.tmp/dist",
			}),
		]);
	}

	return baseConfig;
}

exports.default = () => {
	return createBundler(createConfig);
};

Thanks,
Ronen

[kevinwilde-at]

Hi Ronen,

I've found two things that need to change. Please try applying this change in the file where you set up your Sentry integration, and this change in the bundler.js file.

Let me know if this works!

[rbabayoff]

Hey kevin, it works partially - I'm not able to get it to work with the Sentry.ErrorBoundary component.

It seems to require global initialization using Sentry.init. And when I move away from working with an instance of Sentry.BrowserClient to working with Sentry globally, errors are not being reported. Here's what I get in that case (with sentry debug flag turned on):

Sentry Logger [Warn]: Event dropped due to being a duplicate of previously captured event.
Sentry Logger [Log]: Adding outcome: error:event_processor
Sentry Logger [Error]: t: An event processor returned null, will not send event.
Sentry Logger [Log]: Flushing outcomes:
{
  "error:event_processor": 1
}
Sentry Logger [Log]: No outcomes to flush

Questions:

1. I can fallback to my own error boundary and just call Sentry.showReportDialog from componentDidCatch but to better understand what's going on, why do I need to create an instance of BrowserClient and why can't I work with Sentry globally?

2. It seems that in development mode with my own ErrorBoundary both window.onerror is called and componentDidCatch and in release only componentDidCatch. Why is that?

Thanks!

[rbabayoff]

Also, problem is I'm loosing the entire react related stack trace, see here, that why I wanted to use Sentry.ErrorBoundary to see if it solves it. Any way to solve this?

[rbabayoff]

Hey @kevinwilde-at would love to know why do I need to create an instance of BrowserClient and why can't I work with Sentry globally? It looks like if I don't work with sentry globally I'll need to add event handlers for all possible browser errors myself to report them to sentry. Is that correct?

[rbabayoff]

Hey @kevinwilde-at any way to work with Sentry globally, without having to add event handlers for all possible browser errors myself to report them to sentry?

[kevinwilde-at]

Hi Ronen, you will need to use a BrowserClient instance as we initialize Sentry for our own error tracking and Sentry doesn't support multiple hubs, as far as I know. Can you explain what you mean by "having to add event handlers for all possible browser errors myself"? Does adding an error event listener on window not work?