Atlaskit Renderer component broken in Chrome 83 if Confluence is opened in incognito mode

Hi,

Looks like recent Chrome privacy improvements made in version 83 cause Atlaskit Renderer component to throw unhandled JS exception (that breaks UI of entire page) if opened in incognito mode. Workaround is to enable 3rd party cookies (by clicking on new ‘eye’ icon). Below is the top of stack trace from Chrome Dev tools.

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at http://localhost:3000/static/js/bundle.js:102930:54
    at Module../node_modules/@atlaskit/emoji/dist/esm/api/internal/UsageFrequencyTracker.js 
(...)
at Module../node_modules/@atlaskit/renderer/dist/esm/ui/ExtensionRenderer.js (http://localhost:3000/static/js/bundle.js:145071:81)
(...)

I thought I’ll report it as a post on Community so other app developers are also aware of this problem (please let me know if there’s more appropriate place to report such issues)

2 Likes

I’ve let the responsible team know—expect more soon :slight_smile:

1 Like

Hi @LukaszWiatrak,

I’m a developer on the editor platform team and I’m looking into this issue. I’m not yet able to reproduce this issue in the renderer locally, or in Jira or Confluence in Chrome 85 Canary (Incognito) unless I block all cookies.

Could you share some more information on how to reproduce the issue? Are you able to reproduce in the renderer on the https://atlaskit.atlassian.com/ examples?

Thanks very much for reporting this :slight_smile:

Could this be related to the new fancy privacy api coming in safari, chrome and Firefox (each one has a different implemention)?

Did you test in a connect app on a different domain?

1 Like

I’ve checked behavior on deployed production version of application and fortunately it’s working fine. So it looks like this problem is limited only to my local environment setup in which I’m fetching front-end assets from different URL (localhost with different port - webpack dev server) than the app itself - which is probably causing problems.

Sorry for prematurely raising an alarm for a issue that has much more limited impact than from what it looked like on first sight.

Yep okay, that’s good to hear.

No worries, please reach out if you find future problems :slight_smile:

Hi,
I got this error too with the ‘navigation next’ component. The component has trouble accessing the localStorage when third party cookies are blocked. Either by using the incognito mode or by explicitly prohibiting it in the chrome settings.

It can be reproduced easily with accessing this example with Chrome in incognito mode: https://codesandbox.io/s/9gvtl?module=/example.js

Chrome Version: 83.0.4103.116

3 Likes

Hi…

We are facing similar issue in incognito mode… it’s look inside emoji package for editor core.

However it’s working after allowing “Allow all cookies”

Thanks,
Umang

1 Like

I am seeing the same issue.

As the exception is thrown on import of the main component which somewhere down the line imported affected Atlaskit components, it didn’t even trigger the error boundary. So the app crashed and users would see the loading spinner forever.
Another side effect of this happening on import is that the error tracking was not yet initialised. So this one flew under my radar.

I now use code splitting to ensure import errors hit my boundary and tracking.

To safeguard against this issue I now check whether access to local storage is allowed, and disable the app otherwise.
@jcoppinger It would be nice if Atlaskit could safeguard access, as that would allow my users to use more restrictive cookie settings as well as incognito mode. Seeing that local storage is only used in a handful of places, that shouldn’t be too much of a hassle.

If we’d found a way to overwrite window.localStorage, that would also be a workable solution. But I wasn’t able to do it.

Anyway, here is what I am currently doing:

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import ErrorBanner from "./components/ErrorBanner";
import ErrorBoundary from './components/ErrorBoundary';
import './ErrorReporting';
import './index.css';
import * as serviceWorker from './serviceWorkerRegistration';

const App = React.lazy(() => import('./components/App'));

function localStorageAvailable() {
    try {
        const unused = window.localStorage
        return true
    } catch (e) {
        return false
    }
}

function AppOrError() {
    if (localStorageAvailable())
        return <Suspense fallback=""><App/></Suspense>
    document.getElementById('load-spinner')?.remove()
    return <ErrorBanner>
        Mind Maps for Confluence requires access to local storage. Please exit incognito mode or unblock third-party cookies in browser settings.
    </ErrorBanner>
}

ReactDOM.render(<ErrorBoundary><AppOrError/></ErrorBoundary>, document.getElementById('root'));

serviceWorker.register();

As a temporary fix i am overwriting the localStorage api by executing this code just before loading the chunk files.

function checkLocalStorageExist() {
    try {
        return window.localStorage.getItem(""), !0;
    } catch {
        return !1;
    }
}
checkLocalStorageExist() || Object.defineProperty(window, "localStorage", { value: null, configurable: !0, enumerable: !0, writable: !1 });

1 Like

We are seeing the same issue today on Chrome v90 while in Incognito for our app as well and it seems to be coming from atlakist components editor-core, media-common and renderer

mediaFeatureFlag-local.js:3 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at getLocalMediaFeatureFlag (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:187996:50)
    at https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:188059:104
    at Array.forEach (<anonymous>)
    at Module.../node_modules/@atlaskit/media-common/dist/esm/mediaFeatureFlags.js (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:188058:39)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:398952:42)
    at Module.../node_modules/@atlaskit/renderer/dist/esm/react/nodes/mediaSingle/index.js (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:200453:81)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:398952:42)
    at Module.../node_modules/@atlaskit/renderer/dist/esm/react/nodes/index.js (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:199962:71)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/field-group-macro.js:398952:42)
    at Module.../node_modules/@atlaskit/renderer/dist/esm/react/index.js
mediaFeatureFlag-local.js:3 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at getLocalMediaFeatureFlag (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:155298:50)
    at https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:155361:104
    at Array.forEach (<anonymous>)
    at Module.../node_modules/@atlaskit/editor-core/node_modules/@atlaskit/media-common/dist/esm/mediaFeatureFlags.js (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:155360:39)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:401277:42)
    at Module.../node_modules/@atlaskit/editor-core/dist/esm/plugins/media/index.js (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:75425:80)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:401277:42)
    at Module.../node_modules/@atlaskit/editor-core/dist/esm/create-editor/create-plugins-list.js (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:31210:67)
    at __webpack_require__ (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:401277:42)
    at Module.../node_modules/@atlaskit/editor-core/dist/esm/create-editor/ReactEditorView.js (https://5bfc6ab51ec7.ap.ngrok.io/edit-content-panel.js:30331:79)

cc: @huw @jcoppinger

1 Like

Any update from Atlassian side? Seems like Confluence Questions is affected by this too https://jira.atlassian.com/browse/CONFCLOUD-59124

1 Like

do we have any guidelines on the localStorage? should the apps and Atlassian products work in

“incognito mode with block all cookies and data option” in chrome or any other browser?

unless I block all cookies.

so we do not have a fallback mechanism when the setting is on?