Troubleshoot the Netlify Drawer

Get help with common troubleshooting issues that people encounter using the Netlify Drawer on their sites or with syncing feedback across different tools.

As a part of your troubleshooting, we recommend you check if your site, browser, or Git provider support the Netlify Drawer. Learn more about site & browser requirements or about Git provider support.

If you have additional concerns that aren’t answered in this doc, you can visit our Forums to ask questions and find more information.

Netlify Drawer is missing

If you can’t find the Netlify Drawer on your Deploy Preview or branch deploy there may be several reasons why, such as the following:

• Netlify Drawer is not enabled for your site in the Netlify UI.
• Your site’s HTML does not contain a closing </body> tag. The Netlify Drawer requires a closing </body> tag to be present.
• Your site is running an active Split Test.
• Your site does not meet other requirements for your site or browser.

Netlify Drawer is not enabled for your site

We recommend that you verify that the Netlify Drawer is enabled for your site. You can do this by going to your site in the Netlify UI and selecting Project configuration > Build & deploy > Continuous deployment > Collaboration tools. Learn more in these docs.

No Netlify Drawer on a branch deploy?

If you cannot find the Netlify Drawer on a branch deploy, note that the Netlify Drawer is not enabled for branch deploys by default. A Developer or Owner must enable the Netlify Drawer for branch deploys in the Netlify UI.

Site browser requirements not met

The Netlify Drawer may also not be supported by your site if you have active split testing or if your site does not meet certain requirements.

Custom headers with Content Security Policy directives

The Netlify Drawer also might not appear if your site’s custom headers include the following Content Security Policy (CSP) directives:

• default-src
• frame-src
• child-src

To address this issue, add app.netlify.com to the allow list in the _headers or netlify.toml file. For example:

_headers

/*
  Content-Security-Policy: frame-src 'self' app.netlify.com;

netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "frame-src 'self' app.netlify.com;"

Netlify Drawer is missing for a site connected to GitLab

If the Netlify Drawer is missing on your site or has a “Something went wrong” error, this error is likely caused by a GitLab 15.0 update that no longer supports OAuth tokens without an expiration date.

Use Git Gateway or deploy notifications?

Your connection to GitLab for these features may also be impacted by the GitLab 15.0 update. Learn more about how to resolve these issues for Git Gateway or deploy notifications.

To get the Netlify Drawer working again, you’ll need to reauthenticate by relinking your GitLab repository to your site.

Go to Project configuration > Build & deploy > Continuous deployment > Repository > Manage repository > Link to a different repository, and link your existing GitLab repository to your site on Netlify.

Netlify Drawer hides important UI elements on site

If the Netlify Drawer is hiding important UI elements, you can move the drawer around the window or minimize the drawer.

Netlify Drawer interrupts automated tests

If a Deploy Preview is being used in automated tests, it will still display the Netlify Drawer in the website’s UI. This can be an issue for various reasons such as impacting load times or changing the visuals on the page. Developers can add a query parameter to the URL to prevent the Netlify Drawer from being placed on the page in these scenarios. Use the ?ntl-drawer-state=hidden and ?ntl-drawer-state=visible query parameters to force the drawer to be hidden or visible on the initial page load. Once loaded with either parameter, this state is stored within the browser’s storage for this tab only and will not require this parameter on subsequent navigation.

Comment author appears as a different user in your Git provider

If the person giving feedback doesn’t have a Git provider account or doesn’t connect to a Git provider through the Netlify Drawer, then that person’s feedback comments or issues may appear as a different default Netlify user in your Git provider.

By default, if the comment/issue author doesn’t have their Git provider account and Netlify user synced, then their comments are attributed to the Netlify user who linked the site to the repository.

If you’re a comment/issue author with a Git provider account and you want your review comments synced with your Git provider ID, then you can connect to your Git provider through the Netlify Drawer by selecting the Integrations tab.

As an alternative, you can set up a generic user account on the Git provider with the name “Netlify”. Once set up, all comments from people who do not have a Git provider account, or have not authenticated through the Git provider, are attributed to this generic “Netlify” user on merge/pull requests.

Set up a “Netlify” user for review comments in Azure DevOps

You can create a generic user named “Netlify” for everyone who has not authenticated to Azure DevOps, or who does not have sufficient permissions to comment on the pull request in Azure DevOps.

Once a generic user is set up, anyone who leaves feedback without authenticating to the Git provider will have their feedback attributed to the generic “Netlify” user.

To set this up, an administrator on Azure DevOps can take these steps:

1. In Azure DevOps, create a new role with at least a Basic role or higher permissions.
2. Confirm the user and log into Azure DevOps with that account.
3. Edit the Azure DevOps profile of the user to change the Full name and Public avatar. We recommend naming the user Netlify and using the Netlify logo as the avatar to help associate this feedback with Netlify’s collaboration tools.
4. Generate a personal access token with a Code: read & write scope, and copy the token to your clipboard.
5. In a Deploy Preview or branch deploy for a site connected to an Azure DevOps repo, log in through the Netlify Drawer.
6. In the Netlify Drawer, select the gear icon to open Deploy settings. Paste in the token from Azure DevOps, and select Set Azure DevOps token.

Set up a “Netlify” user for review comments in GitLab

To set up a “Netlify” user to appear in review comments from people who have not authenticated with GitLab, a GitLab project Owner or Maintainer can take these steps:

1. In GitLab, invite a new user with a role of Reporter or above to your project. The email address for this user must be one you have access to.

2. Confirm the user and log into GitLab with that account.

3. Edit the GitLab profile of the user to change the Full name and Public avatar. We recommend naming the user Netlify and using the Netlify logo as the avatar to help associate unauthenticated comments with Netlify.

4. Generate a personal access token with an api scope, and copy the token to your clipboard.

5. In a Deploy Preview from one of your GitLab sites, open the Deploy settings tab in the Netlify Drawer. Paste in the token from GitLab, and select Save.

   Comments left by people who have not authenticated with GitLab should now be associated with the Netlify user on your project.

Netlify Drawer loading interferes with my site functionality or build

First, we recommend that you check out our docs for the types of sites that support the Netlify Drawer, including some workarounds for SSR/ISR site pages. You can also use the Forums for more specific help to address your use case.

To remove the Netlify Drawer from your site, go to Project configuration > Build & deploy > Continuous deployment > Collaboration tools, select Configure, and disable the Netlify Drawer.

You can also open a deploy permalink if you need to preview a deploy but don’t want to access any of the collaboration features.

Troubleshooting integrations

Learn more about troubleshooting integrations with the Netlify Drawer.

Loom requires third-party cookies

You may be prompted to enable third-party cookies while trying to enable the Loom integration.

On Google Chrome, you can allow cookies for a specific site. To add the Netlify app to Sites that can always use cookies, enter [*.]netlify.app and select to include third-party cookies on the site.

Bitbucket requires an issue tracker

Issues trackers are not enabled by default in Bitbucket repositories. In order to create a new issue in Bitbucket from the Netlify Drawer, you need to enable the issue tracker for the repository associated with your pull request. Otherwise, you can connect a different project management tool—such as Jira Software—from the Integrations tab in the Netlify Drawer.