Skip to main content

Understanding Browser Error Differences

  • Updated

Introduction

Although all modern browsers run on JavaScript and, in broad terms, function similarly, they are not equal. To understand and interpret HTML, CSS, and Javascript, browsers depend on what are known as browser engines. Since different browsers use different engines that are built and maintained by different companies, they will inevitably differ on how they encounter, detect, and handle errors.

There are 3 main browser engines that are utilized by almost all major browsers:

Blink (developed by Google)

This engine is currently used by the following browsers:

  • Chrome
  • Edge
  • Opera
  • Brave

Webkit (developed by Apple)

This engine is currently used by the following browsers:

  • Safari
  • ALL browsers on iOS/iPad OS

Currently, Apple’s guidelines require that all browsers built for mobile Apple devices use the Webkit engine in order to be distributed on the App store. This includes mobile versions of Chrome, Edge, Firefox, etc.

Gecko (developed by Mozilla)

  • Firefox

Error Signature Differences

For Noibu users, the main impact of these differing browser engines is how they report error signatures. Since Noibu categorizes issues by their error signatures, the same error will create multiple issues depending on the type of browser reporting the error.

From our data, browser error signature differences are most common for JS “null” and “undefined” property type errors.

For example, when trying to access object.property_name in JS where object is null or undefined, you would end up with the following error messages depending on the browser engine used:

Blink Browser Engine Error Signature:

Cannot read properties of undefined/null (reading {property_name})

Webkit Browser Engine Error Signature:

undefined/null is not an object (evaluating {object.property_name})

Gecko Browser Engine Error Signature:

cant access property {property_name} {object.property_name} is undefined/null

Example:

This real-world error from a Salesforce Commerce Cloud (SFCC) customer shows the different error signatures in action. Error A and Error B are caused by the exact same code but have different error signatures when picked up by different browser engines and are considered different errors in Noibu.

Error A:

Untitled

Based on the error signature guide above, we know that this is the error that would appear for Blink engine browsers. This is supported by the browser/OS breakdown:|

Untitled

Error B:

Untitled

On the other hand, we know that this error signature is typical of Webkit engine browsers and can see this reflected in the browser/OS breakdown:

Untitled

Key Takeaways

Takeaway #1: Pay attention to browser groupings on Apple devices

Due to Apple's policy of requiring the Webkit engine on all mobile devices, browser types are not equal across all devices. The iOS versions of Firefox, Chrome, Edge, Google Search App, etc. are all built on the Webkit engine and are far more similar to Safari than their namesake on all other devices. This applies to error signatures and types of errors detected as well.

However, note that this does NOT apply to MacOS. MacOS Safari uses the Webkit engine while all other MacOS browsers use their normal engine.

When you encounter an error where the OS impact only includes Apple devices but the browser impact is spread out across a wide range of browsers, it is almost certain that the error is Webkit-related. All of those browsers are encountering the same error as they are almost equivalent under the hood.

Untitled

Takeaway #2: Check for equivalent errors

Although errors can sometimes be isolated to a certain browser engine or type, it is often the case that the same error is occurring across other browsers and devices under a different error signature, as seen with Error A and Error B above.

Therefore, it is worth checking to ensure whether or not this is the case, in order to gain a full understanding of the devices and browsers being impacted by this error.

How to check for equivalent errors:

In the example above, the error is caused by an undefined value and the full JS expression triggering the error is:

t.find(".compare-wrapper").offset.top

CleanShot

To search for this error with each browser engine, you need to determine the error signature format reported by each browser and plug this into the issues table search.

For Blink browsers, the error would be:

Cannot read properties of undefined (reading top)

CleanShot

However, note that several errors appear when searching by this error signature. Unfortunately, this is common due to how general Blink browser error signatures are. Look through each of the issues to find the one where the error file/location matches.

For Webkit browsers, the error would be:

undefined is not an object (evaluating t.find(.compare-wrapper).offset().top

CleanShot

Two important things to note here. When searching by error signature, formatting such as double quotes (used in the .compare-wrapper class) need to be removed. It is also likely that you won't need to plug in the entire error expression to find the issue.

For Gecko browsers, the error would be:

cant access property top t.find(...).offset() is undefined

CleanShot

In this case, the .compare-wrapper class is replaced by ellipses. However, once again it is likely unnecessary to plug in the entire error expression to narrow down the issue.

Articles in this section