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.

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 Site settings > 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 site Collaborator or Owner must enable the Netlify Drawer for branch deploys in the Netlify UI.

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.

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

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

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

/* 
  Content-Security-Policy: child-src 'self' app.netlify.com; script-src 'self' app.netlify.com netlify-cdp-loader.netlify.app;
[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "child-src 'self' app.netlify.com; script-src 'self' app.netlify.com netlify-cdp-loader.netlify.app;"

# 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.

Relinking a repository resets environment variables

If you are using the classic environment variables experience, relinking your repository will remove your environment variables automatically. We recommend copying the environment variables you need before relinking your GitLab repository.

  1. On Netlify, if you are using the classic environment variables experience and have any environment variables set in the Netlify UI, copy and store them in a secure place.
  2. Go to Site settings > Build & deploy > Continuous deployment > Repository > Manage repository > Link to a different repository, and link your existing GitLab repository to your site on Netlify.
  3. If you copied environment variables, re-create them with the Netlify UI.

# 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.

# 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.

# 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, sign 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 Site settings > Build & deploy > Continuous Deployment > Collaboration tools, select Edit settings, 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.