Error Reports for Your Projects with URIports and ZEIT Now

Enable error reporting for your websites deployed with ZEIT Now and act fast on issues.

Support for client-side generated reports are the standard for modern web browsers, and enabling this for your projects is a great way to identify and resolve issues, and improve site security, without relying on your users as testers.

URIports makes these reports free and easy to set up. You will only need to configure a few HTTP headers to start receiving reports.

The URIports dashboard.

What Reports?

Setting up reports with URIports, you can receive a variety of reports to inform you of various cases, including;

  • Crash: A visitor was unable to continue because the (mobile) browser crashed.
  • Deprecation: A browser API or feature has been used which is expected to stop working in a future update to the browser.
  • Intervention: A user-agent has not honored a request made, or javascript function called, by the website or web-based app (e.g., for security, performance, or user annoyance reasons.)
  • Network-Error-Logging (NEL): Receive reports on 4xx/5xx HTTP errors, and DNS/TLS related issues. For more information, see the URIports documentation.
  • Content Security Policy (CSP): Reports to help detect and mitigate certain types of attacks, like XSS and data injection, and thereby improve the security of the website or web-based apps.
  • Expect-CT: When browsers fail to detect the presence of Signed Certificate Timestamps (SCTs) in subsequent TLS connections. This prevents the use of misused certificates from going unnoticed.
  • Feature Policy: The visitor triggered a violation of the Feature Policy. A policy that allows you to selectively enable, disable, or modify the behavior of browser features.

Step 1: Setting up a project on ZEIT Now

ZEIT Now makes it effortless to deploy any static framework and Serverless Function so that you can focus on your project.

Firstly, signup for a free ZEIT account, then using your project's Git repository, import and deploy your project:

There are two ways to deploy with ZEIT Now. We recommend using a ZEIT Now for Git Integration for ease-of-use. Alternatively, Now CLI can be used to generate a manual Preview Deployment.


To deploy your project with a ZEIT Now for Git Integration, make sure it has been pushed to a Git repository.

Import the project into ZEIT Now using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the default branch (commonly "master") will result in a Production Deployment.

Alternatively, you can learn about setting up your project on ZEIT Now or use one of our many Quickstarts from the ZEIT Now introduction documentation.

Once deployed, you will receive a default production URL for your project which you will need in the setup of your URIports account. Alternatively, you can assign a Custom Domain to your project.

Step 2: Setting up URIports and HTTP Headers

URIports collects, aggregates, and enriches all of the reports listed above and presents them in a uniform, easy to navigate interface. With built-in (email and push) notifications, URIports keeps you informed on issues that require attention without the need to regularly log in.

Create an endpoint for your reports by setting up a free URIports account.

URIports will ask you for an email, password, and a domain for which your reports will be coming from. The domain will be the production URL that you received for your project in Step 1.

From your URIports dashboard, take note of your Report Endpoint.

Next, create a now.json file at the root of your project and fill it with the following contents, replacing my-report-endpoint with your endpoint ID:

{
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "Report-To": "{\"group\":\"default\",\"max_age\":10886400,\"endpoints\":[{\"url\":\"https://my-report-endpoint.uriports.com/reports\"}],\"include_subdomains\":true}",
        "NEL": "{\"report_to\":\"default\",\"max_age\":2592000,\"include_subdomains\":true,\"failure_fraction\":1.0}",
        "Content-Security-Policy-Report-Only": "default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self'; style-src 'self'; report-uri https://my-report-endpoint.uriports.com/reports/report; report-to default",
        "Expect-CT": "max-age=86400,report-uri=\"https://my-report-endpoint.uriports.com/reports/report\"",
        "Feature-Policy-Report-Only": "geolocation 'none'; camera 'none'; fullscreen *; payment 'self'"
      }
    }
  ]
}

HTTP headers to tell your visitor's browser to send reports to your endpoint.

Note: You can learn more about URIports reporting types and how to use them from their Getting Started guide.

Step 3: Deploy and Receive Reports

With a ZEIT Now project created and URIports setup for your project, you can now deploy your changes and start receiving reports.

For projects that were deployed from a Git repository, all you need is to push to the default branch (usually master) and you will get a fresh production deployment.

Alternatively, run now --prod with Now CLI from your project's root.

That's all! You will now receive reports from your users and be able to act quickly on any issue that arises.

Avoiding Flooding Your URIports Account

Some report types can potentially flood your URIports account with reports and burn a lot of your quota if they are configured incorrectly.

The following is a few suggestions to help you stop flooding:

  • Network-Error-Logging: If you have a high traffic website, you should lower the failure_fraction to define a sampling rate. The value must be a number between 0.0 and 1.0 (e.g. 0.05 for 5%.)
  • Content Security Policy: Enabling CSP could result in a massive amount of reports when you use external sources like Google Analytics or files hosted on a CDN. If you have not properly set up a CSP yet, we advise you to start by removing the report-uri and report-to elements from your CSP-header and use the browser's console to track down external sources and add them to your policy before enabling the report features again. Read more about implementing CSP: https://www.uriports.com/blog/creating-a-content-security-policy-csp/


Written By
Written by timothytimothy