Reduce package size

[christiansaiki]

🚀 feature request

Please reduce the package size or have documentation of how to only import what we need to use to notify airbrake of errors.

Relevant Package

@airbrake/browser

Description

I thought that moving from airbrake-js to @airbrake/browser would make a huge improvement in bundle size, but it's kind of strange that the parsed size is bigger actually.

Describe the solution you'd like

I thought of moving to sentry, but they also have a huge bundle. But I saw that someone created https://github.com/TinkoffCreditSystems/micro-sentry which has only 1.9kb minified. I wonder if you guys can do something like this.

[destari]

Thanks! We'll check it out! Definitely want smaller.. :)

[christiansaiki]

Thank you so much @destari

[dparish]

I agree with this 100%

I'd be fully on board with a modern browser only version I think a lions share of browsers now are all 'green' browsers.

My total app is only 57kb gzipped adding airbrake takes it to 70kb. That's just not worth it.

[dparish]

But I see this pull issue has been opened since Sept 2021 so I guess no one cares?

[dparish]

I pulled this down and compiled it and I get about 22k gzipped

I then removed babel and instead set the tsconfig target to ES2017
I also removed the promise polyfills and the fetch polyfill

I now get 11k gzipped

That's still pretty big for what it does but MUCH better. Take a look at caniuse.com. you don't need the polyfills anymore

You can lose even more weight if you get rid of the error stack parser and come up with something lighter. I suspect much of that parser is stuck in the IE11 view of the world.

If you still think you need to support every browser ever, perhaps you can offer airbrake-modern or something?

Another way to make this lighter is to move the parsing to your backend. We did this at my company for phone validation. The client side library was too big so we just spun up a node endpoint with the SAME CODE but now it's not on the client. I suspect you can do the same thing by having your API endpoint take in the error stack as an object and you handle the parsing on your end.

Code that ends up in everyones payload should be SMALL.....

[dparish]

So I got tired of waiting and just rebuilt it myself:

https://github.com/dparish/airbrake-js-lite

or:

npm install airbrake-js-lite

11k gz'd

I had to add in quite a few ts-ignore's to get it to compile and still need to put the tests back in.

It got this small by removing the polyfill's, getting rid of cross-fetch and targeting es2019.

I have not tested it thoroughly, but if you see a problem feel free to open a pr and I'll take a look.