Fixing a Gatsby Plugin Bug with Instana

April 30, 2020

Post

Recently, we re-launched docs.instana.io, Instana’s documentation. It got a major upgrade and significant improvement for our customers in terms of content, structure, visuals and UX. We also took this opportunity to upgrade Gatsby and related libraries. Gatsby is a great JavaScript framework for generating static web pages – perfect for this use case.

And, of course, we do monitor our documentation site with Instana’s website monitoring capabilities, tracking every single page load and collecting information about performance and problems.

About a day after launch, we got alerted by Instana’s Smart Alerts, that a new JavaScript error had occurred. Drilling into the errors, we quickly found that 3 individuals had encountered an error — all with Windows 10 Edge browser.

Finding the Gatsby Error

The raw error in the browser console was:

ReferenceError: 'PerformanceObserver' is not defined
at Anonymous function (https://docs.instana.io/app-2a528e959d70711ea161.js:1:27690)
at h (https://docs.instana.io/app-2a528e959d70711ea161.js:1:27295)
at Anonymous function (https://docs.instana.io/app-2a528e959d70711ea161.js:1:140773)
at Array.prototype.map (native code)
at e.apiRunner (https://docs.instana.io/app-2a528e959d70711ea161.js:1:140611)
at k (https://docs.instana.io/app-2a528e959d70711ea161.js:1:56954)
at n.componentDidMount (https://docs.instana.io/app-2a528e959d70711ea161.js:1:59091)
at lo (https://docs.instana.io/framework-4adb46e364577e67729f.js:1:95456)
at pu (https://docs.instana.io/framework-4adb46e364577e67729f.js:1:113323)
at t.unstable_runWithPriority (https://docs.instana.io/framework-4adb46e364577e67729f.js:1:4688)

Correcting the Gatsby Error

Thanks to Instana’s source map capabilities this was converted back to:

ReferenceError: 'PerformanceObserver' is not defined
webpack:///./node_modules/gatsby-remark-images-medium-zoom/gatsby-browser.js at 26:3
pluginOptions in webpack:///./node_modules/gatsby-remark-images-medium-zoom/gatsby-browser.js at 97:43
webpack:///./.cache/api-runner-browser.js at 35:5
Array.prototype.map native code
webpack:///./.cache/api-runner-browser.js at 22:3
maybeRedirect in webpack:///./.cache/navigation.js at 46:8
onRouteUpdate in webpack:///./.cache/navigation.js at 201:5
a in webpack:///./node_modules/react-dom/cjs/react-dom.production.min.js at 212:130
webpack:///./node_modules/react-dom/cjs/react-dom.production.min.js at 255:249
webpack:///./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.production.min.js at 19:460 

The gatsby-remark-images-medium-zoom plugin was looking at PerformanceObserver to potentially execute a zoom effect. Unfortunately the non-Chromium based Microsoft Edge browser does not have support for PerformanceObserver and therefore the Gatsby plugin broke.

A fix was quickly made, and as good open source citizens we also provided a fix to the plugin author to be released.

From being alerted of the error to fixing it, only minutes passed. Having the minified JavaScript stack trace automatically translated according to the source map was a huge help in quickly addressing the issue.

Play with Instana’s APM Observability Sandbox

Start your FREE TRIAL today!

As the leading provider of Automatic Application Performance Monitoring (APM) solutions for microservices, Instana has developed the automatic monitoring and AI-based analysis DevOps needs to manage the performance of modern applications. Instana is the only APM solution that automatically discovers, maps and visualizes microservice applications without continuous additional engineering. Customers using Instana achieve operational excellence and deliver better software faster. Visit https://www.instana.com to learn more.