# Error Reports for Your Projects with URIports and Vercel **Author:** Timothy Lorimer --- 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. Using [URIports](https://uriports.com/), you will only need to configure a few HTTP headers to start receiving reports. ## 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](https://www.uriports.com/blog/network-error-logging/). - 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. - Permissions Policy: The visitor triggered a violation of the Permissions Policy. A policy that allows you to selectively enable, disable, or modify the behavior of browser features. ## Step 1: Setting up a project on Vercel [Vercel](https://vercel.com/) makes it effortless to deploy any static framework and Serverless Function so that you can focus on your project. Firstly, [signup for a free Vercel account](https://vercel.com/signup), then using your project's Git repository, import and deploy your project: To deploy your project with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), make sure it has been pushed to a Git repository. Import the project into Vercel using your [Git provider](https://vercel.com/import/git) of choice. After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production). Alternatively, you can learn about setting up your project on Vercel or use one of our many Quickstarts from [the Vercel introduction documentation](https://vercel.com/docs). 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](https://vercel.com/docs/concepts/projects/custom-domains) 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, intuitive way 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](https://app.uriports.com/auth/create/). 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](https://vercel.com/guides/client-side-error-reports-with-uriports-vercel#step-1:-setting-up-a-project-on-vercel). From your URIports dashboard, take note of your Report Endpoint. Next, create a `vercel.json` file at the root of your project and fill it with the following contents, replacing `my-report-endpoint` with your endpoint ID: `{ "headers": [{ "source": "/(.*)", "headers": [ { "key": "Report-To", "value": "{\"group\":\"default\",\"max_age\":10886400,\"endpoints\":[{\"url\":\"https://my-report-endpoint.uriports.com/reports\"}],\"include_subdomains\":true}" }, { "key": "NEL", "value": "{\"report_to\":\"default\",\"max_age\":2592000,\"include_subdomains\":true,\"failure_fraction\":1.0}" }, { "key": "Content-Security-Policy-Report-Only", "value": "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" }, { "key": "Expect-CT", "value": "max-age=86400,report-uri=\"https://my-report-endpoint.uriports.com/reports/report\"" }, { "key": "Permissions-Policy", "value": "geolocation=(), camera=(), fullscreen=*, payment=self" } ] } ] }` > **Note:** You can learn more about URIports reporting types and how to use them from their [Getting Started guide](https://www.uriports.com/getting-started). ## Step 3: Deploy and Receive Reports With a Vercel 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 [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly `main`) and you will get a fresh Production Deployment. Alternatively, run `vercel --prod` with Vercel 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/](https://www.uriports.com/blog/creating-a-content-security-policy-csp/) --- [View full KB sitemap](/kb/sitemap.md)