Fixing a Gatsby Plugin Bug with Instana

word

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.

Instana - Enterprise Observability and APM for Cloud-Native Applications

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!

Instana, an IBM company, provides an Enterprise Observability Platform with automated application monitoring capabilities to businesses operating complex, modern, cloud-native applications no matter where they reside – on-premises or in public and private clouds, including mobile devices or IBM Z.

Control hybrid modern applications with Instana’s AI-powered discovery of deep contextual dependencies inside hybrid applications. Instana also gives visibility into development pipelines to help enable closed-loop DevOps automation.

This provides actionable feedback needed for clients as they to optimize application performance, enable innovation and mitigate risk, helping Dev+Ops add value and efficiency to software delivery pipelines while meeting their service and business level objectives.

For further information, please visit instana.com.