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)
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?
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.
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.
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();
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)
